General-AI-Platform-Web-Client/src/pages/dataScreen/views/device/deviceList.vue

<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-23 10:14:31
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-02-27 16:05:40
 * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\deviceList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { bgImageData } from "./testData/fabricImageSvg";
import { deviceStatusData, deviceTypeOptions } from "./testData/deviceListData";
import { DsBox2 } from "@/components/DsBox";
import DetailCard from "./modules/detailCard.vue";

defineOptions({
  name: "DeviceList"
});

// state
const deviceParams = ref<Record<string, any>>({
  type: "0"
});

const clipPathData = ref<{
  width: number;
  height: number;
}>({
  width: 1378, // 宽
  height: 728 // 高
});
const canvasRef = ref<any>(null);
const cvs = ref<any>(null);
const currentDetail = ref<Record<string, any>>({
  deviceType: "1", // 模型类型 1 设备1 2 设备2
  id: "1001", // 模型id
  status: "watchOnline", //
  deviceStatus: "启用",
  deviceName: "工业摄像头01", // 设备名称
  deviceCode: "CRM001",
  deviceLocation: "生产厂商:  南京苏胜天信息科技有限公司",
  deviceParams: "89hufd",
  deviceCategory: "摄像设备",
  diviceGroup: "组1",
  createTime: "2024-01-15 14:00",
  baseInfo: {
    left: 527.0215, // 相对x
    top: 24.5797 // 相对y
  }
});

function initCanvas() {
  const canvasObject = new fabric.Canvas(canvasRef.value);
  canvasObject.setBackgroundImage(
    bgImageData.src,
    canvasObject.renderAll.bind(canvasObject),
    {
      width: clipPathData.value.width,
      height: clipPathData.value.height,
      originX: "left",
      originY: "top"
    }
  );
  cvs.value = canvasObject;
  console.log(canvasObject);
}

onMounted(() => {
  initCanvas();
});
</script>

<template>
  <div class="flex justify-between deviceList_wrap">
    <div class="left">
      <DsBox2 title="设备列表" type="w2h1" bgClass="bg_device_left">
        <template #default>
          <div
            class="flex items-center justify-end w-full h-full device_left_box"
          >
            <canvas
              ref="canvasRef"
              :width="clipPathData.width"
              :height="clipPathData.height"
            />
            <div class="deviceList_params">
              <el-select
                v-model="deviceParams.type"
                placeholder="Select"
                style="width: 240px"
              >
                <el-option
                  v-for="item in deviceTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </template>
      </DsBox2>
    </div>
    <div class="right">
      <DsBox2 title="设备详情" type="w3h1" bgClass="bg_device_right">
        <template #default>
          <div class="w-full p-[24px]">
            <DetailCard :info="currentDetail" />

            <div class="device_alarm_info">
              <p>告警信息</p>
              <ul class="device_alarm_info_list">
                <li
                  v-for="(v, k) in deviceStatusData"
                  :key="k"
                  class="flex justify-between"
                >
                  <span
                    class="level_status"
                    :class="`level_status_${v.type}`"
                    >{{ v.label }}</span
                  >
                  <span>{{ v.des }}</span>
                  <span>{{ v.time }}</span>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </DsBox2>
    </div>
  </div>
</template>

<style lang="scss">
@import "./deviceList.scss";
</style>