| | |
| | | </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="" /> |
| | |
| | | </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> |
| | | |
| | | <!-- 页尾 --> |
| | |
| | | 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", |
| | |
| | | }, |
| | | |
| | | { |
| | | 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: { |
| | |
| | | // 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, |
| | |
| | | colorStops: [ |
| | | { |
| | | offset: 0, |
| | | color: "#0066FF", // 0% 处的颜色 |
| | | radius: ["50%", "80%"] |
| | | color: "#0066FF" // 0% 处的颜色 |
| | | // radius: ["50%", "80%"] |
| | | }, |
| | | { |
| | | offset: 1, |
| | |
| | | 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)" |
| | | ], |
| | |
| | | { |
| | | 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 |
| | |
| | | }, |
| | | 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")) |
| | |
| | | } |
| | | }, |
| | | 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> |
| | |
| | | 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; |
| | |
| | | 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 { |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | #scatterChart { |
| | | height: 500px; |
| | | } |
| | | |
| | | .table-area { |
| | | margin-top: 10px; |
| | | margin-bottom: 5px; |
| | | width: 700px; |
| | | } |
| | | } |
| | | |
| | | .right { |