看板页echarts图表预留接口位置

src/utils/index.js

@@ -160,4 +160,46 @@ export function flexible(window, document) {
         }
         docEl.removeChild(fakeBody);
     }
+}
+
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+    let timeout, args, context, timestamp, result
+
+    const later = function() {
+        // 据上一次触发时间间隔
+        const last = +new Date() - timestamp
+
+        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+        if (last < wait && last > 0) {
+            timeout = setTimeout(later, wait - last)
+        } else {
+            timeout = null
+                // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+            if (!immediate) {
+                result = func.apply(context, args)
+                if (!timeout) context = args = null
+            }
+        }
+    }
+
+    return function(...args) {
+        context = this
+        timestamp = +new Date()
+        const callNow = immediate && !timeout
+            // 如果延时不存在，重新设定延时
+        if (!timeout) timeout = setTimeout(later, wait)
+        if (callNow) {
+            result = func.apply(context, args)
+            context = args = null
+        }
+
+        return result
+    }
 }

src/views/index/components/alarmStatic.vue

@@ -13,14 +13,14 @@
             <li>
                 <img src="@/assets/static2.png" alt="">
                 <div>
-                  <p class="static-num colorOverTime">185</p>
+                  <p class="static-num colorOverTime">168</p>
                   <p class="static-tit">已处置数</p>
                 </div>
             </li>
             <li>
                 <img src="@/assets/static3.png" alt="">
                 <div>
-                  <p class="static-num colorUnhandle">185</p>
+                  <p class="static-num colorUnhandle">17</p>
                   <p class="static-tit">未处置数</p>
                 </div>
             </li>

src/views/index/components/alarming.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="panel alarming">
     <div class="panel-tit">告警信息</div>
-   
+
     <table class="alarm-table">
       <thead>
         <tr>
@@ -14,7 +14,6 @@
     <div class="scroll">
       <table class="alarm-table">
         <tbody>
-         
           <tr>
             <td>1</td>
             <td class="online">2020-09-22 15:00:00</td>
@@ -43,7 +42,7 @@
         </tbody>
       </table>
     </div>
-     <div class="panel-footer"></div>
+    <div class="panel-footer"></div>
   </div>
 </template>
 <script>
@@ -55,44 +54,42 @@ export default {
 </script>
 <style lang="scss" scoped>
 .panel.alarming {
- margin-top:2rem;
+  margin-top: 2rem;
   z-index: 3;
-  box-sizing:border-box;
-  table{
-      padding:0 1rem;
-    
-        border-spacing: 0;
-    
+  box-sizing: border-box;
+  table {
+    padding: 0 1rem;
+
+    border-spacing: 0;
   }
 
   tr td,
   tr th {
     font-size: 1.4rem;
     line-height: 3.6rem;
-     text-align:left;
+    text-align: left;
     // padding: 0 1rem;
-    padding:0;
-    margin:0;
+    padding: 0;
+    margin: 0;
     // background:pink;
-    border-bottom:1px solid #1c5899;
-    border-left:0px solid red;
-    border-right:0px solid red;
-    border-top:0px solid red
-
+    border-bottom: 1px solid #1c5899;
+    border-left: 0px solid red;
+    border-right: 0px solid red;
+    border-top: 0px solid red;
   }
   .alarm-table tr td:first-child,
   .alarm-table tr th:first-child {
-    width:12%;
+    width: 12%;
   }
 
   .alarm-table tr td:nth-child(2),
   .alarm-table tr th:nth-child(2) {
-  width:60%;
+    width: 60%;
   }
 
   .alarm-table tr td:nth-child(3),
   .alarm-table tr th:nth-child(3) {
-     width: 100px;
+    width: 100px;
   }
 }
 </style>

src/views/index/components/barChart.vue

@@ -1,116 +1,160 @@
 <template>
-  <div id="main4" style="width: 100%; height: 100%"></div>
+  <div
+    ref="main"
+    :class="className"
+    :style="{ height: height, width: width }"
+  ></div>
 </template>
 <script>
 import echarts from "echarts";
+//require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
 export default {
-  name: "lineChart",
+  //自适应窗口大小改变图表大小
+  mixins: [resize],
+
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    yData: {
+      type: Array,
+      default: () => ["未处理数", "审核未通过", "超时完成", "已完成"],
+    },
+    yData2: {
+      type: Array,
+      default: () => [60, 180, 30, 260],
+    },
+    seriesData: {
+      type: Array,
+      default: () => [12, 36, 2, 50],
+    },
+    myColor: {
+      type: Array,
+      default: () => [12, 36, 2, 50],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
   mounted() {
-    this.showMain();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    showMain() {
-      // 基于准备好的dom，初始化echarts实例
-
-      var myChart = echarts.init(document.getElementById("main4"));
+    initChart() {
+      this.chart = echarts.init(this.$refs.main);
 
       var myColor = ["rgb(248, 72, 3)", "#FD7700", "#0BC3FF", "#01E416"];
 
-      var option = {
-    grid: {
-      top: "0%",
-      left: "25%",
-      bottom: "0%"
-      // containLabel: true
-    },
-    // 不显示x轴的相关信息
-    xAxis: {
-      show: false
-    },
-    yAxis: [
-      {
-        type: "category",
-        // inverse: true,
-        data: ["未处理数", "审核未通过", "超时完成", "已完成"],
-        // 不显示y轴的线
-        axisLine: {
-          show: false
+      this.chart.setOption({
+        grid: {
+          top: "0%",
+          left: "25%",
+          bottom: "0%",
+          // containLabel: true
         },
-        // 不显示刻度
-        axisTick: {
-          show: false
+        // 不显示x轴的相关信息
+        xAxis: {
+          show: false,
         },
-        // 把刻度标签里面的文字颜色设置为白色
-        axisLabel: {
-          color: "#fff"
-        }
-      },
-      {
-        data: [60, 180, 30, 260],
-        inverse: false,
-        // 不显示y轴的线
-        axisLine: {
-          show: false
-        },
-        // 不显示刻度
-        axisTick: {
-          show: false
-        },
-        // 把刻度标签里面的文字颜色设置为白色
-        axisLabel: {
-          color: "#fff"
-        }
-      }
-    ],
-    series: [
-      {
-        name: "条",
-        type: "bar",
-        data: [12, 36, 2, 50],
-        yAxisIndex: 0,
-        // 修改第一组柱子的圆角
-        itemStyle: {
-          
-          // 此时的color 可以修改柱子的颜色
-          color: function(params) {
-            // params 传进来的是柱子对象
-            // console.log(params);
-            // dataIndex 是当前柱子的索引号
-            return myColor[params.dataIndex];
-          }
-        },
-        // 柱子之间的距离
-        barCategoryGap: 50,
-        //柱子的宽度
-        barWidth: 10,
-        // 显示柱子内的文字
-        label: {
-          show: true,
-          position: "right",
-          // {c} 会自动的解析为 数据  data里面的数据
-          formatter: "{c}%"
-        }
-      },
-      {
-        name: "框",
-        type: "bar",
-        barCategoryGap: 50,
-        barWidth: 10,
-        yAxisIndex: 1,
-        data: [100, 100, 100, 100],
-        itemStyle: {
-          color: "none",
-          borderColor: "#00c1de",
-          borderWidth: 1,
-        }
-      }
-    ]
-  };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
+        yAxis: [
+          {
+            type: "category",
+            // inverse: true,
+            data: this.yData,
+            // 不显示y轴的线
+            axisLine: {
+              show: false,
+            },
+            // 不显示刻度
+            axisTick: {
+              show: false,
+            },
+            // 把刻度标签里面的文字颜色设置为白色
+            axisLabel: {
+              color: "#fff",
+            },
+          },
+          {
+            data: this.yData2,
+            inverse: false,
+            // 不显示y轴的线
+            axisLine: {
+              show: false,
+            },
+            // 不显示刻度
+            axisTick: {
+              show: false,
+            },
+            // 把刻度标签里面的文字颜色设置为白色
+            axisLabel: {
+              color: "#fff",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            data: this.seriesData,
+            yAxisIndex: 0,
+            // 修改第一组柱子的圆角
+            itemStyle: {
+              // 此时的color 可以修改柱子的颜色
+              color: function (params) {
+                // params 传进来的是柱子对象
+                // console.log(params);
+                // dataIndex 是当前柱子的索引号
+                return myColor[params.dataIndex];
+              },
+            },
+            // 柱子之间的距离
+            barCategoryGap: 50,
+            //柱子的宽度
+            barWidth: 10,
+            // 显示柱子内的文字
+            label: {
+              show: true,
+              position: "right",
+              // {c} 会自动的解析为 数据  data里面的数据
+              formatter: "{c}%",
+            },
+          },
+          {
+            name: "框",
+            type: "bar",
+            barCategoryGap: 50,
+            barWidth: 10,
+            yAxisIndex: 1,
+            data: [100, 100, 100, 100],
+            itemStyle: {
+              color: "none",
+              borderColor: "#00c1de",
+              borderWidth: 1,
+            },
+          },
+        ],
       });
     },
   },

src/views/index/components/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/views/index/components/pieAlarm.vue

@@ -1,24 +1,72 @@
 <template>
-  <div id="main3" style="width: 100%; height: 100%"></div>
+  <div
+    ref="main"
+    :class="className"
+    :style="{ height: height, width: width }"
+  ></div>
 </template>
 <script>
 import echarts from "echarts";
+import resize from "./mixins/resize";
 export default {
-  name: "pieAlarm",
+  //自适应窗口大小改变图表大小
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    totalData: {
+      type: Array,
+      default: () => [{ value: 530, name: "故障总数" }],
+    },
+    handleData: {
+      type: Array,
+      default: () => [
+        { value: 60, name: "未处理数" },
+        { value: 180, name: "审核未通过" },
+        { value: 30, name: "超时完成" },
+        { value: 260, name: "已完成数" },
+      ],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+
   mounted() {
-    this.showMain();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    showMain() {
+    initChart() {
       // 基于准备好的dom，初始化echarts实例
 
-      var myChart = echarts.init(document.getElementById("main3"));
+      this.chart = echarts.init(this.$refs.main);
       var color = ["#C8E4FF", "#0483FF", "#0483FF"];
 
       var per = "%";
 
       // 指定图表的配置项和数据
-      var option = {
+      this.chart.setOption({
         // color: [
         //   "rgb(248, 72, 3)",
         //   "rgb(254, 196, 0)",
@@ -35,15 +83,16 @@ export default {
             fontWeight: "normal",
           },
         },
-        // tooltip: {  //提示框
-        //   trigger: "item",
-        //   formatter: " {a} <br/>{b} : {c} ({d}%) ",
-        // },
+        tooltip: {
+          //提示框
+          trigger: "item",
+          formatter: "{b} : <br/>{c} ({d}%) ",
+        },
 
         series: [
           {
             type: "pie",
-            name: "故障处置数",
+            name: "故障总数",
 
             selectedMode: "single",
             radius: ["60%", "65%"], //aa 内圈大小
@@ -72,7 +121,7 @@ export default {
                 position: "center",
 
                 formatter: function (a) {
-                  return "{a|" + a.value + "}\n{b|故障总数}";
+                  return "{a|" + a.value + "}\n{b|" + a.name + "}";
                 },
                 rich: {
                   a: {
@@ -92,7 +141,7 @@ export default {
                 show: false,
               },
             },
-            data: [{ value: 530, name: "故障总数" }],
+            data: this.totalData,
           },
           {
             name: "故障处置数",
@@ -122,7 +171,7 @@ export default {
                       c2: "rgba(2,17,50,.8)",
                     },
                   ];
-                  return new echarts.graphic.LinearGradient(0, 0, 0,1, [
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                       //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
 
@@ -142,12 +191,7 @@ export default {
               show: false, //aa 去掉指示折线
             },
 
-            data: [
-              { value: 60, name: "未处理数" },
-              { value: 180, name: "审核未通过" },
-              { value: 30, name: "超时完成" },
-              { value: 260, name: "已完成数" },
-            ],
+            data: this.handleData,
           },
 
           {
@@ -184,12 +228,6 @@ export default {
             },
           },
         ],
-      };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
       });
     },
   },

src/views/index/components/pieCamera.vue

@@ -1,81 +1,109 @@
 <template>
-  <div id="main2" style="width: 100%; height: 100%"></div>
+  <div
+    ref="main"
+    :class="className"
+    :style="{ height: height, width: width }"
+  ></div>
 </template>
 <script>
 import echarts from "echarts";
+import resize from "./mixins/resize";
 export default {
-  name: "pieCamera",
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    perData: {
+      type: Array,
+      default: () => [ {
+        name: "摄像头",
+        value: [39],
+        // nAmount: 566557.14,
+      }],
+    },
+  },
+
+  data() {
+    return {
+      chart: null,
+    };
+  },
   mounted() {
-    this.showMain();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    showMain() {
+    initChart() {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById("main2"));
+      this.chart = echarts.init(this.$refs.main);
 
-      var data = {
-        name: "摄像头",
-        value: [39],
-        // nAmount: 566557.14,
-      };
 
       var color = ["#C8E4FF", "#0483FF", "#0483FF"];
 
-      var title=data.value[0];
-      var per="%"
+      var title = this.perData[0].value;
+      var per = "%";
 
       // 指定图表的配置项和数据
-      var option = {
-
-
+      this.chart.setOption({
         title: {
-          text: '{a|'+ title +'}{b|'+ per +'}',
+          text: "{a|" + title + "}{b|" + per + "}",
           textStyle: {
-            rich:{
-                a: {
-                    fontSize: 25,
-                    color: color[2],
-                    fontFamily: "impact",
-                },
-                b: {
-                    fontSize: 16,
-                    fontFamily: "impact",
-                     color: color[2],
-                },
-            }
+            rich: {
+              a: {
+                fontSize: 25,
+                color: color[2],
+                fontFamily: "impact",
+              },
+              b: {
+                fontSize: 16,
+                fontFamily: "impact",
+                color: color[2],
+              },
+            },
           },
-          subtext: '异常率',
+          subtext: "异常率",
           subtextStyle: {
-              color: '#fff',
-              fontSize:'12',
+            color: "#fff",
+            fontSize: "12",
           },
           itemGap: 3,
           left: "center",
-          top: "37%",    //aa圈内标题的位置
+          top: "37%", //aa圈内标题的位置
         },
-      
-        
+
         graphic: [
           {
             type: "text",
             z: 100,
             left: "center",
-            top: "90%",   // aa 底下标题w在容器里的位置
+            top: "90%", // aa 底下标题w在容器里的位置
             style: {
               fill: "#fff",
-              text: data.name,
-              // text: [
-              //     '横轴表示温度，单位是°C',
-              //     '纵轴表示高度，单位是km',
-              //     '右上角有一个图片做的水印',
-              //     '这个文本块可以放在图中各',
-              //     '种位置'
-              // ].join('\n'),
-              font: "1.6rem Microsoft YaHei",     // aa 底下标题字体大小
+              text: this.perData[0].name,
+              font: "1.6rem Microsoft YaHei", // aa 底下标题字体大小
             },
           },
         ],
-        tooltip: {    //aa 手指移入
+        tooltip: {
+          //aa 手指移入
           formatter: function (params) {
             return (
               '<span style="color: #fff;">占比：' + params.value + "%</span>"
@@ -91,7 +119,6 @@ export default {
           startAngle: 90,
         },
 
-
         radiusAxis: {
           type: "category",
           show: true,
@@ -106,8 +133,6 @@ export default {
           },
         },
 
-
-        
         polar: [
           {
             center: ["50%", "50%"], //中心点位置    aa填充圈的中心位置
@@ -119,7 +144,7 @@ export default {
             name: "小环",
             type: "gauge",
             splitNumber: 15,
-            radius: "75%",   //aa发散圈的大小
+            radius: "75%", //aa发散圈的大小
             center: ["50%", "50%"],
             startAngle: 0,
             endAngle: 359.9999,
@@ -130,12 +155,12 @@ export default {
               show: true,
               lineStyle: {
                 color: color[1],
-                width: 1,    // aa发散圈的粗细
+                width: 1, // aa发散圈的粗细
                 shadowBlur: 1,
                 shadowColor: color[1],
               },
-              length: 8,  // aa发散圈的长度
-              splitNumber: 5,  //aa发散圈每一条间隔
+              length: 8, // aa发散圈的长度
+              splitNumber: 5, //aa发散圈每一条间隔
             },
             splitLine: {
               show: false,
@@ -150,7 +175,7 @@ export default {
           {
             type: "bar",
             z: 10,
-            data: data.value,
+            data: this.perData[0].value,
             showBackground: false,
             backgroundStyle: {
               color: color[1],
@@ -159,7 +184,7 @@ export default {
             },
             coordinateSystem: "polar",
             // roundCap: true,   //aa填充圈圆角
-            barWidth: 7,    //aa填充圈宽度
+            barWidth: 7, //aa填充圈宽度
             itemStyle: {
               normal: {
                 opacity: 1,
@@ -181,8 +206,8 @@ export default {
           {
             type: "pie",
             name: "内层细圆环",
-            radius: ["50%", "52%"],   //aa内层细圆环
-             center: ["50%", "50%"],
+            radius: ["50%", "52%"], //aa内层细圆环
+            center: ["50%", "50%"],
             startAngle: 120,
             hoverAnimation: false,
             clockWise: true,
@@ -210,13 +235,7 @@ export default {
             data: [100],
           },
         ],
-      };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-    myChart.resize();
-  });
+      });
     },
   },
 };

src/views/index/components/pieSounder.vue

@@ -1,31 +1,69 @@
 <template>
-  <div id="main" style="width: 100%; height: 100%"></div>
+  <div ref="main"
+    :class="className"
+    :style="{ height: height, width: width }"></div>
 </template>
 <script>
 import echarts from "echarts";
+import resize from "./mixins/resize";
+
 export default {
-  name: "pieSounder",
+  //自适应窗口大小改变图表大小
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    perData: {
+      type: Array,
+      default: () => [ {
+        name: "红外探测器",
+        value: [50],
+      }],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
   mounted() {
-    this.showMain();
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    showMain() {
+   initChart() {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById("main"));
-
-      var data = {
-        name: "红外探测器",
-        value: [50],
-      };
+      this.chart = echarts.init(this.$refs.main);
+      
+    
 
       var color = ["#9AFFDE", "#00F9AA", "#00F9AA"];
 
-      var title = data.value[0];
+      var title = this.perData[0].value;
       var per = "%";
 
       // 指定图表的配置项和数据
-      var option = {
-        title: {
+      this.chart.setOption({
+
+         title: {
           // text: data.value[0] + "%",
           text: "{a|" + title + "}{b|" + per + "}",
           textStyle: {
@@ -60,7 +98,7 @@ export default {
             top: "90%", // aa 底下标题w在容器里的位置
             style: {
               fill: "#fff",
-              text: data.name,
+              text: this.perData[0].name,
               // text: [
               //     '横轴表示温度，单位是°C',
               //     '纵轴表示高度，单位是km',
@@ -145,7 +183,7 @@ export default {
           {
             type: "bar",
             z: 10,
-            data: data.value,
+            data: this.perData[0].value,
             showBackground: false,
             backgroundStyle: {
               color: color[1],
@@ -205,13 +243,9 @@ export default {
             data: [100],
           },
         ],
-      };
-
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
+        
+      })
+      
     },
   },
 };