公司端首页更新

src/views/vent/home/clique/components/icon-light.vue

@@ -1,263 +1,270 @@
 <template>
   <div class="icon-light">
     <template v-for="(item, index) in pointList" :key="index">
-      <div class="icon-point" @click="openModal(item.code, item.label, item.leftV, item.topV)" :style="{ left: item.leftV, top: item.topV }">
+      <div class="icon-point" @click="openModal(item.code, item.label, item.leftV, item.topV)"
+        :style="{ left: item.leftV, top: item.topV }">
         <img :src="item.imgSrc" alt="" />
         <span
-          :class="{ 'icon-text-c': item.align == 'center', 'icon-text-l': item.align == 'left', 'icon-text-r': item.align == 'right','icon-text-b':item.align=='bottom' }"
-          :style="{ color: item.textColor }"
-          >{{ item.label }}</span
-        >
+          :class="{ 'icon-text-c': item.align == 'center', 'icon-text-l': item.align == 'left', 'icon-text-r': item.align == 'right', 'icon-text-b': item.align == 'bottom' }"
+          :style="{ color: item.textColor }">{{ item.label }}</span>
       </div>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, defineEmits, inject, watch, nextTick } from 'vue';
-  import { getAssetURL } from '/@/utils/ui';
+import { ref, defineEmits, inject, watch, nextTick } from 'vue';
+import { getAssetURL } from '/@/utils/ui';
 
-  const emit = defineEmits(['showDetail']);
-  const globalConfig = inject('globalConfig');
-  let props = defineProps({
-    warningList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
+const emit = defineEmits(['showDetail']);
+const globalConfig = inject('globalConfig');
+let props = defineProps({
+  warningList: {
+    type: Array,
+    default: () => {
+      return [];
     },
-  });
-  // const iconWarningList = ref([]);
-  const warningLevel1 = getAssetURL('company/home/point1.png'); // 低风险
-  const warningLevel2 = getAssetURL('company/home/point2.png'); // 中风险
-  const warningLevel3 = getAssetURL('company/home/point3.png'); // 高风险
-  const warningLevel4 = getAssetURL('company/home/point4.png'); // 报警
-  let pointList = ref<any[]>(
-    globalConfig.History_Type == ''
-      ? [
-          { code: 'sdmtjtltmk', imgSrc: warningLevel1, label: 'lt', leftV: '327px', topV: '40px', textColor: '#fff', align: 'left' },
-          { code: 'sdmtjtcctrk', imgSrc: warningLevel1, label: 'cce', leftV: '291px', topV: '69px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtbetmk',
-            imgSrc: warningLevel1,
-            label: 'bet',
-            leftV: '286px',
-            topV: '97px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtwlmlmk', imgSrc: warningLevel1, label: 'wlml', leftV: '327px', topV: '115px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtcctmk',
-            imgSrc: warningLevel1,
-            label: 'cc',
-            leftV: '346px',
-            topV: '132px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtsgtmk', imgSrc: warningLevel1, label: 'skt', leftV: '373px', topV: '149px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtbltmk',
-            imgSrc: warningLevel1,
-            label: 'blt',
-            leftV: '408px',
-            topV: '184px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjthlgmk', imgSrc: warningLevel1, label: 'hlg', leftV: '445px', topV: '214px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtswmk',
-            imgSrc: warningLevel1,
-            label: 'sw',
-            leftV: '439px',
-            topV: '244px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtdltmkhjtj', imgSrc: warningLevel1, label: 'hjt', leftV: '398px', topV: '265px', textColor: '#fff', align: 'left' },
-          { code: 'sdmtjtdltmk', imgSrc: warningLevel1, label: 'dlt', leftV: '492px', topV: '260px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtjjmk',
-            imgSrc: warningLevel1,
-            label: 'jj',
-            leftV: '565px',
-            topV: '413px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtyjlmk', imgSrc: warningLevel1, label: 'yjl', leftV: '669px', topV: '308px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtbdmk',
-            imgSrc: warningLevel1,
-            label: 'bd',
-            leftV: '862px',
-            topV: '340px',
-            textColor: '#fff',
-            align: 'left',
-          },
-        ]
-      : [
-          { code: 'sdmtjtltmk', imgSrc: warningLevel1, label: '柳塔矿', leftV: '405px', topV: '165px', textColor: '#fff', align: 'right' },
-          { code: 'sdmtjtcctrk', imgSrc: warningLevel1, label: '寸草塔二矿', leftV: '269px', topV: '116px', textColor: '#fff', align: 'left' },
-          {
-            code: 'sdmtjtbetmk',
-            imgSrc: warningLevel1,
-            label: '布尔台矿',
-            leftV: '329px',
-            topV: '177px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtwlmlmk', imgSrc: warningLevel4, label: '乌兰木伦矿', leftV: '462px', topV: '210px', textColor: '#fff', align: 'right' },
-          {
-            code: 'sdmtjtcctmk',
-            imgSrc: warningLevel1,
-            label: '寸草塔矿',
-            leftV: '396px',
-            topV: '224px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtsgtmk', imgSrc: warningLevel1, label: '石圪台矿', leftV: '514px', topV: '250px', textColor: '#fff', align: 'bottom' },
-          {
-            code: 'sdmtjtbltmk',
-            imgSrc: warningLevel1,
-            label: '补连塔矿',
-            leftV: '432px',
-            topV: '282px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjthlgmk', imgSrc: warningLevel1, label: '哈拉沟矿', leftV: '641px', topV: '258px', textColor: '#fff', align: 'bottom' },
-          {
-            code: 'sdmtjtswmk',
-            imgSrc: warningLevel3,
-            label: '上湾矿',
-            leftV: '381px',
-            topV: '334px',
-            textColor: '#fff',
-            align: 'left',
-          },
-          { code: 'sdmtjtdltmkhjtj', imgSrc: warningLevel1, label: '活鸡兔井', leftV: '598px', topV: '368px', textColor: '#fff', align: 'bottom' },
-          { code: 'sdmtjtdltmk', imgSrc: warningLevel2, label: '大柳塔井', leftV: '598px', topV: '308px', textColor: '#fff', align: 'bottom' },
-          {
-            code: 'sdmtjtjjmk',
-            imgSrc: warningLevel1,
-            label: '锦界矿',
-            leftV: '575px',
-            topV: '460px',
-            textColor: '#fff',
-            align: 'bottom',
-          },
-          { code: 'sdmtjtyjlmk', imgSrc: warningLevel1, label: '榆家梁矿', leftV: '748px', topV: '370px', textColor: '#fff', align: 'center' },
-          {
-            code: 'sdmtjtbdmk',
-            imgSrc: warningLevel1,
-            label: '保德矿',
-            leftV: '892px',
-            topV: '200px',
-            textColor: '#fff',
-            align: 'center',
-          },
-        ]
-  );
-  function openModal(code, label, leftV, topV) {
-    emit('showDetail', code, label, leftV, topV);
-  }
-  watch(
-    () => props.warningList,
-    (newVal: any, oldVal: any) => {
-      let newPointList;
-      if (newVal && oldVal && newVal.length == oldVal.length) {
-        for (let i = 0; i < newVal.length; i++) {
-          if (newVal[i].isWarning !== oldVal[i].isWarning) {
-            if (!newPointList) newPointList = [...pointList.value];
-            const index = (newPointList as []).findIndex((item) => item['code'] === newVal[i]['orgcode']);
-            newPointList[index]['imgSrc'] = newVal[i].isWarning ? warningLevel4 : warningLevel1;
-            newPointList[index]['textColor'] = newVal[i].isWarning ? '#ff5e00' : '#fff';
-          }
-        }
-      } else {
-        newPointList = [...pointList.value];
-        for (let i = 0; i < newVal.length; i++) {
+  },
+});
+// const iconWarningList = ref([]);
+const warningLevel1 = getAssetURL('company/home/point1.png'); // 低风险
+const warningLevel2 = getAssetURL('company/home/point2.png'); // 中风险
+const warningLevel3 = getAssetURL('company/home/point3.png'); // 高风险
+const warningLevel4 = getAssetURL('company/home/point4.png'); // 报警
+let pointList = ref<any[]>(
+  globalConfig.History_Type == ''
+    ? [
+      { code: 'sdmtjtltmk', imgSrc: warningLevel1, label: 'lt', leftV: '327px', topV: '40px', textColor: '#fff', align: 'left' },
+      { code: 'sdmtjtcctrk', imgSrc: warningLevel1, label: 'cce', leftV: '291px', topV: '69px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtbetmk',
+        imgSrc: warningLevel1,
+        label: 'bet',
+        leftV: '286px',
+        topV: '97px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtwlmlmk', imgSrc: warningLevel1, label: 'wlml', leftV: '327px', topV: '115px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtcctmk',
+        imgSrc: warningLevel1,
+        label: 'cc',
+        leftV: '346px',
+        topV: '132px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtsgtmk', imgSrc: warningLevel1, label: 'skt', leftV: '373px', topV: '149px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtbltmk',
+        imgSrc: warningLevel1,
+        label: 'blt',
+        leftV: '408px',
+        topV: '184px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjthlgmk', imgSrc: warningLevel1, label: 'hlg', leftV: '445px', topV: '214px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtswmk',
+        imgSrc: warningLevel1,
+        label: 'sw',
+        leftV: '439px',
+        topV: '244px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtdltmkhjtj', imgSrc: warningLevel1, label: 'hjt', leftV: '398px', topV: '265px', textColor: '#fff', align: 'left' },
+      { code: 'sdmtjtdltmk', imgSrc: warningLevel1, label: 'dlt', leftV: '492px', topV: '260px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtjjmk',
+        imgSrc: warningLevel1,
+        label: 'jj',
+        leftV: '565px',
+        topV: '413px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtyjlmk', imgSrc: warningLevel1, label: 'yjl', leftV: '669px', topV: '308px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtbdmk',
+        imgSrc: warningLevel1,
+        label: 'bd',
+        leftV: '862px',
+        topV: '340px',
+        textColor: '#fff',
+        align: 'left',
+      },
+    ]
+    : [
+      { code: 'sdmtjtltmk', imgSrc: warningLevel1, label: '柳塔矿', leftV: '405px', topV: '165px', textColor: '#fff', align: 'right' },
+      { code: 'sdmtjtcctrk', imgSrc: warningLevel1, label: '寸草塔二矿', leftV: '269px', topV: '116px', textColor: '#fff', align: 'left' },
+      {
+        code: 'sdmtjtbetmk',
+        imgSrc: warningLevel1,
+        label: '布尔台矿',
+        leftV: '329px',
+        topV: '177px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtwlmlmk', imgSrc: warningLevel4, label: '乌兰木伦矿', leftV: '462px', topV: '210px', textColor: '#fff', align: 'right' },
+      {
+        code: 'sdmtjtcctmk',
+        imgSrc: warningLevel1,
+        label: '寸草塔矿',
+        leftV: '396px',
+        topV: '224px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtsgtmk', imgSrc: warningLevel1, label: '石圪台矿', leftV: '514px', topV: '250px', textColor: '#fff', align: 'bottom' },
+      {
+        code: 'sdmtjtbltmk',
+        imgSrc: warningLevel1,
+        label: '补连塔矿',
+        leftV: '432px',
+        topV: '282px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjthlgmk', imgSrc: warningLevel1, label: '哈拉沟矿', leftV: '641px', topV: '258px', textColor: '#fff', align: 'bottom' },
+      {
+        code: 'sdmtjtswmk',
+        imgSrc: warningLevel3,
+        label: '上湾矿',
+        leftV: '381px',
+        topV: '334px',
+        textColor: '#fff',
+        align: 'left',
+      },
+      { code: 'sdmtjtdltmkhjtj', imgSrc: warningLevel1, label: '活鸡兔井', leftV: '598px', topV: '368px', textColor: '#fff', align: 'bottom' },
+      { code: 'sdmtjtdltmk', imgSrc: warningLevel2, label: '大柳塔井', leftV: '598px', topV: '308px', textColor: '#fff', align: 'bottom' },
+      {
+        code: 'sdmtjtjjmk',
+        imgSrc: warningLevel1,
+        label: '锦界矿',
+        leftV: '575px',
+        topV: '460px',
+        textColor: '#fff',
+        align: 'bottom',
+      },
+      { code: 'sdmtjtyjlmk', imgSrc: warningLevel1, label: '榆家梁矿', leftV: '748px', topV: '370px', textColor: '#fff', align: 'center' },
+      {
+        code: 'sdmtjtbdmk',
+        imgSrc: warningLevel1,
+        label: '保德矿',
+        leftV: '892px',
+        topV: '200px',
+        textColor: '#fff',
+        align: 'center',
+      },
+    ]
+);
+function openModal(code, label, leftV, topV) {
+  emit('showDetail', code, label, leftV, topV);
+}
+watch(
+  () => props.warningList,
+  (newVal: any, oldVal: any) => {
+    let newPointList;
+    if (newVal && oldVal && newVal.length == oldVal.length) {
+      for (let i = 0; i < newVal.length; i++) {
+        if (newVal[i].isWarning !== oldVal[i].isWarning) {
+          if (!newPointList) newPointList = [...pointList.value];
           const index = (newPointList as []).findIndex((item) => item['code'] === newVal[i]['orgcode']);
-          newPointList[index]['imgSrc'] = newVal[i].isWarning ? warningLevel4 : warningLevel1;
-          newPointList[index]['textColor'] = newVal[i].isWarning ? '#ff5e00' : '#fff';
+          // newPointList[index]['imgSrc'] = newVal[i].isWarning ? warningLevel4 : warningLevel1;
+          newPointList[index]['imgSrc'] = warningLevel1;
+          // newPointList[index]['textColor'] = newVal[i].isWarning ? '#ff5e00' : '#fff';
+          newPointList[index]['textColor'] = '#fff';
         }
       }
-      if (newPointList) {
-        pointList.value = newPointList;
+    } else {
+      newPointList = [...pointList.value];
+      for (let i = 0; i < newVal.length; i++) {
+        const index = (newPointList as []).findIndex((item) => item['code'] === newVal[i]['orgcode']);
+        // newPointList[index]['imgSrc'] = newVal[i].isWarning ? warningLevel4 : warningLevel1;
+        newPointList[index]['imgSrc'] = warningLevel1;
+        // newPointList[index]['textColor'] = newVal[i].isWarning ? '#ff5e00' : '#fff';
+        newPointList[index]['textColor'] = '#fff';
       }
     }
-  );
+    if (newPointList) {
+      pointList.value = newPointList;
+    }
+  }
+);
 </script>
 
 <style lang="less" scoped>
-  .icon-light {
-    position: relative;
-    width: 100%;
-    height: 100%;
+.icon-light {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .icon-point {
+    display: flex;
+    align-items: center;
+    position: absolute;
 
-    .icon-point {
-      display: flex;
-      align-items: center;
+    img {
+      width: 35px;
+      height: 35px;
+      cursor: pointer;
+    }
+
+    span {
+      font-size: 12px;
+      padding: 0px 5px;
+      color: #ffffff;
+      // background-color: rgba(12, 13, 13);
+    }
+
+    .icon-text-l {
       position: absolute;
+      font-size: 12px;
+      padding: 0px 5px;
+      // background-color: rgba(12, 13, 13);
+      display: block;
+      width: 100px;
+      text-align: center;
+      // top: -20px;
+      left: -75px;
+    }
 
-      img {
-        width: 35px;
-        height: 35px;
-        cursor: pointer;
-      }
+    .icon-text-r {
+      position: absolute;
+      font-size: 12px;
+      padding: 0px 5px;
+      display: block;
+      width: 100px;
+      text-align: center;
+      // top: -20px;
+      left: 12px;
+    }
 
-      span {
-        font-size: 12px;
-        padding: 0px 5px;
-        color: #ffffff;
-        // background-color: rgba(12, 13, 13);
-      }
-      .icon-text-l {
-        position: absolute;
-        font-size: 12px;
-        padding: 0px 5px;
-        // background-color: rgba(12, 13, 13);
-        display: block;
-        width: 100px;
-        text-align: center;
-        // top: -20px;
-        left: -75px;
-      }
-      .icon-text-r {
-        position: absolute;
-        font-size: 12px;
-        padding: 0px 5px;
-        display: block;
-        width: 100px;
-        text-align: center;
-        // top: -20px;
-        left: 12px;
-      }
-      .icon-text-c {
-        position: absolute;
-        font-size: 12px;
-        padding: 0px 5px;
-        display: block;
-        width: 60px;
-        text-align: center;
-        top: -20px;
-        left: -12px;
-      }
-      .icon-text-b{
-        position: absolute;
-        font-size: 12px;
-        padding: 0px 5px;
-        display: block;
-        width: 100px;
-        text-align: center;
-        left: -28px;
-        bottom:-20px;
-      }
+    .icon-text-c {
+      position: absolute;
+      font-size: 12px;
+      padding: 0px 5px;
+      display: block;
+      width: 60px;
+      text-align: center;
+      top: -20px;
+      left: -12px;
+    }
+
+    .icon-text-b {
+      position: absolute;
+      font-size: 12px;
+      padding: 0px 5px;
+      display: block;
+      width: 100px;
+      text-align: center;
+      left: -28px;
+      bottom: -20px;
     }
   }
+}
 </style>

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -223,21 +223,21 @@ function getOption() {
           zlevel: -1,
         },
       ],
-      dataZoom: [
-        {
-          // 这部分是关键
-          show: echartData.xdata.length > 8 ? true : false,
-          type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
-          start: 0, // 数据窗口范围的起始百分比
-          end: echartData.xdata.length > 8 && echartData.xdata.length <= 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
-          height: 10, // 设置缩放条高度
-          left: 'center',
-          bottom: 25,
-          labelPrecision: 0, // 标签精度，默认为auto
-          showDetail: false, // 是否显示详情
-          showDataShadow: false, // 是否显示数据阴影
-        },
-      ],
+      // dataZoom: [
+      //   {
+      //     // 这部分是关键
+      //     show: echartData.xdata.length > 8 ? true : false,
+      //     type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
+      //     start: 0, // 数据窗口范围的起始百分比
+      //     end: echartData.xdata.length > 8 && echartData.xdata.length <= 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
+      //     height: 10, // 设置缩放条高度
+      //     left: 'center',
+      //     bottom: 25,
+      //     labelPrecision: 0, // 标签精度，默认为auto
+      //     showDetail: false, // 是否显示详情
+      //     showDataShadow: false, // 是否显示数据阴影
+      //   },
+      // ],
       tooltip: {
         trigger: 'axis',
         show: false,