完成大屏数据展示

zhangzengfei

2022-08-17 8516128b0764983f996e81e4c057502264c48f84

完成大屏数据展示

 public/images/data-v/line.png

 public/images/н¨Îı¾Îĵµ.txt

 src/views/dataView/index.vue

@@ -7,26 +7,50 @@
        <img class="jzxz2" src="/images/data-v/jzxz2.png" />
      </div>
    </div>
    <div class="head_top"><span>智慧工厂可视化驾驶舱</span></div>
    <div class="head_top">
      <div class="time">{{ timeStr }}</div>
      <span>智慧工厂可视化驾驶舱</span>
    </div>
    <div class="visual">
      <div class="left-top10">
        <div class="title">
          <span>部门告警数量 TOP10</span>
        </div>

        <div class="top10-list" v-for="(v, idx) in top10" :key="idx">
          <div class="list-0">{{ idx + 1 }}</div>
          <div class="list-1">{{ v.name }}</div>
          <div class="list-2">{{ v.totalWarn }}</div>
          <img class="list-img" src="/images/data-v/line.png" alt="" />
        </div>
      </div>
      <div class="center">
        <div class="center-left">
          <div class="center-count">
            <b>219</b>
            <p style="margin-top:2px">当前监测点总量</p>
            <p style="margin-top:35px">场景总量: 800</p>
            <p style="margin-top:5px">算法总量: 11</p>
            <b style="font-size: 40px;">{{ warnTotal }}</b>
            <p style="margin-top:2px">7日内预警总量</p>
            <p style="margin-top:35px">设备总量: 974</p>
            <p style="margin-top:5px">监测点总量: {{ cameraTotal }}</p>
          </div>
        </div>
        <div class="center-right">
          <div class="chart">
            <el-progress :stroke-width="15" type="circle" :percentage="checkRate"></el-progress>
          </div>
          <span>周</span><span>排查率</span>
          <div class="chart">
            <el-progress :stroke-width="15" type="circle" :percentage="solveRate"></el-progress>
          </div>
          <span>周</span><span>整改率</span>
          <div class="chart">
            <el-progress :stroke-width="15" type="circle" :percentage="manageRate"></el-progress>
          </div>
          <span>周</span><span>处理率</span>
        </div>
      </div>
      <div class="right-week">
        <div class="title">
          <span>近7日整改数量统计</span>
          <span>近7日排查数量统计</span>
        </div>
        <div id="barChart" style="width: 100%;height:100%"></div>
      </div>
@@ -74,44 +98,49 @@

<script>
import * as echarts from "echarts"
import * as Base64 from "js-base64"
import { analysisReport } from "@/api/es"
import { getLocalCameraTree } from "@/api/area"
import { getClusterDevList } from "@/api/clusterManage"

export default {
  components: {},
  computed: {
    solvedPre() {
      if (this.solvedTotal == 0 || this.tableDataList.length == 0) {
        return 0
      }
      return parseInt(this.solvedTotal / this.tableDataList.length)
    },
    warningManage() {
      if (this.warningChecked == 0 || this.warningTotal == 0) {
        return 0
      }
      return parseInt(this.warningChecked / this.warningTotal) * 100
    }
  },
  data() {
    return {
      timeStr: "",
      cameraTree: [],
      warnTotal: 0,
      cameraTotal: 0,
      cameras: {}, // è®°å½•æ‘„像机属于的部门
      orgs: {}, // è®°å½•æœ‰æ‘„像机的部门
      checkRate: 0,
      solveRate: 0,
      manageRate: 0,
      searchTime: [
        this.$moment()
          .subtract(6, "days")
          .format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      loading: false,
      lineChart: {},
      pieChart: {},
      barChart: {},
      top10: [
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        }
      ],
      top10: [],
      lineChartOption: {
        grid: {
          left: "3%",
@@ -134,7 +163,7 @@
            show: false
          },
          axisLabel: {
            color: "#666"
            color: "#e3f0fd"
          },
          data: ["1", "2", "3", "4", "5", "6", "7"]
        },
@@ -147,7 +176,7 @@
            show: false
          },
          axisLabel: {
            color: "#666"
            color: "#e3f0fd"
          },
          splitLine: {
            //网格线
@@ -207,9 +236,10 @@
      },
      barChartOption: {
        grid: {
          top: "10%",
          left: "10%",
          right: "20%",
          bottom: "20%",
          right: "10%",
          // bottom: "0%"
          containLabel: true
        },
        legend: {
@@ -227,9 +257,9 @@
            show: false
          },
          axisLabel: {
            color: "#666"
            color: "#e3f0fd"
          },
          data: ["烟雾", "明火", "离岗", "聚集"]
          data: []
        },
        yAxis: {
          axisTick: {
@@ -240,7 +270,8 @@
            show: false
          },
          axisLabel: {
            color: "#666"
            color: "#e3f0fd",
            show: false
          },
          splitLine: {
            //网格线
@@ -256,7 +287,7 @@
        series: [
          {
            type: "bar",
            data: [55, 33, 22, 33],
            data: [],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
@@ -304,7 +335,10 @@
        },
        legend: {
          top: "70%",
          bottom: "center"
          bottom: "center",
          textStyle: {
            color: "#e3f0fd"
          }
        },
        color: [
          "rgb(54, 60, 231)",
@@ -316,7 +350,7 @@
        ],
        series: [
          {
            name: "Nightingale Chart",
            name: "",
            type: "pie",
            radius: [60, 80],
            center: ["50%", "40%"],
@@ -339,6 +373,7 @@
    }
  },
  mounted() {
    this.timer()
    setTimeout(() => {
      this.loading = false
    }, 3000)
@@ -348,31 +383,278 @@
      this.initPieChart()
      this.initBarChart()
    })

    this.searchHandler()
    this.getCameras()
  },
  methods: {
    timer() {
      let now = new Date()
      let year = now.getFullYear()
      let month = now.getMonth() + 1
      let date = now.getDate()
      var hour = now.getHours()
      let min = now.getMinutes()

      this.timeStr = hour + ":" + min + " " + year + "-" + month + "-" + date
      setTimeout(() => {
        this.timer()
      }, 1000 * 3)
    },

    initLineChart() {
      console.log("lineChart")
      let chartDom = document.getElementById("lineChart")
      this.lineChart = echarts.init(chartDom)
      this.lineChart.setOption(this.lineChartOption)
      this.lineChart.resize()
      console.log(this.lineChart)
    },

    initPieChart() {
      console.log("pieChart")
      let chartDom = document.getElementById("pieChart")
      this.pieChart = echarts.init(chartDom)
      this.pieChart.setOption(this.pieChartOption)
      this.pieChart.resize()
      console.log(this.pieChart)
    },

    initBarChart() {
      console.log("barChart")
      let chartDom = document.getElementById("barChart")
      this.barChart = echarts.init(chartDom)
      this.barChart.setOption(this.barChartOption)
      this.barChart.resize()
      console.log(this.barChart)
    },

    async getCameras() {
      let clusterId = ""
      let clusterReq = await getClusterDevList()
      if (clusterReq && clusterReq.success) {
        if (clusterReq.data.clusterList.length > 0) {
          clusterId = clusterReq.data.clusterList[0].cluster_id
        }
      }

      let camereReq = await getLocalCameraTree({ clusterId: clusterId })
      if (camereReq && camereReq.success) {
        this.cameraTree = camereReq.data.treeMenu
        let tmpTree = JSON.parse(JSON.stringify(camereReq.data.treeMenu))
        this.cameraTotal = 0
        this.orgs = {}
        this.cameras = {}
        for (let i = 0; i < tmpTree.length; i++) {
          this.countNodes(tmpTree[i], null)
        }
        // this.menuTree = tmpTree

        // æ ¹æ®éƒ¨é—¨æ•°æ®ç»Ÿè®¡æŠ¥è­¦æ•°é‡
        await this.orgsWarnCount()

        // ç»Ÿè®¡7日排查量
        this.checkWarnCount()
      }
    },
    // ç»Ÿè®¡ç›‘测点总量
    countNodes(tree, parent) {
      if (tree.children && tree.children.length > 0) {
        for (let i = 0; i < tree.children.length; i++) this.countNodes(tree.children[i], tree)
      } else {
        if (tree.type == "4") {
          this.cameraTotal += 1
          // è®°å½•æ‘„像机父id信息,并且统计同级摄像机ID,按部门查询
          if (!(parent.id in this.orgs)) {
            this.orgs[parent.id] = {
              name: parent.name,
              cameras: [tree.id],
              totalWarn: 0
            }
          } else {
            this.orgs[parent.id].cameras.push(tree.id)
          }

          // è®°å½•æ‘„像机父ID
          this.cameras[tree.id] = parent.id
        }
      }
    },
    // æ£€ç´¢æ•°æ®
    searchHandler() {
      let query = {
        // treeNodes: this.collSelectedNodes(),
        searchTime: this.format(this.searchTime)
        // alarmLevel: this.alarmValues
      }

      analysisReport(query).then((rsp) => {
        if (rsp && rsp.success) {
          this.decodeWarningRate(rsp.data.warningRate)
          this.decodeWarningChartRate(rsp.data.warningChartRate)
          this.decodeWarningStatics(rsp.data.warningTable)
          // this.decodeWarningTable(rsp.data.warningStatics)
        }
      })
    },
    decodeWarningTable(b64data) {
      this.solvedTotal = 0
      this.tableDataList = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          decodeResult = []
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.solvedTotal = this.solvedTotal + element.doc_count
              this.tableDataList.push({ date: element.key_as_string, count: element.doc_count })
            })
          }
        }
      }
    },
    // æŠ˜çº¿å›¾
    decodeWarningStatics(b64data) {
      this.lineChart.clear()
      this.lineChartOption.xAxis.data = []
      this.lineChartOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.lineChartOption.xAxis.data.push(element.key_as_string)
              this.lineChartOption.series[0].data.push(element.doc_count)
            })
          }
        }
      }

      this.lineChart.setOption(this.lineChartOption)
    },
    // é¥¼å›¾
    decodeWarningChartRate(b64data) {
      this.pieChart.clear()
      this.pieChartOption.series[0].data = []
      if (b64data) {
        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult) {
            decodeResult.forEach((element) => {
              this.pieChartOption.series[0].data.push({ value: element.doc_count, name: element.key })
            })
          }
        }
      }
      this.pieChart.setOption(this.pieChartOption)
    },
    // "warningRate": {"buckets":[{"doc_count":4,"key":3},{"doc_count":3,"key":2},{"doc_count":1,"key":1}],"total":3257}
    //key 1=误报数据,2=已整改,3=未整改,4=已排查 doc_count=数量 total=总量
    decodeWarningRate(b64data) {
      if (b64data) {
        let warningTotal = 0
        let warningFalse = 0
        let warningSolved = 0
        let warningNoCheck = 0
        let warningChecked = 0

        let decodeString = Base64.decode(b64data)
        if (decodeString != "") {
          let decodeResult = JSON.parse(decodeString)
          if (decodeResult && decodeResult.total > 0) {
            warningTotal = decodeResult.total
            decodeResult.buckets.forEach((element) => {
              switch (element.key) {
                case 1:
                  warningFalse += element.doc_count
                  break
                case 2:
                  warningSolved += element.doc_count
                  break
                case 3:
                  warningNoCheck += element.doc_count
                  break
                case 4:
                  warningChecked += element.doc_count
                  break
                default:
                  break
              }
            })
          }
          // console.log("WarningRate:", decodeResult)
          // console.log("WarningRate:", warningTotal, warningFalse, warningSolved, warningNoCheck, warningChecked)
          // å¤„理率
          this.manageRate = parseInt(((warningChecked + warningFalse) / warningTotal) * 100)
          // æŽ’查率
          this.checkRate = parseInt((warningChecked / warningTotal) * 100)
          // æ•´æ”¹çŽ‡
          this.solveRate = parseInt(((warningFalse + warningSolved) / warningTotal) * 100)
        }
      }
    },
    async orgsWarnCount() {
      let orgArry = []
      this.warnTotal = 0
      for (let key in this.orgs) {
        if (!this.searchTime) {
          this.searchTime = []
        }
        this.VideoPhotoData.page = 0
        this.VideoPhotoData.size = 0
        // æ—¶é—´èŒƒå›´
        this.VideoPhotoData.searchTime = this.format(this.searchTime)
        // æŽ’查登记
        this.VideoPhotoData.warningFlag = 0
        this.VideoPhotoData.treeNodes = this.orgs[key].cameras
        // this.VideoPhotoData.showType = this.showType
        await this.VideoPhotoData.querySearchList()
        this.orgs[key].totalWarn = this.VideoPhotoData.total
        this.warnTotal += this.VideoPhotoData.total
        orgArry.push(this.orgs[key])
      }

      orgArry = orgArry.sort((a, b) => {
        return b.totalWarn - a.totalWarn
      })
      this.top10 = orgArry.slice(0, 10)
    },
    // ç»Ÿè®¡7日排查量
    async checkWarnCount() {
      this.barChart.clear()
      this.barChartOption.xAxis.data = []
      this.barChartOption.series[0].data = []
      for (let i = 6; i >= 0; i--) {
        this.VideoPhotoData.page = 0
        this.VideoPhotoData.size = 0
        // æ—¶é—´èŒƒå›´
        this.VideoPhotoData.searchTime = [
          this.$moment()
            .subtract(i, "days")
            .format("YYYY-MM-DD 00:00:00"),
          this.$moment()
            .subtract(i, "days")
            .format("YYYY-MM-DD 23:59:59")
        ]
        // æŽ’查登记
        this.VideoPhotoData.warningFlag = 4
        this.VideoPhotoData.treeNodes = []
        // this.VideoPhotoData.showType = this.showType
        await this.VideoPhotoData.querySearchList()
        this.barChartOption.xAxis.data.push(
          this.$moment()
            .subtract(i, "days")
            .format("MM-DD")
        )
        this.barChartOption.series[0].data.push(this.VideoPhotoData.total)
        this.barChart.setOption(this.barChartOption)
      }
    },
    format(array) {
      if (!array || array.length === 0) {
        return []
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
      ]
    }
  }
}
@@ -383,6 +665,7 @@
  font-family: yjsz;
  src: url("./fonts/yjsz.TTF"); /* IE9+,可以是具体的实际链接 */
}

ul {
  padding: 0;
  margin: 0;
@@ -396,12 +679,25 @@

.title {
  margin-top: 27px;
  margin-left: 25px;
  margin-left: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  color: #e3f0fd;
}

.time {
  position: absolute;
  color: #cbe3e2;
  font-size: 26px;
  font-weight: 600;
  opacity: 0.5;
  top: -25px;
  left: 2%;
  font-style: normal;
  font-family: "yjsz";
  /* font-stretch: expanded; */
  letter-spacing: 5px;
}
.data-view {
  width: 100%;
  height: 100%;
@@ -413,7 +709,8 @@
  background-size: cover;
  overflow: hidden;
  position: absolute;
  z-index: -2;
  color: #e3f0fd;
  z-index: 0;
}

/* åŠ è½½æ—‹è½¬åŠ¨ç”» */
@@ -488,7 +785,7 @@
  align-items: center;
  font-size: 55px;
  font-weight: 700;
  background: linear-gradient(0deg, #fff, #fff);
  background: linear-gradient(0deg, #e3f0fd, #e3f0fd);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
@@ -521,6 +818,7 @@
  position: absolute;
  top: 12%;
  left: 2%;
  font-family: yjsz;
}

.center {
@@ -542,7 +840,29 @@
.center .center-count {
  position: relative;
  top: 60%;
  color: #fff;
  color: #e3f0fd;
}

.center .center-right {
  position: absolute;
  top: 0;
  left: 73%;
  width: 25%;
  height: 100%;
  text-align: center;
}

.center .center-right span {
  color: #e3f0fd;
}

.center .center-right .chart {
  height: 28%;
  margin-top: 10px;
  /* background: #e3f0fd; */
}
.center .center-right .chart >>> svg path:first-child {
  stroke: #101d50;
}

.right-week {
@@ -582,10 +902,10 @@
  background: url(/images/data-v/lineup.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* height: 31%;
  width: 66%; */
  height: 309px;
  width: 1268px;
  height: 31%;
  width: 66%;
  /* height: 309px;
  width: 1268px; */
  position: absolute;
  bottom: 2%;
  left: 2%;
@@ -625,4 +945,44 @@
  right: 4%;
  color: rgb(217, 214, 214);
}

.top10-list {
  width: 100%;
  height: 9%;
  /* background: #e3f0fd; */
  /* border-bottom: solid 1px; */
  position: relative;
  line-height: 60px;
  color: #e3f0fd;
  font-size: 14px;
  font-weight: 600;
}

.top10-list .list-0 {
  position: absolute;
  top: 0;
  left: 5%;
}
.top10-list .list-1 {
  position: absolute;
  top: 0;
  margin: 0px 70px;
}
.top10-list .list-2 {
  position: absolute;
  top: 0;
  left: 80%;
}
.top10-list .list-img {
  position: absolute;
  bottom: -18%;
  left: 18%;
  width: 250px;
}

::v-deep .el-progress__text {
  font-size: 30px !important;
  /* font-weight: 600; */
  color: #e3f0fd;
}
</style>

 src/views/search/Searching.vue

@@ -777,7 +777,6 @@
      } else {
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
      }
      console.log("cards", this.VideoPhotoData.cards)
    },
    stringToNum() {
      var arr = []