粉尘首页路由跳转功能添加-提交

src/views/vent/home/clique/dustComponents/measure-point.vue

@@ -9,237 +9,248 @@
   </div>
 </template>
 <script lang="ts" setup>
-  // 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
-  import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
+// 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
+import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
+import { useRouter } from 'vue-router';
 
-  let props = defineProps({
-    measureData: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+let props = defineProps({
+  measureData: {
+    type: Object,
+    default: () => {
+      return {};
     },
-  });
-  const roadTitle = '监测点位统计与分析';
-  const measureRef = ref();
-  // let xData = ref<any[]>([]);
-  // let yData = ref<any[]>([]);
-  // let maxData = reactive<any[]>([]);
+  },
+});
+const roadTitle = '监测点位统计与分析';
+const measureRef = ref();
+let router = useRouter(); //路由
+// let xData = ref<any[]>([]);
+// let yData = ref<any[]>([]);
+// let maxData = reactive<any[]>([]);
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(measureRef.value);
-      // let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(measureRef.value);
+    // let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
         },
-        legend: {
-          textStyle: {
-            color: '#ffffff', // 字体颜色
-          },
-        },
-        grid: {
-          top: '40',
-          left: '10',
-          bottom: '10',
-          right: '10',
-          containLabel: true,
+      },
+      legend: {
+        textStyle: {
+          color: '#ffffff', // 字体颜色
         },
-        xAxis: {
-          type: 'category',
-          data: [
-            '柳塔矿',
-            '寸草塔二矿',
-            '布尔台矿',
-            '乌兰木伦矿',
-            '寸草塔矿',
-            '石圪台矿',
-            '补连塔矿',
-            '哈拉沟矿',
-            '上湾矿',
-            '活鸡兔井',
-            '大柳塔井',
-            '锦界矿',
-            '榆家梁矿',
-            '保德矿',
-          ],
-          // data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
-          //data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
-          axisLabel: {
-            show: true,
-            color: '#ffffff',
-            rotate: 0,
-            formatter: function (params) {
-              let newParamsName = '';
-              const paramsNameNumber = params.length;
-              const provideNumber = 3; // 单行显示文字个数
-              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
-              if (paramsNameNumber > provideNumber) {
-                for (let p = 0; p < rowNumber; p++) {
-                  let tempStr = '';
-                  const start = p * provideNumber;
-                  const end = start + provideNumber;
-                  if (p === rowNumber - 1) {
-                    tempStr = params.substring(start, paramsNameNumber);
-                  } else {
-                    tempStr = params.substring(start, end) + '\n';
-                  }
-                  newParamsName += tempStr;
+      },
+      grid: {
+        top: '40',
+        left: '10',
+        bottom: '10',
+        right: '10',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: [
+          '柳塔矿',
+          '寸草塔二矿',
+          '布尔台矿',
+          '乌兰木伦矿',
+          '寸草塔矿',
+          '石圪台矿',
+          '补连塔矿',
+          '哈拉沟矿',
+          '上湾矿',
+          '活鸡兔井',
+          '大柳塔井',
+          '锦界矿',
+          '榆家梁矿',
+          '保德矿',
+        ],
+        // data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
+        //data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
+        axisLabel: {
+          show: true,
+          color: '#ffffff',
+          rotate: 0,
+          formatter: function (params) {
+            let newParamsName = '';
+            const paramsNameNumber = params.length;
+            const provideNumber = 3; // 单行显示文字个数
+            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+            if (paramsNameNumber > provideNumber) {
+              for (let p = 0; p < rowNumber; p++) {
+                let tempStr = '';
+                const start = p * provideNumber;
+                const end = start + provideNumber;
+                if (p === rowNumber - 1) {
+                  tempStr = params.substring(start, paramsNameNumber);
+                } else {
+                  tempStr = params.substring(start, end) + '\n';
                 }
-              } else {
-                newParamsName = params;
+                newParamsName += tempStr;
               }
-              return newParamsName;
-            },
+            } else {
+              newParamsName = params;
+            }
+            return newParamsName;
           },
-          // data: xData.value,
         },
-        yAxis: [
-          {
-            type: 'value',
-            splitLine: {
-              lineStyle: {
-                color: 'rgba(21,80,126,.3)',
-                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
-              },
-              // show: item.linetype == 'line' ? true : false,
-              show: true,
+        // data: xData.value,
+      },
+      yAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(21,80,126,.3)',
+              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
             },
+            // show: item.linetype == 'line' ? true : false,
+            show: true,
           },
-        ],
+        },
+      ],
 
-        series: [
-          {
-            name: '测点异常数',
-            type: 'bar',
-            stack: 'Ad',
-            barMaxWidth: '24',
-            emphasis: {
-              focus: 'series',
-            },
-            itemStyle: {
-              color: '#F56731',
-            },
-            label: {
-              show: true,
-              formatter: (params) => (params.value > 0 ? params.value : ''),
-            },
-            data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
+      series: [
+        {
+          name: '测点异常数',
+          type: 'bar',
+          stack: 'Ad',
+          barMaxWidth: '24',
+          emphasis: {
+            focus: 'series',
+          },
+          itemStyle: {
+            color: '#F56731',
+          },
+          label: {
+            show: true,
+            formatter: (params) => (params.value > 0 ? params.value : ''),
+          },
+          data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
+        },
+        {
+          name: '测点正常数',
+          type: 'bar',
+          stack: 'Ad',
+          barMaxWidth: '24',
+          emphasis: {
+            focus: 'series',
+          },
+          itemStyle: {
+            color: '#00E8FFBB',
           },
-          {
-            name: '测点正常数',
-            type: 'bar',
-            stack: 'Ad',
-            barMaxWidth: '24',
-            emphasis: {
-              focus: 'series',
-            },
-            itemStyle: {
-              color: '#00E8FFBB',
-            },
 
-            label: {
-              show: true,
-              textStyle: {
-                //数值样式
-                color: '#000',
-              },
+          label: {
+            show: true,
+            textStyle: {
+              //数值样式
+              color: '#000',
             },
-            data: [5, 6, 5, 8, 8, 6, 8, 11, 6, 7, 4, 7, 7, 7],
           },
-          {
-            name: '',
-            type: 'bar',
-            // stack: 'Ad',
-            barGap: '-100%',
-            barMaxWidth: '24',
-            z: 1,
-            emphasis: {
-              focus: 'series',
-            },
-            itemStyle: {
-              color: '#00E8FF00',
-            },
-            tooltip: {
-              show: false,
-            },
-            label: {
-              show: true,
-              position: 'top', //在上方显示
-              textStyle: {
-                //数值样式
-                color: '#fff',
-                fontSize: 14,
-              },
+          data: [5, 6, 5, 8, 8, 6, 8, 11, 6, 7, 4, 7, 7, 7],
+        },
+        {
+          name: '',
+          type: 'bar',
+          // stack: 'Ad',
+          barGap: '-100%',
+          barMaxWidth: '24',
+          z: 1,
+          emphasis: {
+            focus: 'series',
+          },
+          itemStyle: {
+            color: '#00E8FF00',
+          },
+          tooltip: {
+            show: false,
+          },
+          label: {
+            show: true,
+            position: 'top', //在上方显示
+            textStyle: {
+              //数值样式
+              color: '#fff',
+              fontSize: 14,
             },
-            data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
+          data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    // 监听柱状图的点击事件
+    myChart.on('click', function (params) {
+      if (params.componentType === 'series') {
+        // alert('您点击的是第 ' + (params.dataIndex + 1) + ' 个柱子，其值为 ' + params.value);
+        router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=dusting')
+      }
     });
-  }
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  watch(
-    () => props.measureData,
-    (newV, oldV) => {
-      if (JSON.stringify(newV) != '{}') {
-        getOption();
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
+watch(
+  () => props.measureData,
+  (newV, oldV) => {
+    if (JSON.stringify(newV) != '{}') {
+      getOption();
     }
-  );
-  onMounted(() => {
-    getOption();
-  });
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+onMounted(() => {
+  getOption();
+});
 </script>
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.measure-point {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title {
+    position: absolute;
+    left: 50px;
+    top: 10px;
+    color: #fff;
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    font-size: 14px;
   }
 
-  .measure-point {
-    width: 100%;
+  .measure-content {
+    // width: 100%;
+    // position: relative;
     height: 100%;
-    position: relative;
+    padding: 42px 40px 15px 40px;
+    box-sizing: border-box;
 
-    .title {
-      position: absolute;
-      left: 50px;
-      top: 10px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 14px;
-    }
-
-    .measure-content {
-      // width: 100%;
-      // position: relative;
+    .echart-box {
+      // position: absolute;
+      width: 100%;
       height: 100%;
-      padding: 42px 40px 15px 40px;
-      box-sizing: border-box;
-      .echart-box {
-        // position: absolute;
+
+      .measure {
         width: 100%;
         height: 100%;
-        .measure {
-          width: 100%;
-          height: 100%;
-        }
       }
     }
   }
+}
 </style>