From 1e4a3f702623a46bcd53dbc96e235d51e0edb155 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 05 八月 2022 04:13:02 +0800
Subject: [PATCH] 管理中心添加分析
---
src/views/manageCenter/index.vue | 1064 ++++++++++++++++++++++++----------------------------------
1 files changed, 441 insertions(+), 623 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index b629803..61c89a1 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -22,42 +22,118 @@
</div>
</div>
- <!-- <div class="equipmentInfo">
+ <div class="heart">
+ <div class="products">
+ <div class="title">缁熻鍒嗘瀽</div>
+ <div class="productList">
+ <p class="p-statis" style=" vertical-align: top">
+ <span>鏃堕棿锛�</span>
+ <el-date-picker
+ size="mini"
+ v-model="searchTime"
+ @change="searchHandler"
+ type="datetimerange"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :default-time="['00:00:00', '23:59:59']"
+ ></el-date-picker>
+ </p>
+ <!-- <p class="p-statis" style="margin-left: 10px">
+ <b style="width: 60px">鍦烘櫙锛�</b>
+ <el-select
+ v-model="taskValues"
+ multiple
+ @change="searchingBtn"
+ :disabled="typeDisable"
+ collapse-tags
+ size="mini"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in VideoPhotoData.tasks"
+ style="font-size: 12px"
+ :key="item.id + 'x'"
+ :value="item.id"
+ :label="item.isDelete ? item.name + '锛堝凡鍒犻櫎锛�' : item.name"
+ :title="item.isDelete ? item.name + '锛堝凡鍒犻櫎锛�' : item.name"
+ ></el-option>
+ </el-select>
+ </p> -->
+
+ <p class="p-statis" style="margin-left: 20px">
+ <span>閮ㄩ棬锛�</span>
+ <el-cascader
+ size="mini"
+ style="width:400px"
+ v-model="searchTree"
+ :options="menuTree"
+ :props="{ value: 'id', label: 'name', checkStrictly: true }"
+ collapse-tags
+ clearable
+ @change="handleTreeChange"
+ ></el-cascader>
+ </p>
+ <p class="p-statis" style="margin-left: 20px">
+ <span>绛夌骇锛�</span>
+ <el-select
+ v-model="alarmValues"
+ clearable
+ collapse-tags
+ size="mini"
+ style="width:140px"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in levelOptions"
+ :key="item.id"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </p>
+ <p class="p-statis" style="">
+ <el-button type="primary" size="mini" @click="searchHandler">鎼滅储</el-button>
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div class="equipmentInfo">
<div class="equipmentCard">
- <div class="label">璁惧鎬婚噺</div>
+ <div class="label">棰勮鎬婚噺</div>
<div class="number">
- 34
- <div class="upIcon iconfont"> 2</div>
+ {{ warningTotal }}
+ <div class="upIcon iconfont"></div>
</div>
<img src="/images/manageCenter/total2.png" alt="" />
</div>
<div class="equipmentCard">
- <div class="label">鎽勫儚鏈烘�绘暟</div>
+ <div class="label">鎺掓煡鏁伴噺</div>
<div class="number">
- 23
- <div class="upIcon iconfont"> 2</div>
+ {{ warningChecked }}
+ <div class="upIcon iconfont"></div>
</div>
<img src="/images/manageCenter/total3.png" alt="" />
</div>
<div class="equipmentCard">
- <div class="label">绠楁硶鎬绘暟</div>
+ <div class="label">鏁存敼鏁伴噺</div>
<div class="number">
- 34
- <div class="downIcon iconfont"> 2</div>
+ {{ warningSolved }}
+ <div class="downIcon iconfont"></div>
</div>
<img src="/images/manageCenter/total4.png" alt="" />
</div>
<div class="equipmentCard">
- <div class="label">浠诲姟鎬绘暟</div>
+ <div class="label">澶勭悊鐜�</div>
<div class="number">
- 34
- <div class="downIcon iconfont"> 2</div>
+ {{ warningManage }}
+ <div class="downIcon iconfont"></div>
</div>
<img src="/images/manageCenter/total1.png" alt="" />
@@ -65,169 +141,81 @@
</div>
<div class="equipmentStatus">
- <div class="left">
- <div class="title">璁惧杩愯鐘舵�佺洃娴�</div>
- <div class="control">
- <div
- class="label"
- @click="select('day', 'selectBar')"
- :class="{ active: selectBar === 'day' }"
- >
+ <div class="bar-chart">
+ <div class="title">棰勮鏁伴噺瓒嬪娍</div>
+ <!-- <div class="control">
+ <div class="label" @click="select('day', 'selectBar')" :class="{ active: selectBar === 'day' }">
浠婃棩
</div>
- <div
- class="label"
- @click="select('week', 'selectBar')"
- :class="{ active: selectBar === 'week' }"
- >
+ <div class="label" @click="select('week', 'selectBar')" :class="{ active: selectBar === 'week' }">
鏈懆
</div>
- <div
- class="label"
- @click="select('month', 'selectBar')"
- :class="{ active: selectBar === 'month' }"
- >
+ <div class="label" @click="select('month', 'selectBar')" :class="{ active: selectBar === 'month' }">
鏈湀
</div>
- </div>
+ </div> -->
<div id="bar"></div>
</div>
-
- <div class="right">
- <div class="title">璁惧绂荤嚎鏃堕暱鎺掕</div>
- <div class="timeList scroll">
- <div
- class="timeItem"
- v-for="(item, index) in timeList"
- :key="index"
- >
- <div class="index">
- {{ index / 10 >= 1 ? index : `0${index}` }}.
- </div>
- <div class="name">
- {{ item.name }}
- </div>
- <div class="time">{{ item.time }}</div>
- </div>
- </div>
- </div>
- </div> -->
-
- <!-- <div class="performence">
- <div class="title">璁惧杩愯鐘舵�佺洃娴�</div>
- <div class="control">
- <div
- class="label"
- @click="select('day', 'selectForm')"
- :class="{ active: selectForm === 'day' }"
- >
- 浠婃棩
- </div>
- <div
- class="label"
- @click="select('week', 'selectForm')"
- :class="{ active: selectForm === 'week' }"
- >
- 鏈懆
- </div>
- <div
- class="label"
- @click="select('month', 'selectForm')"
- :class="{ active: selectForm === 'month' }"
- >
- 鏈湀
- </div>
- </div>
- <div class="table-area">
- <el-table
- id="table"
- ref="table"
- tooltip-effect="dark"
- :data="dataList"
- :fit="true"
- :stripe="true"
- class="gutter"
- >
- <el-table-column label="搴忓彿" class-name="index">
- <template slot-scope="scope">{{
- scope.$index + 1 + (page - 1) * size
- }}</template>
- </el-table-column>
-
- <el-table-column
- prop="name"
- label="璁惧鍚嶇О"
- show-overflow-tooltip
- ></el-table-column>
-
- <el-table-column
- prop="id"
- label="璁惧ID"
- show-overflow-tooltip
- ></el-table-column>
-
- <el-table-column
- prop="mem"
- label="鍐呭瓨"
- show-overflow-tooltip
- ></el-table-column>
-
- <el-table-column
- prop="gpu"
- label="绠楀姏"
- show-overflow-tooltip
- ></el-table-column>
-
- <el-table-column
- prop="cpu"
- label="cpu"
- show-overflow-tooltip
- ></el-table-column>
-
- <el-table-column
- prop="dist"
- label="纭洏"
- show-overflow-tooltip
- ></el-table-column>
- </el-table>
- <el-pagination
- @current-change="refrash"
- @size-change="handleSizeChange"
- :current-page="page"
- :page-size="size"
- layout="total, sizes, prev, pager, next, jumper"
- :page-sizes="[5, 10, 15, 20, 25]"
- :total="total"
- background
- ></el-pagination>
- </div>
- </div>
- -->
- <div class="map">
- <div class="title">璁惧鍦板浘鍒嗗竷</div>
- <div id="mapChart"></div>
</div>
- <!-- <div class="hashRate">
+ <div class="hashRate">
<div class="left">
- <div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮:</div>
+ <div class="title">棰勮鏁版嵁鍗犳瘮:</div>
<div class="info">
- <div class="item">
- <div class="label">浠婃棩骞冲潎绠楀姏:</div>
- <div class="data">45</div>
+ <div class="equipmentInfo" style="margin-top:25px">
+ <div class="equipmentCard">
+ <div class="label">鏁存敼鎬婚噺</div>
+ <div class="number">
+ {{ solvedTotal }}
+ <!-- <div class="upIcon iconfont"> 2</div> -->
+ </div>
+
+ <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
+ </div>
+ <div class="equipmentCard">
+ <div class="label">鏃ュ潎娆℃暟</div>
+ <div class="number">
+ {{ solvedPre }}
+ <!-- <div class="upIcon iconfont"> 2</div> -->
+ </div>
+
+ <!-- <img src="/images/manageCenter/total2.png" alt="" /> -->
+ </div>
</div>
- <div class="item">
- <div class="label">璁惧鎬婚噺:</div>
- <div class="data">92</div>
+
+ <div class="table-area">
+ <el-table
+ id="table"
+ ref="table"
+ tooltip-effect="dark"
+ :data="tableDataList"
+ :fit="true"
+ :stripe="true"
+ :max-height="350"
+ class="gutter"
+ >
+ <el-table-column prop="date" label="鏃ユ湡" show-overflow-tooltip></el-table-column>
+
+ <el-table-column prop="count" align="center" label="鏁存敼鏁伴噺" show-overflow-tooltip></el-table-column>
+ </el-table>
+ <el-pagination
+ @current-change="refrash"
+ @size-change="handleSizeChange"
+ :current-page="page"
+ :page-size="size"
+ layout="total, sizes, prev, pager, next, jumper"
+ :page-sizes="[5, 10, 15, 20, 25]"
+ :total="solvedTotal"
+ background
+ ></el-pagination>
</div>
</div>
- <div id="scatterChart"></div>
</div>
<div class="right">
<div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮</div>
<div id="pieChart"></div>
</div>
- </div> -->
+ </div>
</div>
<!-- 椤靛熬 -->
@@ -240,23 +228,45 @@
import Footer from "@/components/Footer"
import * as echarts from "echarts"
import "echarts/map/js/china.js"
+import * as Base64 from "js-base64"
+
+import { analysisReport } from "@/api/es"
+import { getLocalCameraTree } from "@/api/area"
+import { getClusterDevList } from "@/api/clusterManage"
export default {
components: {
IndexHeader,
Footer
},
- created() {
- this.getInfo()
- },
- mounted() {
- // this.initBar();
- this.initMap()
- // this.initScatter();
- // this.initPie();
+ 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 {
+ lineChart: {},
+ pieChart: {},
+ searchTree: "",
+ selectedOrg: "",
+ selectNodes: [],
+ searchTime: [
+ this.$moment()
+ .subtract(6, "days")
+ .format("YYYY-MM-DD 00:00:00"),
+ this.$moment().format("YYYY-MM-DD HH:mm:ss")
+ ],
+ alarmValues: "",
userName: "",
timeMsg: "",
selectBar: "day",
@@ -287,60 +297,48 @@
},
{
- name: "鍛婅绠＄悊",
+ name: "鎺ㄩ�佺鐞�",
icon: "/images/manageCenter/manage2.png",
openPath: "/report",
path: "/report",
permission: "statisticMng"
}
],
- timeList: [
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" }
+ cameraTree: [],
+ menuTree: [],
+ levelOptions: [
+ { id: 0, value: "", label: "鍏ㄩ儴" },
+ { id: 1, value: "涓�绾�", label: "涓�绾�" },
+ { id: 2, value: "浜岀骇", label: "浜岀骇" },
+ { id: 3, value: "涓夌骇", label: "涓夌骇" },
+ { id: 4, value: "鍥涚骇", label: "鍥涚骇" },
+ { id: 5, value: "浜旂骇", label: "浜旂骇" }
],
barOption: {
+ grid: {
+ left: "3%",
+ right: "3%",
+ bottom: "10%",
+ containLabel: true
+ },
legend: {
x: "right",
y: "top",
- itemHeight: 12,
- itemWidth: 12,
+ itemHeight: 2,
+ itemWidth: 2,
icon: "circle"
},
tooltip: {},
- dataset: {
- source: [
- ["status", "鍦ㄧ嚎", "绂荤嚎"],
- ["00:00", 750, 130],
- ["02:00", 650, 230],
- ["04:00", 750, 130],
- ["06:00", 550, 330],
- ["08:00", 750, 130],
- ["10:00", 700, 180],
- ["12:00", 850, 30],
- ["14:00", 750, 130],
- ["16:00", 850, 30],
- ["18:00", 980, 0],
- ["20:00", 750, 130],
- ["22:00", 750, 130]
- ]
- },
xAxis: {
type: "category",
+ boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
color: "#666"
- }
+ },
+ data: []
},
yAxis: {
axisTick: {
@@ -366,7 +364,20 @@
// to a column of dataset.source by default.
series: [
{
- type: "bar",
+ type: "line",
+ data: [],
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#0066FF"
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 102, 255, 0.25)"
+ }
+ ])
+ },
color: {
type: "linear",
x: 0.02,
@@ -376,8 +387,8 @@
colorStops: [
{
offset: 0,
- color: "#0066FF", // 0% 澶勭殑棰滆壊
- radius: ["50%", "80%"]
+ color: "#0066FF" // 0% 澶勭殑棰滆壊
+ // radius: ["50%", "80%"]
},
{
offset: 1,
@@ -393,312 +404,18 @@
barBorderRadius: [15, 15, 0, 0]
}
}
- },
- {
- type: "bar",
- color: {
- type: "linear",
- x: 0.02,
- y: 0.02,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#FF4B33", // 0% 澶勭殑棰滆壊
- radius: ["50%", "80%"]
- },
- {
- offset: 1,
- color: "rgba(255,75,51,0.25)" // 100% 澶勭殑棰滆壊
- }
- ],
- global: false // 缂虹渷涓� false
- },
- itemStyle: {
- //鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
- normal: {
- //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- barBorderRadius: [15, 15, 0, 0]
- }
- }
- }
- ]
- },
- mapOption: {
- visualMap: {
- left: "right",
- min: 0,
- max: 10,
- inRange: {
- color: ["#FCFDFF", "#0065FF"]
- },
- itemWidth: 56,
- itemHeight: 200,
- text: ["10", "0"],
- calculable: false
- },
- geo: {
- //涓浗鍦板浘璁剧疆
- map: "china",
- scaleLimit: {
- min: 1,
- max: 2
- },
- zoom: 1,
- top: 120,
- label: {
- normal: {
- show: false
- },
- emphasis: {
- show: false
- }
- }
- },
- tooltip: {
- //鏄剧ず鎮诞绐楀彛
- trigger: "item", //浣跨敤杩欎釜鍑芥暟杩斿洖鎮诞鍐呭
- backgroundColor: "#FFFFFF",
- textStyle: {
- color: "#0064FF",
- fontSize: "14"
- },
- formatter: function(params) {
- const msg = params.data.name + ":" + params.data.value
- return msg
- }
- },
-
- series: [
- {
- type: "map",
- geoIndex: 0,
- data: [
- {
- name: "鍗楁捣璇稿矝",
- value: 0,
- eventTotal: 100,
- specialImportant: 10,
- import: 10,
- compare: 10,
- common: 40,
- specail: 20
- },
- {
- name: "鍖椾含",
- value: 0
- },
- {
- name: "澶╂触",
- value: 0
- },
- {
- name: "涓婃捣",
- value: 0
- },
- {
- name: "閲嶅簡",
- value: 0
- },
- {
- name: "娌冲寳",
- value: 0
- },
- {
- name: "娌冲崡",
- value: 0
- },
- {
- name: "浜戝崡",
- value: 0
- },
- {
- name: "杈藉畞",
- value: 0
- },
- {
- name: "榛戦緳姹�",
- value: 0
- },
- {
- name: "婀栧崡",
- value: 0
- },
- {
- name: "瀹夊窘",
- value: 0
- },
- {
- name: "灞变笢",
- value: 4
- },
- {
- name: "鏂扮枂",
- value: 0
- },
- {
- name: "姹熻嫃",
- value: 0
- },
- {
- name: "娴欐睙",
- value: 0
- },
- {
- name: "姹熻タ",
- value: 0
- },
- {
- name: "婀栧寳",
- value: 0
- },
- {
- name: "骞胯タ",
- value: 0
- },
- {
- name: "鐢樿們",
- value: 0
- },
- {
- name: "灞辫タ",
- value: 0
- },
- {
- name: "鍐呰挋鍙�",
- value: 0
- },
- {
- name: "闄曡タ",
- value: 0
- },
- {
- name: "鍚夋灄",
- value: 0
- },
- {
- name: "绂忓缓",
- value: 0
- },
- {
- name: "璐靛窞",
- value: 0
- },
- {
- name: "骞夸笢",
- value: 0
- },
- {
- name: "闈掓捣",
- value: 0
- },
- {
- name: "瑗胯棌",
- value: 0
- },
- {
- name: "鍥涘窛",
- value: 0
- },
- {
- name: "瀹佸",
- value: 0
- },
- {
- name: "娴峰崡",
- value: 0
- },
- {
- name: "鍙版咕",
- value: 0
- },
- {
- name: "棣欐腐",
- value: 0
- },
- {
- name: "婢抽棬",
- value: 0
- }
- ]
- }
- ]
- },
- scatterOption: {
- xAxis: {
- axisTick: {
- show: false
- },
- axisLine: {
- //y杞�
- show: false
- },
- splitLine: {
- //缃戞牸绾�
- lineStyle: {
- color: "rgb(230, 230, 230)",
- type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
- },
- show: true //闅愯棌鎴栨樉绀�
- }
- },
- yAxis: {
- axisTick: {
- show: false
- },
- axisLine: {
- //y杞�
- show: false
- },
- splitLine: {
- //缃戞牸绾�
- lineStyle: {
- color: "rgb(230, 230, 230)",
- type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
- },
- show: true //闅愯棌鎴栨樉绀�
- }
- },
-
- series: [
- {
- symbolSize: 20,
- data: [
- [10.0, 8.04],
- [8.07, 6.95],
- [13.0, 7.58],
- [9.05, 8.81],
- [11.0, 8.33],
- [14.0, 7.66],
- [13.4, 6.81],
- [10.0, 6.33],
- [14.0, 8.96],
- [12.5, 6.82],
- [9.15, 7.2],
- [11.5, 7.2],
- [3.03, 4.23],
- [12.2, 7.83],
- [2.02, 4.47],
- [1.05, 3.33],
- [4.05, 4.96],
- [6.03, 7.24],
- [12.0, 6.26],
- [12.0, 8.84],
- [7.08, 5.82],
- [5.02, 5.68]
- ],
- color: "rgba(0, 101, 255, 0.5)",
- type: "scatter"
}
]
},
pieOption: {
+ legend: {
+ top: "bottom"
+ },
color: [
"rgb(54, 60, 231)",
"rgb(54, 178, 74)",
"rgb(255, 178, 36)",
- "rgb(0, 190, 231)",
+ "rgb(240, 190, 231)",
"rgb(255, 124, 31)",
"rgb(165, 96, 255)"
],
@@ -706,95 +423,213 @@
{
name: "Nightingale Chart",
type: "pie",
- radius: [35, 120],
+ radius: [20, 160],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8
},
- data: [
- { value: 22.45, name: "绂诲矖" },
- { value: 20.2, name: "浜鸿劯璇嗗埆" },
- { value: 17.96, name: "杞﹁締璇嗗埆" },
- { value: 15.71, name: "鐫″矖" },
- { value: 12.86, name: "瀹夊叏甯芥娴�" },
- { value: 10.82, name: "涓綋闈欐" }
- ]
+ label: {
+ show: false
+ },
+ data: []
}
]
},
- dataList: [
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- },
- {
- name: "2.154",
- id: "DSVAD010120190703",
- mem: "78%",
- gpu: "60%",
- cpu: "23%",
- dist: "10%"
- }
- ],
+ tableDataList: [],
page: 1,
size: 5,
- total: 30
+ solvedTotal: 0,
+ warningTotal: 0,
+ warningChecked: 0,
+ warningSolved: 0
}
},
+ created() {
+ this.getInfo()
+ },
+ mounted() {
+ this.searchHandler()
+ this.initBar()
+ this.initPie()
+ this.getCameras()
+ },
methods: {
+ 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))
+ for (let i = 0; i < tmpTree.length; i++) this.clearNode(tmpTree[i])
+ this.menuTree = tmpTree
+ }
+ },
+ clearNode(tree) {
+ if (tree.children) {
+ tree.children = tree.children.filter((item) => {
+ return item.type == "MENU"
+ })
+ }
+ if (tree.children && tree.children.length > 0) {
+ for (let i = 0; i < tree.children.length; i++) this.clearNode(tree.children[i])
+ } else {
+ delete tree.children
+ }
+ },
+ collSelectedNodes() {
+ let selectedNodeId = this.selectedOrg
+ let selectedNode = {}
+ let orgNodeIds = []
+
+ if (this.selectedOrg == "") {
+ return orgNodeIds
+ }
+
+ function findNode(node) {
+ if (node.id == selectedNodeId) {
+ selectedNode = node
+
+ return
+ }
+
+ if (node.children) {
+ node.children.forEach((n) => {
+ findNode(n)
+ })
+ }
+ }
+
+ function collNode(node) {
+ if (node.type != "MENU") {
+ orgNodeIds.push(node.id)
+ return
+ }
+
+ if (node.children) {
+ node.children.forEach((n) => {
+ collNode(n)
+ })
+ }
+ }
+
+ this.cameraTree.forEach((n) => {
+ findNode(n)
+ })
+
+ collNode(selectedNode)
+
+ return orgNodeIds
+ },
+ 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.barOption.xAxis.data = []
+ this.barOption.series[0].data = []
+ if (b64data) {
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult) {
+ decodeResult.forEach((element) => {
+ this.barOption.xAxis.data.push(element.key_as_string)
+ this.barOption.series[0].data.push(element.doc_count)
+ })
+ }
+ }
+ }
+
+ this.lineChart.setOption(this.barOption)
+ },
+ // 楗煎浘
+ decodeWarningChartRate(b64data) {
+ this.pieChart.clear()
+ this.pieOption.series[0].data = []
+ if (b64data) {
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult) {
+ decodeResult.forEach((element) => {
+ this.pieOption.series[0].data.push({ value: element.doc_count, name: element.key })
+ })
+ }
+ }
+ }
+ this.pieChart.setOption(this.pieOption)
+ },
+ // "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) {
+ this.warningTotal = 0
+ this.warningSolved = 0
+ this.warningChecked = 0
+
+ let decodeString = Base64.decode(b64data)
+ if (decodeString != "") {
+ let decodeResult = JSON.parse(decodeString)
+ if (decodeResult && decodeResult.total > 0) {
+ this.warningTotal = decodeResult.total
+ decodeResult.buckets.forEach((element) => {
+ switch (element.key) {
+ case 2:
+ this.warningSolved += element.doc_count
+ break
+ case 4:
+ this.warningChecked += element.doc_count
+ break
+ default:
+ break
+ }
+ })
+ }
+ // console.log("WarningRate:", decodeResult)
+ }
+ }
+ },
+ handleTreeChange(value) {
+ this.selectedOrg = value[value.length - 1]
+ },
getInfo() {
if (sessionStorage.getItem("userInfo")) {
this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
@@ -841,23 +676,14 @@
},
initBar() {
let bartDom = document.getElementById("bar")
- let myChart = echarts.init(bartDom)
- myChart.setOption(this.barOption)
+ this.lineChart = echarts.init(bartDom)
+ this.lineChart.setOption(this.barOption)
},
- initMap() {
- let mapDom = document.getElementById("mapChart")
- let myChart = echarts.init(mapDom)
- myChart.setOption(this.mapOption)
- },
- initScatter() {
- let scatterDom = document.getElementById("scatterChart")
- let myChart = echarts.init(scatterDom)
- myChart.setOption(this.scatterOption)
- },
+
initPie() {
let pieDom = document.getElementById("pieChart")
- let myChart = echarts.init(pieDom)
- myChart.setOption(this.pieOption)
+ this.pieChart = echarts.init(pieDom)
+ this.pieChart.setOption(this.pieOption)
},
jump(route) {
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
@@ -879,7 +705,16 @@
}
},
refrash() {},
- handleSizeChange() {}
+ handleSizeChange() {},
+ 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")
+ ]
+ }
}
}
</script>
@@ -890,6 +725,15 @@
min-width: 1346px;
background-color: rgb(243, 245, 248);
+ .p-statis {
+ display: flex;
+ padding-right: 10px;
+ box-sizing: border-box;
+ margin-top: 20px;
+ b:hover {
+ color: #2249b4;
+ }
+ }
.title {
margin-bottom: 20px;
box-sizing: border-box;
@@ -1056,12 +900,12 @@
margin: 24px 0;
height: 466px;
- .left {
+ .bar-chart {
box-sizing: border-box;
position: relative;
padding: 20px;
background-color: #fff;
- width: 845px;
+ width: 100%;
height: 466px;
#bar {
@@ -1075,38 +919,6 @@
width: 411px;
height: 466px;
background: #ffffff;
-
- .timeList {
- height: 392px;
- overflow-y: auto;
-
- .timeItem {
- margin-bottom: 24px;
- display: flex;
- align-items: center;
- height: 32px;
- border-radius: 16px;
- background: rgb(249, 251, 253);
- font-size: 14px;
-
- &:nth-child(1),
- &:nth-child(2),
- &:nth-child(3) {
- background: #eff4f9;
- }
-
- .index {
- margin: 0 35px 0 20px;
- font-size: 16px;
- color: #0064ff;
- }
-
- .time {
- margin-left: 50px;
- color: #999;
- }
- }
- }
}
}
@@ -1189,6 +1001,12 @@
#scatterChart {
height: 500px;
}
+
+ .table-area {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ width: 700px;
+ }
}
.right {
--
Gitblit v1.8.0