From 8516128b0764983f996e81e4c057502264c48f84 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 17 八月 2022 02:56:31 +0800
Subject: [PATCH] 完成大屏数据展示
---
src/views/dataView/index.vue | 482 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 421 insertions(+), 61 deletions(-)
diff --git a/src/views/dataView/index.vue b/src/views/dataView/index.vue
index 60882a8..889c729 100644
--- a/src/views/dataView/index.vue
+++ b/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淇℃伅,骞朵笖缁熻鍚岀骇鎽勫儚鏈篒D,鎸夐儴闂ㄦ煡璇�
+ 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>
--
Gitblit v1.8.0