From ece5b7b7d24f85a3253cf722291e69ca7a406192 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 16 八月 2022 13:05:18 +0800
Subject: [PATCH] 完善大屏
---
src/views/manageCenter/index.vue | 1264 ++++++++++++++++++++++++--------------------------------
1 files changed, 541 insertions(+), 723 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index 5242a6c..cdb76cc 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -5,7 +5,7 @@
<div class="centerTitle">
<div class="heart">
- <div class="welcome">{{ userName }}, 娆㈣繋鎮ㄥ洖鍒拌礉鎬濈绠＄悊涓績銆�</div>
+ <div class="welcome">{{ userName }}, 娆㈣繋鎮ㄥ洖鍒扮鐞嗕腑蹇冦��</div>
<div class="time">{{ timeMsg }}</div>
</div>
</div>
@@ -15,218 +15,201 @@
<div class="products">
<div class="title">鍏ㄩ儴浜у搧</div>
<div class="productList">
- <div
- class="productItem"
- v-for="(item, index) in productList"
- :key="index"
- @click="jump(item)"
- >
+ <div class="productItem" v-for="(item, index) in productList" :key="index" @click="jump(item)">
<img :src="item.icon" alt="" />
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
+ <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/浠诲姟鎬绘暟.png" alt="" />
+ <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/鎽勫儚鏈烘�绘暟.png" alt="" />
+ <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/绠楁硶鎬绘暟.png" alt="" />
+ <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/浠诲姟鎬绘暟.png" alt="" />
+ <img src="/images/manageCenter/total1.png" alt="" />
</div>
</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="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>
@@ -241,27 +224,49 @@
</template>
<script>
-import IndexHeader from "@/components/IndexHeader";
-import Footer from "@/components/Footer";
-import * as echarts from "echarts";
-import "echarts/map/js/china.js";
+import IndexHeader from "@/components/IndexHeader"
+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,
+ 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",
@@ -269,101 +274,125 @@
productList: [
{
name: "璁惧绠＄悊",
- icon: "/images/manageCenter/璁惧绠＄悊.png",
+ icon: "/images/manageCenter/manage.png",
openPath: "/equipmentManagement",
path: "/equipmentList",
- permission: "deviceMng",
+ permission: "deviceMng"
},
{
name: "绠楀姏绠＄悊",
- icon: "/images/manageCenter/绠楀姏绠＄悊.png",
+ icon: "/images/manageCenter/manage2.png",
openPath: "/hashrate",
path: "/hashrateDetail",
- permission: "analysisMng",
+ permission: "analysisMng"
},
{
name: "缁熻鏌ヨ",
- icon: "/images/manageCenter/绠楀姏绠＄悊.png",
+ icon: "/images/manageCenter/search.png",
openPath: "/searchOpen",
path: "/search",
- permission: "statisticMng",
+ permission: "statisticMng"
},
+ {
+ name: "缁熻鍒嗘瀽",
+ icon: "/images/manageCenter/search.png",
+ openPath: "/dataView",
+ path: "/dataView",
+ permission: "statisticMng"
+ },
+
+ {
+ name: "鎺ㄩ�佺鐞�",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/report",
+ path: "/report",
+ permission: "statisticMng"
+ },
+
+ {
+ name: "瀹炴椂鐩戞帶",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/video",
+ path: "/video",
+ 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,
- icon: "circle",
+ 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,
+ show: false
},
axisLabel: {
- color: "#666",
+ color: "#666"
},
+ data: []
},
yAxis: {
axisTick: {
- show: false,
+ show: false
},
axisLine: {
//y杞�
- show: false,
+ show: false
},
axisLabel: {
- color: "#666",
+ color: "#666"
},
splitLine: {
//缃戞牸绾�
lineStyle: {
color: "rgb(230, 230, 230)",
- type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
},
- show: true, //闅愯棌鎴栨樉绀�
- },
+ show: true //闅愯棌鎴栨樉绀�
+ }
},
// Declare several bar series, each will be mapped
// 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,
@@ -373,506 +402,336 @@
colorStops: [
{
offset: 0,
- color: "#0066FF", // 0% 澶勭殑棰滆壊
- radius: ["50%", "80%"],
+ color: "#0066FF" // 0% 澶勭殑棰滆壊
+ // radius: ["50%", "80%"]
},
{
offset: 1,
- color: "rgba(0, 102, 255, 0.25)", // 100% 澶勭殑棰滆壊
- },
+ color: "rgba(0, 102, 255, 0.25)" // 100% 澶勭殑棰滆壊
+ }
],
- global: false, // 缂虹渷涓� false
+ global: false // 缂虹渷涓� false
},
itemStyle: {
//鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
normal: {
//鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- 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: 100,
- inRange: {
- color: ["#FCFDFF", "#0065FF"],
- },
- itemWidth: 56,
- itemHeight: 200,
- text: ["100", "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: 99,
- },
- {
- name: "澶╂触",
- value: 26,
- },
- {
- name: "涓婃捣",
- value: 44,
- },
- {
- name: "閲嶅簡",
- value: 0,
- },
- {
- name: "娌冲寳",
- value: 0,
- },
- {
- name: "娌冲崡",
- value: 0,
- },
- {
- name: "浜戝崡",
- value: 55,
- },
- {
- name: "杈藉畞",
- value: 19,
- },
- {
- name: "榛戦緳姹�",
- value: 0,
- },
- {
- name: "婀栧崡",
- value: 0,
- },
- {
- name: "瀹夊窘",
- value: 60,
- },
- {
- name: "灞变笢",
- value: 39,
- },
- {
- name: "鏂扮枂",
- value: 4,
- },
- {
- name: "姹熻嫃",
- value: 0,
- },
- {
- name: "娴欐睙",
- value: 0,
- },
- {
- name: "姹熻タ",
- value: 36,
- },
- {
- name: "婀栧寳",
- value: 52,
- },
- {
- name: "骞胯タ",
- value: 0,
- },
- {
- name: "鐢樿們",
- value: 7,
- },
- {
- name: "灞辫タ",
- value: 5,
- },
- {
- name: "鍐呰挋鍙�",
- value: 0,
- },
- {
- name: "闄曡タ",
- value: 22,
- },
- {
- name: "鍚夋灄",
- value: 4,
- },
- {
- name: "绂忓缓",
- value: 18,
- },
- {
- name: "璐靛窞",
- value: 5,
- },
- {
- name: "骞夸笢",
- value: 98,
- },
- {
- name: "闈掓捣",
- value: 1,
- },
- {
- name: "瑗胯棌",
- value: 0,
- },
- {
- name: "鍥涘窛",
- value: 44,
- },
- {
- name: "瀹佸",
- value: 4,
- },
- {
- name: "娴峰崡",
- value: 22,
- },
- {
- name: "鍙版咕",
- value: 3,
- },
- {
- name: "棣欐腐",
- value: 5,
- },
- {
- name: "婢抽棬",
- value: 555,
- },
- ],
- },
- ],
- },
- 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",
- },
- ],
+ barBorderRadius: [15, 15, 0, 0]
+ }
+ }
+ }
+ ]
},
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)",
+ "rgb(165, 96, 255)"
],
series: [
{
name: "Nightingale Chart",
type: "pie",
- radius: [35, 120],
+ radius: [20, 160],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
- borderRadius: 8,
+ 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;
+ this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
}
- let date = new Date();
- let year = date.getFullYear(); //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�)
- let month = date.getMonth() + 1; //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
- let day = date.getDate(); //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
- let weekDay = "";
+ let date = new Date()
+ let year = date.getFullYear() //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�)
+ let month = date.getMonth() + 1 //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let day = date.getDate() //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let weekDay = ""
switch (date.getDay()) {
case 0:
- weekDay = "鏄熸湡鏃�";
- break;
+ weekDay = "鏄熸湡鏃�"
+ break
case 1:
- weekDay = "鏄熸湡涓�";
- break;
+ weekDay = "鏄熸湡涓�"
+ break
case 2:
- weekDay = "鏄熸湡浜�";
- break;
+ weekDay = "鏄熸湡浜�"
+ break
case 3:
- weekDay = "鏄熸湡涓�";
- break;
+ weekDay = "鏄熸湡涓�"
+ break
case 4:
- weekDay = "鏄熸湡鍥�";
- break;
+ weekDay = "鏄熸湡鍥�"
+ break
case 5:
- weekDay = "鏄熸湡浜�";
- break;
+ weekDay = "鏄熸湡浜�"
+ break
case 6:
- weekDay = "鏄熸湡鍏�";
- break;
+ weekDay = "鏄熸湡鍏�"
+ break
}
- this.timeMsg =
- "浠婃棩, " + year + "骞�" + month + "鏈�" + day + "鏃�" + weekDay;
+ this.timeMsg = "浠婃棩, " + year + "骞�" + month + "鏈�" + day + "鏃�" + weekDay
},
select(value, type) {
- this[type] = value;
+ this[type] = value
},
initBar() {
- let bartDom = document.getElementById("bar");
- let myChart = echarts.init(bartDom);
- myChart.setOption(this.barOption);
+ let bartDom = document.getElementById("bar")
+ 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);
+ let pieDom = document.getElementById("pieChart")
+ this.pieChart = echarts.init(pieDom)
+ this.pieChart.setOption(this.pieOption)
},
jump(route) {
- const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
const val = userInfo.permissions.find((item) => {
- return item == route.permission;
- });
+ return item == route.permission
+ })
if (val) {
- this.$router.push(route.path);
+ if (route.path === "/search" || route.path === "/dataView") {
+ const { href } = this.$router.resolve({
+ path: route.path
+ })
+ window.open(href, "_blank")
+ return
+ }
+ this.$router.push(route.path)
} else if (!userInfo.parentId) {
- this.$router.push(route.openPath);
+ this.$router.push(route.openPath)
}
},
refrash() {},
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>
<style lang="scss" scoped>
@@ -881,6 +740,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;
@@ -1024,43 +892,19 @@
}
&:nth-child(1) {
- background: linear-gradient(
- 108deg,
- #0065ff -8%,
- #0065ff -8%,
- #99cfff 100%,
- #99cfff 100%
- );
+ background: linear-gradient(108deg, #0065ff -8%, #0065ff -8%, #99cfff 100%, #99cfff 100%);
}
&:nth-child(2) {
- background: linear-gradient(
- 108deg,
- #ff6a00 0%,
- #ff6a00 0%,
- #ffb599 100%,
- #ffb599 100%
- );
+ background: linear-gradient(108deg, #ff6a00 0%, #ff6a00 0%, #ffb599 100%, #ffb599 100%);
}
&:nth-child(3) {
- background: linear-gradient(
- 108deg,
- #6d44e5 1%,
- #6d44e5 1%,
- #b299ff 100%,
- #b299ff 100%
- );
+ background: linear-gradient(108deg, #6d44e5 1%, #6d44e5 1%, #b299ff 100%, #b299ff 100%);
}
&:nth-child(4) {
- background: linear-gradient(
- 108deg,
- #40b63a 0%,
- #40b63a 0%,
- #89e5bc 100%,
- #89e5bc 100%
- );
+ background: linear-gradient(108deg, #40b63a 0%, #40b63a 0%, #89e5bc 100%, #89e5bc 100%);
}
}
}
@@ -1071,12 +915,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 {
@@ -1090,38 +934,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;
- }
- }
- }
}
}
@@ -1204,6 +1016,12 @@
#scatterChart {
height: 500px;
}
+
+ .table-area {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ width: 700px;
+ }
}
.right {
@@ -1226,7 +1044,7 @@
.item {
display: flex;
- justify-content: end;
+ justify-content: flex-end;
align-items: center;
.label {
@@ -1243,4 +1061,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0