geg-gas-web/src/views/erp/device/components/InfomationCheckModal.vue

<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>