优化监控中心前台样式

2024-08-20 15:40:49 +08:00
parent 7d049151b6
commit e99f441461
11 changed files with 151 additions and 32 deletions
--- a/hx-ai-intelligent/src/icon/biaoge1.svg
+++ b/hx-ai-intelligent/src/icon/biaoge1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="组_22740" data-name="组 22740" transform="translate(-1845.881 -208.881)">
+    <g id="组_24427" data-name="组 24427">
+      <rect id="矩形_16486" data-name="矩形 16486" width="20" height="20" transform="translate(1845.881 208.881)" fill="none"/>
+      <path id="路径_31099" data-name="路径 31099" d="M63.9,114.958h4.606v3.835H63.9Zm5.862,5.122h4.774V124.3H69.762Zm0-5.122h4.774v3.835H69.762Zm6.284,5.122H80.4V124.3H75.793v-3.964A.255.255,0,0,1,76.046,120.08Zm-12.146,0h4.606V124.3H63.9Zm0-10.98H80.4v4.571H63.9Zm12.146,5.858H80.4v3.835H75.793v-3.577A.255.255,0,0,1,76.046,114.958Z" transform="translate(1783.72 101.781)" fill="#2778ff"/>
+    </g>
+  </g>
+</svg>
--- a/hx-ai-intelligent/src/icon/zhexiantu.svg
+++ b/hx-ai-intelligent/src/icon/zhexiantu.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="组_24431" data-name="组 24431" transform="translate(-1871 -212)">
+    <g id="组_24430" data-name="组 24430" transform="translate(25.119 3.119)">
+      <rect id="矩形_16486" data-name="矩形 16486" width="20" height="20" transform="translate(1845.881 208.881)" fill="none"/>
+      <path id="减去_1098" data-name="减去 1098" d="M15432.129,4587.351H15419.1a1.23,1.23,0,0,1-1.224-1.29v-12.89a1.231,1.231,0,0,1,1.224-1.29h13.026a1.229,1.229,0,0,1,1.22,1.29v12.89A1.243,1.243,0,0,1,15432.129,4587.351Zm-11.3-3.614a.7.7,0,1,0,0,1.4h10.1a.7.7,0,0,0,0-1.4Zm2.913-6.2a.891.891,0,0,0-.449.217l-3.215,4a.752.752,0,0,0,.081,1.03.674.674,0,0,0,.938-.128l2.809-3.439,2.075,1.762a.712.712,0,0,0,.488.17.975.975,0,0,0,.449-.255l4.233-5.458a.637.637,0,0,0-.085-.86h0a.049.049,0,0,1-.039-.021.055.055,0,0,0-.042-.021.67.67,0,0,0-.934.128l-3.784,4.814-2.037-1.763A.688.688,0,0,0,15423.743,4577.54Z" transform="translate(-13570 -4360.604)" fill="#2778ff"/>
+    </g>
+  </g>
+</svg>
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@@ -1,5 +1,26 @@
 <template>
  <div ref="graphChart" style="width: 100%; height: 80%"></div>
+  <div
+    v-show="!haveData"
+    style="
+      height: 80%;
+      width: 96%;
+      position: absolute;
+      margin: 0 1% 0 1%;
+      z-index: 5;
+      top: 20%;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    ">
+    <a-empty />
+  </div>
+  <!-- <div
+    v-else
+    style="height: 80%; width: 100%; display: flex; justify-content: center; align-items: center">
+    <a-empty />
+  </div> -->
 </template>

 <script lang="ts">
@@ -36,8 +57,16 @@
      const graphChart = ref(null);
      let chartInstance: echarts.ECharts | null = null;

+      let haveData = ref(false);
      const draw = () => {
        data.value = pageData.graphList;
+        if (data.value && data.value.length > 0) {
+          haveData.value = true;
+        } else {
+          haveData.value = false;
+          return;
+        }
+
        let XData = pageData.XData;
        if (chartInstance) {
          chartInstance.dispose();
@@ -144,9 +173,11 @@
      };

      return {
+        data,
        draw,
        graphChart,
        downloadChart,
+        haveData,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
@@ -19,7 +19,7 @@
          <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
          <div class="button">
            <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
-            <ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
+            <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
          </div>
        </div>
        <graph ref="graphRef" v-if="isGraph" />
@@ -35,7 +35,7 @@
  import graph from './graph/index.vue';
  import environmentTable from './table/index.vue';

-  const iconName = ref('biaoge');
+  const iconName = ref('biaoge1');

  const treeRef = ref();
  const graphRef = ref();
@@ -57,10 +57,10 @@

  function change() {
    isGraph.value = !isGraph.value;
-    if (iconName.value == 'biaoge') {
-      iconName.value = 'bingtu';
+    if (iconName.value == 'biaoge1') {
+      iconName.value = 'zhexiantu';
    } else {
-      iconName.value = 'biaoge';
+      iconName.value = 'biaoge1';
    }
  }
 </script>
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@@ -96,6 +96,7 @@
      const column: TableColumnType[] = [
        {
          title: '序号',
+          width: 50,
          customRender: ({ record, index }) => {
            // 自定义单元格内容，这里返回序号
            if (index == 0) {
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -7,6 +7,7 @@
    </div>
    <a-tree-select
      ref="select"
+      placeholder="请选择设备类型"
      v-model:value="value"
      style="width: 100%"
      :tree-line="treeLine && { showLeafIcon }"
@@ -18,6 +19,7 @@
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
+        :show-line="{ showLeafIcon: false }"
        checkable
        :height="560"
        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
@@ -124,23 +126,24 @@
      http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
        treeData1.value = formatTreeData(res.data);

-        if (treeData1.value && treeData1.value.length > 0) {
-          if (treeData1.value[0].children) {
-            value.value = treeData1.value[0].children[0].value;
-            changeDeviceType(treeData1.value[0].children[0].value, [
-              treeData1.value[0].children[0].title,
-            ]);
-          } else {
-            value.value = treeData1.value[0].value;
-            changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
-          }
-        }
+        // if (treeData1.value && treeData1.value.length > 0) {
+        //   if (treeData1.value[0].children) {
+        //     value.value = treeData1.value[0].children[0].value;
+        //     changeDeviceType(treeData1.value[0].children[0].value, [
+        //       treeData1.value[0].children[0].title,
+        //     ]);
+        //   } else {
+        //     value.value = treeData1.value[0].value;
+        //     changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
+        //   }
+        // }
      });

      const formatTreeData = (data: any) => {
        return data.map((item: any) => ({
          title: item.code + '.' + item.deviceType,
          value: item.code,
+          disabled: item.children.length != 0 ? true : false,
          children: item.children ? formatTreeData(item.children) : [],
        }));
      };
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -1,5 +1,21 @@
 <template>
  <div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
+  <div
+    v-show="!haveData"
+    style="
+      height: 80%;
+      width: 96%;
+      position: absolute;
+      margin: 0 1% 0 1%;
+      z-index: 5;
+      top: 20%;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    ">
+    <a-empty />
+  </div>
 </template>

 <script lang="ts">
@@ -41,12 +57,19 @@

      let chartInstance: echarts.ECharts | null = null;

+      let haveData = ref(true);
      const draw = () => {
        data.value = pageData.graphGraphList;
+        if (data.value && data.value.length > 0) {
+          haveData.value = true;
+        } else {
+          haveData.value = false;
+          return;
+        }
        if (chartInstance) {
          chartInstance.dispose();
        }
-        chartInstance = echarts.init(graphGraphchart.value);
+        // chartInstance = echarts.init(graphGraphchart.value);
        var seriesList = [];
        var date = pageData.graphTableColumns;
        var legendList: string | any[] = [];
@@ -132,7 +155,7 @@
        chartInstance.setOption(option);
      };
      onMounted(() => {
-        draw();
+        // draw();
      });

      // 下载图表
@@ -152,6 +175,8 @@
      return {
        graphGraphchart,
        downloadChart,
+        data,
+        haveData,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -58,7 +58,7 @@
  import analysisTable from './analysisTable/index.vue';
  import analysisGraph from './analysisGraph/index.vue';

-  const iconName = ref('biaoge');
+  const iconName = ref('biaoge1');

  const treeRef = ref();
  const graphRef = ref();
@@ -95,10 +95,10 @@

  function change() {
    isGraph.value = !isGraph.value;
-    if (iconName.value == 'biaoge') {
-      iconName.value = 'bingtu';
+    if (iconName.value == 'biaoge1') {
+      iconName.value = 'zhexiantu';
    } else {
-      iconName.value = 'biaoge';
+      iconName.value = 'biaoge1';
    }
  }
 </script>
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -40,6 +40,7 @@
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
+        :show-line="{ showLeafIcon: false }"
        checkable
        :height="600"
        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -326,10 +326,10 @@
      .get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value })
      .then((res) => {
        treeData2.value = res.data;
-        if (treeData2.value && treeData2.value.length > 0) {
-          quyuvalue.value = [treeData2.value[0].childList[0].id];
-          getDeviceHotMap();
-        }
+        // if (treeData2.value && treeData2.value.length > 0) {
+        //   quyuvalue.value = [treeData2.value[0].childList[0].id];
+        //   getDeviceHotMap();
+        // }
      });
  };

@@ -342,12 +342,13 @@
        break;
      }
    }
+    let time = timeValue.value.format('YYYY-MM-DD');
    http
      .post(environmentMonitor.getDeviceHotMap, {
        orgId: orgId.value,
        environmentType: environmentType,
        location: quyuvalue.value, // 区域id或者name
-        time: '2024-07-01',
+        time: time,

        timeRate: frequencyValue.value, // 频率
      })
@@ -383,7 +384,7 @@
    // 获取区域数据
    await queryDeviceArea();

-    // await getDeviceHotMap();
+    getDeviceHotMap();

    // let hotData = {
    //   timeList: [
@@ -749,6 +750,33 @@
        hotChar.dispose();
      }
      hotChar = echarts.init(hotChartRef.value);
+      let min = 0;
+      let max = 100;
+      if (typeValue.value == 'MFStem') {
+        // 温度
+        min = -20;
+        max = 40;
+      } else if (typeValue.value == 'MFSCORAr') {
+        // CO2浓度
+        min = 350;
+        max = 2000;
+      } else if (typeValue.value == 'MFSPM') {
+        // PM2.5
+        min = 0;
+        max = 500;
+      } else if (typeValue.value == 'MFSwf') {
+        // 光照度
+        min = 0;
+        max = 10000;
+      } else if (typeValue.value == 'MFSvf') {
+        // TVOC
+        min = 0;
+        max = 1;
+      } else if (typeValue.value == 'MFShum') {
+        //湿度
+        min = 0;
+        max = 100;
+      }

      const option = {
        tooltip: {
@@ -772,11 +800,21 @@
          splitArea: {
            show: true,
          },
+          axisLabel: {
+            formatter: function (value) {
+              // 每五个字符插入一个换行符
+              if (value.length > 5) {
+                return value.match(/.{1,5}/g).join('\n');
+              }
+              return value;
+            },
+            lineHeight: 20,
+          },
        },
        visualMap: {
          show: false,
-          min: 0,
-          max: 30,
+          min: min,
+          max: max,
          // calculable: true,
          // orient: 'horizontal',
          // left: 'center',
@@ -803,7 +841,7 @@
        ],
      };

-      hotChar = echarts.init(hotChartRef.value);
+      // hotChar = echarts.init(hotChartRef.value);
      hotChar.setOption(option);
    }
  };
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -9,7 +9,11 @@
          margin-top: 0.5%;
          padding-left: 1.5%;
          background: #ffffff;
-          font-family: 'PingFangSC-Regular', sans-serif;
+          font-family: 'PingFang SC';
+          font-size: 16px;
+          font-weight: 700;
+          letter-spacing: 1.33px;
+          line-height: 21px;
        ">
        <a-tab-pane key="1" tab="综合数据" />
        <a-tab-pane key="2" tab="历史数据" />