修改冲突

src/common/echart/index.vue

@@ -1,66 +0,0 @@
-<template>
-  <div :id="id" :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import tdTheme from './theme.json' // 引入默认主题
-// import '../map/fujian.js'
-
-export default {
-  name: 'echart',
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '2.5rem'
-    },
-    options: {
-      type: Object,
-      default: ()=>({})
-    }
-  },
-  data () {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    options: {
-      handler (options) {
-        // 设置true清空echart缓存
-        this.chart.setOption(options, true)
-      },
-      deep: true
-    }
-  },
-  mounted () {
-    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
-    this.initChart();
-  },
-  beforeDestroy () {
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart () {
-      // 初始化echart
-      this.chart = this.$echarts.init(this.$el, 'tdTheme')
-      this.chart.setOption(this.options, true)
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/common/echart/theme.json

@@ -1,490 +0,0 @@
-{
-  "color": [
-    "#2d8cf0",
-    "#19be6b",
-    "#ff9900",
-    "#E46CBB",
-    "#9A66E4",
-    "#ed3f14"
-  ],
-  "backgroundColor": "rgba(0,0,0,0)",
-  "textStyle": {},
-  "title": {
-    "textStyle": {
-      "color": "#516b91"
-    },
-    "subtextStyle": {
-      "color": "#93b7e3"
-    }
-  },
-  "line": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": "2"
-      }
-    },
-    "lineStyle": {
-      "normal": {
-        "width": "2"
-      }
-    },
-    "symbolSize": "6",
-    "symbol": "emptyCircle",
-    "smooth": true
-  },
-  "radar": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": "2"
-      }
-    },
-    "lineStyle": {
-      "normal": {
-        "width": "2"
-      }
-    },
-    "symbolSize": "6",
-    "symbol": "emptyCircle",
-    "smooth": true
-  },
-  "bar": {
-    "itemStyle": {
-      "normal": {
-        "barBorderWidth": 0,
-        "barBorderColor": "#ccc"
-      },
-      "emphasis": {
-        "barBorderWidth": 0,
-        "barBorderColor": "#ccc"
-      }
-    }
-  },
-  "pie": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "scatter": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "boxplot": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "parallel": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "sankey": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "funnel": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "gauge": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      },
-      "emphasis": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    }
-  },
-  "candlestick": {
-    "itemStyle": {
-      "normal": {
-        "color": "#edafda",
-        "color0": "transparent",
-        "borderColor": "#d680bc",
-        "borderColor0": "#8fd3e8",
-        "borderWidth": "2"
-      }
-    }
-  },
-  "graph": {
-    "itemStyle": {
-      "normal": {
-        "borderWidth": 0,
-        "borderColor": "#ccc"
-      }
-    },
-    "lineStyle": {
-      "normal": {
-        "width": 1,
-        "color": "#aaa"
-      }
-    },
-    "symbolSize": "6",
-    "symbol": "emptyCircle",
-    "smooth": true,
-    "color": [
-      "#2d8cf0",
-      "#19be6b",
-      "#f5ae4a",
-      "#9189d5",
-      "#56cae2",
-      "#cbb0e3"
-    ],
-    "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#eee"
-        }
-      }
-    }
-  },
-  "map": {
-    "itemStyle": {
-      "normal": {
-        "areaColor": "#f3f3f3",
-        "borderColor": "#516b91",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "areaColor": "rgba(165,231,240,1)",
-        "borderColor": "#516b91",
-        "borderWidth": 1
-      }
-    },
-    "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#000"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "rgb(81,107,145)"
-        }
-      }
-    }
-  },
-  "geo": {
-    "itemStyle": {
-      "normal": {
-        "areaColor": "#f3f3f3",
-        "borderColor": "#516b91",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "areaColor": "rgba(165,231,240,1)",
-        "borderColor": "#516b91",
-        "borderWidth": 1
-      }
-    },
-    "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#000"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "rgb(81,107,145)"
-        }
-      }
-    }
-  },
-  "categoryAxis": {
-    "axisLine": {
-      "show": true,
-      "lineStyle": {
-        "color": "#cccccc"
-      }
-    },
-    "axisTick": {
-      "show": false,
-      "lineStyle": {
-        "color": "#333"
-      }
-    },
-    "axisLabel": {
-      "show": true,
-      "textStyle": {
-        "color": "#fff"
-      }
-    },
-    "splitLine": {
-      "show": false,
-      "lineStyle": {
-        "color": [
-          "#eeeeee"
-        ]
-      }
-    },
-    "splitArea": {
-      "show": false,
-      "areaStyle": {
-        "color": [
-          "rgba(250,250,250,0.05)",
-          "rgba(200,200,200,0.02)"
-        ]
-      }
-    }
-  },
-  "valueAxis": {
-    "axisLine": {
-      "show": true,
-      "lineStyle": {
-        "color": "#cccccc"
-      }
-    },
-    "axisTick": {
-      "show": false,
-      "lineStyle": {
-        "color": "#333"
-      }
-    },
-    "axisLabel": {
-      "show": true,
-      "textStyle": {
-        "color": "#fff"
-      }
-    },
-    "splitLine": {
-      "show": false,
-      "lineStyle": {
-        "color": [
-          "#eeeeee"
-        ]
-      }
-    },
-    "splitArea": {
-      "show": false,
-      "areaStyle": {
-        "color": [
-          "rgba(250,250,250,0.05)",
-          "rgba(200,200,200,0.02)"
-        ]
-      }
-    }
-  },
-  "logAxis": {
-    "axisLine": {
-      "show": true,
-      "lineStyle": {
-        "color": "#cccccc"
-      }
-    },
-    "axisTick": {
-      "show": false,
-      "lineStyle": {
-        "color": "#333"
-      }
-    },
-    "axisLabel": {
-      "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
-    },
-    "splitLine": {
-      "show": true,
-      "lineStyle": {
-        "color": [
-          "#eeeeee"
-        ]
-      }
-    },
-    "splitArea": {
-      "show": false,
-      "areaStyle": {
-        "color": [
-          "rgba(250,250,250,0.05)",
-          "rgba(200,200,200,0.02)"
-        ]
-      }
-    }
-  },
-  "timeAxis": {
-    "axisLine": {
-      "show": true,
-      "lineStyle": {
-        "color": "#cccccc"
-      }
-    },
-    "axisTick": {
-      "show": false,
-      "lineStyle": {
-        "color": "#333"
-      }
-    },
-    "axisLabel": {
-      "show": true,
-      "textStyle": {
-        "color": "#999999"
-      }
-    },
-    "splitLine": {
-      "show": true,
-      "lineStyle": {
-        "color": [
-          "#eeeeee"
-        ]
-      }
-    },
-    "splitArea": {
-      "show": false,
-      "areaStyle": {
-        "color": [
-          "rgba(250,250,250,0.05)",
-          "rgba(200,200,200,0.02)"
-        ]
-      }
-    }
-  },
-  "toolbox": {
-    "iconStyle": {
-      "normal": {
-        "borderColor": "#999"
-      },
-      "emphasis": {
-        "borderColor": "#666"
-      }
-    }
-  },
-  "legend": {
-    "textStyle": {
-      "color": "#fff"
-    }
-  },
-  "tooltip": {
-    "axisPointer": {
-      "lineStyle": {
-        "color": "#ccc",
-        "width": 1
-      },
-      "crossStyle": {
-        "color": "#ccc",
-        "width": 1
-      }
-    }
-  },
-  "timeline": {
-    "lineStyle": {
-      "color": "#8fd3e8",
-      "width": 1
-    },
-    "itemStyle": {
-      "normal": {
-        "color": "#8fd3e8",
-        "borderWidth": 1
-      },
-      "emphasis": {
-        "color": "#8fd3e8"
-      }
-    },
-    "controlStyle": {
-      "normal": {
-        "color": "#8fd3e8",
-        "borderColor": "#8fd3e8",
-        "borderWidth": 0.5
-      },
-      "emphasis": {
-        "color": "#8fd3e8",
-        "borderColor": "#8fd3e8",
-        "borderWidth": 0.5
-      }
-    },
-    "checkpointStyle": {
-      "color": "#8fd3e8",
-      "borderColor": "rgba(138,124,168,0.37)"
-    },
-    "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#8fd3e8"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#8fd3e8"
-        }
-      }
-    }
-  },
-  "visualMap": {
-    "color": [
-      "#516b91",
-      "#59c4e6",
-      "#a5e7f0"
-    ]
-  },
-  "dataZoom": {
-    "backgroundColor": "rgba(0,0,0,0)",
-    "dataBackgroundColor": "rgba(255,255,255,0.3)",
-    "fillerColor": "rgba(167,183,204,0.4)",
-    "handleColor": "#a7b7cc",
-    "handleSize": "100%",
-    "textStyle": {
-      "color": "#333"
-    }
-  },
-  "markPoint": {
-    "label": {
-      "normal": {
-        "textStyle": {
-          "color": "#eee"
-        }
-      },
-      "emphasis": {
-        "textStyle": {
-          "color": "#eee"
-        }
-      }
-    }
-  }
-}

src/common/pieChart.vue

@@ -0,0 +1,363 @@
+<template>
+  <div :id="id" :style="{ width: size, height: size }"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // chart对象
+      chart: null,
+      option: {
+        // backgroundColor: "none;",
+        title: {
+          text:
+            "{a|" + this.value.toFixed(2) + "%" + "}\n{c|" + this.title + "}",
+          // text: "{a|" + this.value + "}\n{c|'+ this.title +'}",
+          x: "center",
+          y: "center",
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 18,
+                color: "#29EEF3",
+              },
+
+              c: {
+                fontSize: 15,
+                color: "#29EEF3",
+                // padding: [5,0]
+              },
+            },
+          },
+        },
+        legend: {
+          type: "plain",
+          orient: "vertical",
+          right: 0,
+          top: "10%",
+          align: "auto",
+          data: [
+            {
+              name: "涨价后没吃过",
+              icon: "circle",
+            },
+            {
+              name: "天天吃",
+              icon: "circle",
+            },
+            {
+              name: "三五天吃一次",
+              icon: "circle",
+            },
+            {
+              name: "半个月吃一次",
+              icon: "circle",
+            },
+          ],
+          textStyle: {
+            color: "white",
+            fontSize: 16,
+            padding: [10, 1, 10, 0],
+          },
+          selectedMode: false,
+        },
+        series: [
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((0 + this.angle) * Math.PI) / 180,
+                  endAngle: ((90 + this.angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((180 + this.angle) * Math.PI) / 180,
+                  endAngle: ((270 + this.angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((270 + -this.angle) * Math.PI) / 180,
+                  endAngle: ((40 + -this.angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((90 + -this.angle) * Math.PI) / 180,
+                  endAngle: ((220 + -this.angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
+              let point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 2,
+                },
+                style: {
+                  stroke: "#0CD3DB", //粉
+                  fill: "#0CD3DB",
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "ring5", //绿点
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
+              let point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 2,
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB",
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          {
+            name: "吃猪肉频率",
+            type: "pie",
+            radius: ["58%", "45%"],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            data: [
+              {
+                value: this.value,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#4FADFD", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#28E8FA", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: 100 - this.value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "",
+            type: "gauge",
+            radius: "58%",
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9,
+            splitNumber: 8,
+            hoverAnimation: true,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              length: 60,
+              lineStyle: {
+                width: 2,
+                color: "#061740",
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0,
+              },
+            },
+            detail: {
+              show: false,
+            },
+            data: [
+              {
+                value: 0,
+                name: "",
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  props: {
+    // 角度，用来做简单的动画效果的
+    angle: {
+      type: Number, //类型
+      // required: true, //必要性
+      default: 0, //默认值
+    },
+    value: {
+      type: Number,
+      required: true, //必要性
+      default: 0, //默认值
+    },
+    title: {
+      type: String,
+    },
+    size: {
+      type: String,
+      // required: true, //必要性
+      default: "150px", //默认值
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    console.log("angle", this.angle);
+    this.chart = this.$echarts.init(document.getElementById(this.id));
+    this.chart.setOption(this.option);
+    // 动画效果
+    this.interval = setInterval(() => {
+      this.draw();
+    }, 100);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(this.interval);
+    });
+  },
+  methods: {
+    getCirlPoint(x0, y0, r, temp) {
+      let x1 = x0 + r * Math.cos((temp * Math.PI) / 180);
+      let y1 = y0 + r * Math.sin((temp * Math.PI) / 180);
+      return {
+        x: x1,
+        y: y1,
+      };
+    },
+    draw() {
+      this.angle = this.angle + 3;
+      this.chart.setOption(this.option, true);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/process_monitoring/WarningInfo.vue

@@ -63,11 +63,14 @@ export default {
   },
   mounted() {
     // this.init();
-    setInterval(() => {
+    this.interval = setInterval(() => {
       this.infoList.forEach((item) => {
         item.info = Math.round(Math.random()) ? "1" : "0";
-      })
+      });
     }, 1000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(this.interval);
+    });
   },
   methods: {
     initWebSocket() {

src/views/monitor/configImg/configImg.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="detail">
-    <el-select
-      style="margin-top: 10px"
-      v-model="currentChartId"
-      placeholder="请选择"
-      @change="selectParm"
-    >
+    <h2>监控区域</h2>
+    <el-select style="margin-top: 10px" v-model="area" @change="selectArea">
       <el-option
-        v-for="item in parmOptions"
-        :key="item.id + ''"
+        v-for="item in areaOptions"
+        :key="item.id"
         :label="item.label"
         :value="item.id"
       >
@@ -46,25 +42,27 @@ import detailedTable from "@/components/monitor/detailedTable";
 import left from "@/components/monitor/left";
 import rightTable1 from "@/components/monitor/rightTable1";
 import rate from "@/components/monitor/rate";
+import safetyAssess from '@/views/monitor/configImg/safetyAssess'
 export default {
   data() {
     return {
-      parmOptions: [
+      area: "原煤仓二次分站",
+      areaOptions: [
         {
           id: 1,
-          label: "负荷",
+          label: "原煤仓二次分站",
         },
         {
           id: 2,
-          label: "电压",
+          label: "原煤仓三次分站",
         },
         {
           id: 3,
-          label: "电流",
+          label: "原煤仓四次分站",
         },
         {
           id: 4,
-          label: "功率因数",
+          label: "原煤仓五次分站",
         },
       ],
     };
@@ -75,8 +73,13 @@ export default {
     left,
     rightTable1,
     rate,
+    safetyAssess
+  },
+  methods: {
+    selectArea(val) {
+      console.log(123);
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -92,14 +95,26 @@ export default {
     #06133c 100%
   );
 }
+.detail h2 {
+  /* color: #F3DB5C;  */
+  margin-left: 40px;
+  color: #4adefe;
+  display: inline;
+}
 .detail .el-select {
-  width: 100px;
+  width: 200px;
   margin-left: 10px;
 }
 .detail >>> .el-input--small .el-input__inner {
+  color: #f3db5c;
+  font-size: 20px;
   background: none;
 }
 .detail >>> .el-input__inner {
   border: 0;
 }
+.middle {
+  width: 500px;
+  height: 500px;
+}
 </style>

src/views/monitor/configImg/safetyAssess.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h2>总体安全评价</h2>
+    <el-row :gutter="20">
+      <el-col :span="8"
+        ><div class="grid-content bg-purple">
+          <pieChart id="pieChart1" :value="85" title="灾害评分" /></div
+      ></el-col>
+      <el-col :span="8"
+        ><div class="grid-content bg-purple">
+          <pieChart id="pieChart2" :value="90" title="设备评分" /></div
+      ></el-col>
+      <el-col :span="8"
+        ><div class="grid-content bg-purple">
+          <pieChart id="pieChart3" :value="95" title="人员评分" /></div
+      ></el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import pieChart from "@/common/pieChart";
+export default {
+  components: {
+    pieChart,
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  text-align: center;
+  color: #4adefe;
+}
+</style>