---初始化后台管理web页面项目

src/views/erp/device/components/InfomationCheckModal.vue

@@ -0,0 +1,193 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="查看设备详情">
+    <a-row>
+      <a-col class="title">基础信息</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">设备编号：{{ deviceInfo?.number }}</a-col>
+      <a-col
+        align="right"
+        :style="`color:${deviceInfo?.state === 1 ? '#67c23a' : '#F56C6C'}`"
+        class="state"
+        :span="11"
+      >
+        状态：{{ deviceInfo?.state === 1 ? '正常' : '异常' }}
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">设备类型：{{ deviceInfo?.typeName }}</a-col>
+      <a-col :span="12">设备名称：{{ deviceInfo?.name }}</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">设备位置：{{ deviceInfo?.address }}</a-col>
+      <a-col :span="12">设备供应商：{{ deviceInfo?.supplierName }}</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">规格型号：{{ deviceInfo?.model }}</a-col>
+      <a-col :span="12">购买日期：{{ deviceInfo?.buyDate }}</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">维保日期：{{ deviceInfo?.maintainDate }}</a-col>
+      <a-col :span="12">报废日期：{{ deviceInfo?.scrapDate }}</a-col>
+    </a-row>
+    <a-row>
+      <a-col>负责人：{{ deviceInfo?.principalNames }}</a-col>
+    </a-row>
+    <a-row>
+      <a-col class="title">运行状况</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="10" align="center">
+        <div ref="gaute" style="height: 240px"></div>
+        <span>实时运行速度m/s</span>
+      </a-col>
+      <a-col :span="14">
+        <div ref="linechart" style="height: 300px"></div>
+      </a-col>
+    </a-row>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { checkDeviceInfo } from '/@/api/erp/device/info';
+  import * as echarts from 'echarts';
+
+  const rowId = ref('');
+  const deviceInfo = ref();
+  const gaute = ref<HTMLDivElement>();
+  const linechart = ref<HTMLDivElement>();
+
+  const gauteOption = {
+    series: [
+      {
+        type: 'gauge',
+        radius: '88%',
+        center: ['50%', '60%'],
+        axisLine: {
+          lineStyle: {
+            width: 20,
+            color: [
+              [0.3, '#67e0e3'],
+              [0.7, '#37a2da'],
+              [1, '#fd666d'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
+          },
+        },
+        axisTick: {
+          distance: -20,
+          length: 8,
+          lineStyle: {
+            color: '#fff',
+            width: 2,
+          },
+        },
+        splitLine: {
+          distance: -20,
+          length: 30,
+          lineStyle: {
+            color: '#fff',
+            width: 4,
+          },
+        },
+        axisLabel: {
+          color: 'auto',
+          distance: 15,
+          fontSize: 12,
+        },
+        detail: {
+          valueAnimation: true,
+          color: 'auto',
+        },
+        title: {
+          offsetCenter: [0, '-50%'],
+        },
+        data: [
+          {
+            value: 70,
+            name: 'm',
+          },
+        ],
+      },
+    ],
+  };
+  const linechartOption = {
+    color: ['#00CACF'],
+    title: {
+      text: '生产效率',
+      textStyle: {
+        fontSize: 14,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['4:00', '8:00', '12:00', '16:00', '20:00', '24:00'],
+    },
+    yAxis: {
+      type: 'value',
+      name: '单位：个',
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330],
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 202, 207, 0.6)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(255, 255, 255, 0)',
+            },
+          ]),
+        },
+      },
+    ],
+  };
+  defineEmits(['register']);
+
+  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      destroyOnClose: true,
+      showCancelBtn: false,
+      showOkBtn: false,
+      width: 800,
+      fixedHeight: true,
+    });
+
+    rowId.value = data.id;
+    deviceInfo.value = await checkDeviceInfo(data.id);
+    const myChartGaute = echarts.init(unref(gaute) as HTMLDivElement);
+    myChartGaute.setOption(gauteOption);
+    myChartGaute.resize(); //显示区域大小发生改变更新图表
+
+    const myChartLinechart = echarts.init(unref(linechart) as HTMLDivElement);
+    myChartLinechart.setOption(linechartOption);
+    myChartLinechart.resize(); //显示区域大小发生改变更新图表
+  });
+</script>
+<style lang="less" scoped>
+  .ant-row {
+    margin-bottom: 15px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-top: 5px;
+    }
+
+    .state {
+      font-size: 16px;
+    }
+  }
+</style>