From 428b83582c37c061f4b6d82c7dd02b0731583cc5 Mon Sep 17 00:00:00 2001
From: zyx <2134208960@qq.com>
Date: Wed, 9 Mar 2022 18:12:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=8A=A5=E8=AD=A6=E6=AC=A1?=
 =?UTF-8?q?=E6=95=B0=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css                      |   2 +-
 .../ChartsComponents/AlarmCounts.vue          | 456 ++++++++++++++++++
 src/views/MainPage.vue                        |  25 +-
 3 files changed, 460 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ChartsComponents/AlarmCounts.vue

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index c18cdb8..6e22272 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -12,7 +12,7 @@ body {
   width: 1920px;
   height: 1080px;
   background: rgba(0, 0, 0, 1)
-    url(../images/c40d4615-3d52-42cf-87b6-ae06d15df385.png) no-repeat;
+  url(../images/c40d4615-3d52-42cf-87b6-ae06d15df385.png) no-repeat;
   background-size: cover;
   overflow-x: hidden;
   transform-origin: 0px 0px;
diff --git a/src/components/ChartsComponents/AlarmCounts.vue b/src/components/ChartsComponents/AlarmCounts.vue
new file mode 100644
index 0000000..8b247dd
--- /dev/null
+++ b/src/components/ChartsComponents/AlarmCounts.vue
@@ -0,0 +1,456 @@
+<template>
+<!-- 左上角组件 -->
+  <div class="topLeft" ref="chart" id="itembefc5240-7904-11ec-a3e6-b9940a698494">
+  </div>
+</template>
+
+<script>
+import utils from "@/assets/js/utils";
+import * as echarts from "echarts";
+
+export default {
+  name: "AlarmCounts",
+  props: {
+    name: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      chartsOption: {
+        backgroundImage: 'http://121.43.130.206:82/0caa5a40-9360-4dec-84c8-26a4ddab2db6.png',
+        chartsTitle: {
+          text: '设备报警次数',
+          option: {
+              color: [],
+              textColor: "#ffffff",
+              fontSize: 32,
+              key: "H3",
+              fontStyle: "normal",
+              textAlign: "center",
+              lineHeight: 1,
+              justifyContent: "center",
+              alignItems: "center",
+              textShadow: {
+                show: false,
+                x: 0,
+                y: 0,
+                value: 14,
+                color: "rgba(15, 146, 255,1)",
+              }
+          }
+        },
+        chartsData: [
+            { time: "设备一", value: 90, name: "系列二" },
+            { time: "设备二", value: 60, name: "系列二" },
+            { time: "设备三", value: 120, name: "系列二" },
+            { time: "设备四", value: 10, name: "系列二" },
+            { time: "设备五", value: 30, name: "系列二" },
+        ],
+        option: {
+          baseOption: {
+            grid: { top: 15, left: 15, right: 15, bottom: 15, containLabel: true },
+            tooltip: {
+              show: false,
+              trigger: "item",
+              animation: true,
+              alwaysShowContent: false,
+              triggerOn: "mousemove",
+              confine: false,
+              borderColor: "#333",
+              borderWidth: 2,
+              padding: 10,
+              backgroundColor: "rgba(50,50,50,0.7)",
+              axisPointer: {
+                type: "line",
+                lineStyle: {
+                  color: "#555",
+                  width: 1,
+                  type: "dashed",
+                  cap: "butt",
+                  opacity: 1,
+                },
+                crossStyle: {
+                  color: "#555",
+                  width: 1,
+                  type: "dashed",
+                  cap: "butt",
+                  opacity: 1,
+                },
+                shadowStyle: { color: "rgba(150,150,150,0.3)", opacity: 1 },
+              },
+              textStyle: { color: "#fff", fontWeight: "normal", fontSize: 14 },
+              formatter: null,
+            },
+            title: {
+              text: "设备报警数TOP5",
+              show: false,
+              link: "http://weitu.yunzhisec.com",
+              target: "blank",
+              textStyle: {
+                color: "#fff",
+                fontStyle: "normal",
+                fontWeight: "normal",
+                fontSize: 14,
+                lineHeight: 46,
+                textBorderColor: "",
+                textBorderWidth: 1,
+                textBorderType: "solid",
+                textBorderDashOffset: 1,
+                textShadowColor: "transparent",
+                textShadowBlur: 1,
+                textShadowOffsetX: 1,
+                textShadowOffsetY: 1,
+                overflow: "none",
+              },
+              padding: 1,
+              itemGap: 10,
+              z: 10,
+              left: "auto",
+              top: "-6%",
+              right: "auto",
+              bottom: "auto",
+              backgroundColor: "transparent",
+              borderColor: "",
+              borderWidth: "",
+              borderRadius: 1,
+              shadowBlur: 0,
+              shadowColor: "",
+              shadowOffsetX: "",
+              shadowOffsetY: "",
+              subtext: "",
+              sublink: "",
+              subtarget: "blank",
+              subtextStyle: {
+                color: "#ffffff",
+                fontStyle: "normal",
+                fontWeight: "normal",
+                fontSize: 12,
+                lineHeight: 0,
+                textBorderColor: "",
+                textBorderWidth: 0,
+                textBorderType: "solid",
+                textBorderDashOffset: 0,
+                textShadowColor: "transparent",
+                textShadowBlur: 0,
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 0,
+                overflow: "none",
+              },
+            },
+            legend: {
+              show: false,
+              top: "top",
+              left: "center",
+              orient: "horizontal",
+              itemWidth: 8,
+              itemHeight: 8,
+              itemGap: 10,
+              icon: "rect",
+              textStyle: { color: "#ffffff", fontSize: 12, lineHeight: 14 },
+            },
+            xAxis: {
+              show: false,
+              axisLabel: {
+                margin: 8,
+                show: false,
+                color: "#ffffff",
+                fontSize: 19,
+                height: "14px",
+              },
+              axisLine: {
+                show: true,
+                lineStyle: { color: "#27292d", type: "solid", width: 1 },
+              },
+              axisTick: {
+                show: false,
+                lineStyle: { color: "#27292d", type: "solid", width: 1 },
+              },
+              splitLine: {
+                show: false,
+                lineStyle: { color: "#27292d", type: "dashed", width: 1 },
+              },
+              data: [],
+              type: "value",
+            },
+            yAxis: [
+              {
+                type: "category",
+                show: true,
+                inverse: true,
+                axisLabel: {
+                  margin: 8,
+                  show: true,
+                  color: "#ffffff",
+                  fontSize: 18,
+                  verticalAlign: "middle",
+                },
+                axisLine: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "solid", width: 1 },
+                },
+                axisTick: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "solid", width: 1 },
+                },
+                splitLine: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "dashed", width: 1 },
+                },
+                data: [],
+              },
+              {
+                type: "category",
+                show: true,
+                inverse: true,
+                axisLabel: {
+                  margin: 20,
+                  show: true,
+                  color: "#ffffff",
+                  fontSize: 14,
+                },
+                axisLine: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "solid", width: 1 },
+                },
+                axisTick: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "solid", width: 1 },
+                },
+                splitLine: {
+                  show: false,
+                  lineStyle: { color: "#27292d", type: "dashed", width: 1 },
+                },
+                data: [],
+                position: "right",
+              },
+            ],
+            color: [
+              "rgba(31,83,255,1)",
+              "rgba(99,213,103,1)",
+              "rgba(144,202,249,1)",
+              "rgba(255,213,79,1)",
+            ],
+            series: [],
+          },
+          seriesStyle: {
+            showBackground: true,
+            backgroundStyle: { color: "rgba(98,105,111,1)", opacity: 1 },
+            itemStyle: {
+              shadowBlur: 0,
+              shadowColor: "#5c1717",
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              borderRadius: [0, 10, 10, 0],
+              borderColor: "#292929",
+              borderWidth: 0,
+              borderType: "dotted",
+            },
+            label: { show: false, position: "right", color: "#fff", fontSize: 12 },
+            barWidth: 10,
+            z: 1,
+          },
+        }
+      },
+    }
+  },
+  mounted() {
+    this.initElement()
+  },
+  methods: {
+    initElement() {
+      let chartPanel = this.$refs.chart
+      /* 这是存放title的div */
+      let titleNode = document.createElement('div')
+      titleNode.setAttribute('class', this.name + 'Title')
+      titleNode.id = 'item423cce60-7918-11ec-984c-d7441fe9086e'
+      chartPanel.appendChild(titleNode)
+      // 设置tileNode的样式
+      titleNode = this.setTitleNodeStyle(titleNode)
+      titleNode.innerHTML = null
+      // 获取存放要放进title盒子里的元素
+      let titleNodeChild = document.createElement(this.chartsOption.chartsTitle.option.key)
+      titleNodeChild.innerText = this.chartsOption.chartsTitle.text
+      titleNode.appendChild(titleNodeChild)
+
+      /* 这是存放 图表的div */
+      let chartNode = document.createElement('div')
+      chartNode.setAttribute('class', this.name + 'Chart')
+      chartNode.id = 'item46faf3b0-790d-11ec-984c-d7441fe9086e'
+      chartPanel.appendChild(chartNode)
+      chartNode.style.width = '90%'
+      chartNode.style.height = '75%'
+      this.initChart(this.chartsOption.chartsData, chartNode)
+
+      let temp = document.createElement('div')
+      chartPanel.appendChild(temp)
+      temp.style.position = 'relative'
+
+      let backgroundNode = document.createElement('div')
+      backgroundNode.id = 'itembefc5240-7904-11ec-a3e6-b9940a698494'
+      backgroundNode.setAttribute('class', this.name + 'Background')
+      chartPanel.appendChild(backgroundNode)
+      let backgroundImage = document.createElement('img')
+      backgroundImage.src = this.chartsOption.backgroundImage
+      backgroundImage.style.height = '100%'
+      backgroundImage.style.width = '100%'
+      backgroundNode.appendChild(backgroundImage)
+    },
+    // 设置titleNode的样式
+    setTitleNodeStyle(titleNode) {
+      let option = this.chartsOption.chartsTitle.option
+      titleNode.style.color = option.textColor
+      titleNode.style.display = "flex"
+      titleNode.style.justifyContent = option.justifyContent
+      titleNode.style.alignItems = "center"
+      titleNode.style.textAlign =  option.textAlign
+      let textShadow = option.textShadow.show
+          ? {
+            textShadow: `${ option.textShadow.x }px ${ option.textShadow.y}px ${ option.textShadow.value}px ${ option.textShadow.color}`,
+          }
+          : {}
+      titleNode.style.textShadow = textShadow.textShadow
+      titleNode.style.fontStyle = option.fontStyle
+      return titleNode
+    },
+    // 初始化initChart节点
+    initChart(data, chartNode) {
+      let myChart
+      if(chartNode != null) {
+        myChart = echarts.init(chartNode)
+      } else {
+        myChart = echarts.init(document.getElementsByClassName(this.name + 'Chart'))
+      }
+      let option = this.chartsOption.option.baseOption
+      let seriesStyle = this.chartsOption.option.seriesStyle
+      //数据处理 开始
+      let xKey = "value"
+      let yKey = "time"
+      let sKey = "name"
+      let dataSeries = []
+      let seriesArr = []
+      let dataColumn = []
+      const colorList = option.color
+      data.forEach((item) => seriesArr.push(item[sKey]))
+      seriesArr = [...new Set(seriesArr)]
+      if (xKey && xKey) {
+        data.forEach((item) => dataColumn.push(item[yKey]))
+        dataColumn = [...new Set(dataColumn)]
+        seriesArr.forEach((item) => {
+          let data1 = []
+          data.forEach((oitem) => {
+            if (oitem[sKey] === item) {
+              data1.push({
+                name: oitem[yKey],
+                value: oitem[xKey],
+              })
+            }
+          })
+          dataSeries.unshift({
+            name: item,
+            data: data1,
+            type: "bar",
+          })
+        })
+      }
+      let seriesObj = dataSeries.map((item) => {
+        if (item.useSeriesStyle != false) {
+          return (item = _.merge(item, seriesStyle, {
+            itemStyle: {
+              color: (params) => {
+                if (params.dataIndex < 3) {
+                  return option.color[params.dataIndex]
+                } else {
+                  return option.color[3]
+                }
+              },
+            },
+          }))
+        } else {
+          return (item = item)
+        }
+      })
+      let arr1 = [],
+          arr2 = []
+      seriesObj[0].data.sort((a, b) => {
+        return b.value - a.value
+      })
+      seriesObj[0].data.forEach((item) => {
+        arr1.push(item.name)
+        arr2.push(item.value)
+      })
+      option.yAxis[0].data = arr1
+      option.yAxis[1].data = arr2
+      option.yAxis[0].axisLabel.formatter = function (value, index) {
+        if (index < 3) {
+          return "{idx" + index + "|" + (1 + index) + "} {title|" + value + "}"
+        } else {
+          return "{idx|" + (1 + index) + "} {title|" + value + "}"
+        }
+      }
+      option.yAxis[0].axisLabel.margin = 14
+      option.yAxis[0].axisLabel.rich = {
+        idx0: {
+          align: "center",
+          padding: [2, 5],
+          color: "#22252C",
+          borderRadius: 50,
+          verticalAlign: "middle",
+          backgroundColor: "#5158fa",
+        },
+        idx1: {
+          align: "center",
+          padding: [2, 5],
+          color: "#22252C",
+          lineHeight: 310000,
+          borderRadius: 50,
+          verticalAlign: "middle",
+          backgroundColor: "#00ce9a",
+        },
+        idx2: {
+          padding: [2, 5],
+          color: "#22252C",
+          borderRadius: 50,
+          verticalAlign: "middle",
+          backgroundColor: "#21bbf9",
+        },
+        idx: {
+          color: "#fff",
+          padding: [2, 5],
+          verticalAlign: "middle",
+        },
+        title: {
+          padding: [5, 0, 1],
+          fontSize: option.yAxis[0].axisLabel.fontSize,
+        },
+      }
+      if (seriesObj.length) {
+        let dataArr = seriesObj[0].data
+        let copyArray = utils.deepCopy(dataArr)
+        let maxNumber = copyArray[0].value
+        let arr = []
+        copyArray.forEach((item) => {
+          arr.push({
+            name: item.name,
+            value: item.value,
+          })
+        })
+        if (seriesObj.length) {
+          seriesObj[seriesObj.length - 1].data = arr
+        }
+      }
+      // 数据处理完
+      option.series = seriesObj
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .alarmCountsBackground {
+  }
+</style>
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 71b3a6e..efb75da 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -433,28 +433,7 @@
     <!-- -------中上图表-----报警率图表-----  结束-->
 
     <!-- 左上图表----设备报警次数TOP5  开始-->
-    <div id="itemb716ec90-7920-11ec-984c-d7441fe9086e">
-      <!-- 组件423cce60-7918-11ec-984c-d7441fe9086e开始-->
-
-      <div id="item423cce60-7918-11ec-984c-d7441fe9086e" />
-      <!-- 组件423cce60-7918-11ec-984c-d7441fe9086e结束-->
-
-      <!-- 组件46faf3b0-790d-11ec-984c-d7441fe9086e开始-->
-
-      <div id="item46faf3b0-790d-11ec-984c-d7441fe9086e" />
-      <!-- 组件46faf3b0-790d-11ec-984c-d7441fe9086e结束-->
-
-      <!-- 组件befc5240-7904-11ec-a3e6-b9940a698494开始-->
-
-      <div id="itembefc5240-7904-11ec-a3e6-b9940a698494">
-        <img
-          src="@/assets/images/3cee410c-eeff-49df-8fc7-6c6ed7c194f8.png"
-          alt=""
-          :style="{ width: '100%', height: '100%' }"
-        >
-      </div>
-      <!-- 组件befc5240-7904-11ec-a3e6-b9940a698494结束-->
-    </div>
+    <AlarmCounts name="alarmCounts" style="position: absolute; left: 27px; top: 158px"/>
     <!-- 左一图表----设备报警次数TOP5   结束-->
 
     <!-- 左下图表---报警次数周分析开始-->
@@ -806,8 +785,10 @@ import 'dayjs/locale/zh-cn'
 import utils from '../assets/js/utils.js'
 import CenterTopChartsComponets from '@/components/ChartsComponents/CenterTopChartsComponets'
 import RightChart from '@/components/ChartsComponents/RightCharts'
+import AlarmCounts from "@/components/ChartsComponents/AlarmCounts";
 export default {
   components: {
+    AlarmCounts,
     RightChart,
     // swiper,
     // swiperSlide,
-- 
Gitee