From dec962bd3a5faae7e15f9a244803ce53ce40d5c8 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 08 May 2023 12:35:37 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs
---
src/views/home/components/rightContainer.vue | 436 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 370 insertions(+), 66 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index 1e8afd9..e66926d 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -7,18 +7,33 @@
</div>
<div class="table-box" v-show="!showMJL">
- <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%;"
+ <el-table
+ size="small"
+ :height="tableHeight"
+ :data="schedulingList"
+ style="width: 100%;"
:header-cell-style="{ 'text-align': 'center' }"
- :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName"
- :empty-text="schedulingNoDataText" v-loading="schedulingLoading" element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+ :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
+ :row-class-name="tableRowClassName"
+ :empty-text="schedulingNoDataText"
+ v-loading="schedulingLoading"
+ element-loading-text="拼命加载中"
+ element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ >
<el-table-column prop="dept" label="值班单位"></el-table-column>
<el-table-column prop="person" label="姓名"></el-table-column>
<el-table-column prop="contact" label="联系方式"></el-table-column>
</el-table>
<div class="pointList" v-if="schedulingList == []">
- <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
- v-for="(item, index) in schedulingDeptList" :key="index">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ :content="item.dept"
+ placement="top"
+ v-for="(item, index) in schedulingDeptList"
+ :key="index"
+ >
<div class="point" @click="getSchedlingList(item)"></div>
</el-tooltip>
</div>
@@ -27,36 +42,37 @@
<div class="duty-information-box" v-show="showMJL">
<div>
<div>
- <span>
- 值班
- </span>
+ <span>值班</span>
</div>
<div>
- <span>
- 徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬
- </span>
+ <span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
</div>
</div>
<div>
<div>
- <span>
- 副班、巡逻
- </span>
+ <span>副班、巡逻</span>
</div>
<div>
- <span>
- 章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥
- </span>
+ <span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
</div>
</div>
</div>
</div>
<svg class="border-svg">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -66,22 +82,60 @@
<div class="title">
警情统计
<div class="timer">
- <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
- range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
- :picker-options="pickerOptions"></el-date-picker>
+ <el-date-picker
+ :clearable="false"
+ v-model="eventTime"
+ type="daterange"
+ align="right"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ @change="caseTimeChange"
+ :picker-options="pickerOptions"
+ ></el-date-picker>
</div>
</div>
- <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+ <el-main
+ v-loading="eventChangeEchartsLoading"
+ element-loading-text="拼命加载中"
+ element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ >
+ <div class="sub-tab">
+ <div
+ class="tab"
+ :class="{ 'select-on-tab': caseInfoType == 0 }"
+ @click="initEventChangeEcharts(0)"
+ >
+ <div class="tab-title-small">警情变化趋势</div>
+ </div>
+ <div
+ class="tab"
+ :class="{ 'select-on-tab': caseInfoType == 1 }"
+ @click="initEventChangeEcharts(1)"
+ >
+ <div class="tab-title-small">警情排行</div>
+ </div>
+ </div>
<div id="EventChangeEcharts" class="echarts-box"></div>
</el-main>
</div>
<svg class="border-svg">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -117,13 +171,25 @@
<div class="crowd-box" ref="crowdBox">
<div class="box">
<div class="title">现有设备</div>
- <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+ <el-main
+ v-loading="equipmentEchartsLoading"
+ element-loading-text="拼命加载中"
+ element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ >
<div class="sub-tab">
- <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
+ <div
+ class="tab"
+ :class="{ 'select-on-tab': linetype == 0 }"
+ @click="initEquipmentEcharts(0)"
+ >
<div class="tab-title-small">设备种类</div>
</div>
- <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
+ <div
+ class="tab"
+ :class="{ 'select-on-tab': linetype == 1 }"
+ @click="initEquipmentEcharts(1)"
+ >
<div class="tab-title-small">设备状态</div>
</div>
</div>
@@ -132,10 +198,19 @@
</div>
<svg class="border-svg">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -166,7 +241,7 @@
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"
-import { getCaseAll, getEquipment } from "@/api/home/index.js"
+import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"
const timeEvents = []
@@ -219,6 +294,7 @@
showMJL: false,
originTitle: ['值班', '副班、巡逻'],
transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
+ caseInfoType: 0
}
},
@@ -280,7 +356,7 @@
getHomeAllData (id = "") {
this.policeStaionID = id
- this.initEventChangeEcharts()
+ this.initEventChangeEcharts(this.caseInfoType)
this.initEquipmentEcharts(this.linetype)
@@ -290,6 +366,7 @@
}
rightTiming = setInterval(async () => {
+ this.initEventChangeEcharts(this.caseInfoType)
this.initEquipmentEcharts(this.linetype)
}, 600000)
},
@@ -408,11 +485,12 @@
// 获取警情统计值
getCaseAll (start, end) {
- const caseAll = getCaseAll(
+ getCaseAll(
start,
end,
this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
).then((res) => {
+ let obj = {}
if (res.data.timeList) {
let yDataList = {}
yDataList.dqList = res.data.dqList.reduce(
@@ -444,44 +522,131 @@
[]
)
let xData = res.data.timeList.map(item => item.slice(5, 10))
- return { xData, yDataList }
+ obj = { xData, yDataList }
} else {
- return { xData: [], yDataList: {} }
+ obj = { xData: [], yDataList: {} }
}
- })
+ eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))
- return caseAll
+ setTimeout(() => {
+ this.eventChangeEchartsLoading = false
+ }, 500)
+ })
},
- // 初始化警情统计
- async initEventChangeEcharts () {
+ // 获取警情排行统计值
+ getCaseRanking (start, end) {
+ const caseAll = getCaseRanking(
+ start,
+ end,
+ this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
+ ).then((res) => {
+ let data = []
+
+ if (res.data.data) {
+ res.data.data.push({
+ name: 123,
+ count: 1
+ })
+
+ res.data.data.push({
+ name: 456,
+ count: 1
+ })
+
+ res.data.data.push({
+ name: 22,
+ count: 1
+ })
+
+ res.data.data.push({
+ name: 33,
+ count: 1
+ })
+
+ res.data.data.push({
+ name: 55,
+ count: 1
+ })
+
+ res.data.data.push({
+ name: 66,
+ count: 1
+ })
+
+ res.data.data = res.data.data.sort((a, b) => a.value - b.value)
+ res.data.data = res.data.data.map((item, index) => {
+ item.value = item.count
+
+ if (index == 0) {
+ item.itemStyle = {
+ color: '#EB3C5A'
+ }
+ } else if (index == 1) {
+ item.itemStyle = {
+ color: '#FA8331'
+ }
+ } else if (index == 2) {
+ item.itemStyle = {
+ color: '#F7B833'
+ }
+ } else {
+ item.itemStyle = {
+ color: '#395FFD'
+ }
+ }
+
+ return item
+ }).sort((a, b) => b.value - a.value)
+
+ console.log(res.data.data, 465)
+
+ data = res.data.data
+ } else {
+ data = []
+ }
+
+ eventchangemychart.setOption(this.initRankingOption(data))
+
+ setTimeout(() => {
+ this.eventChangeEchartsLoading = false
+ }, 500)
+ })
+ },
+
+ // 初始化警情数量统计
+ async initEventChangeEcharts (type) {
+ this.caseInfoType = type
this.eventChangeEchartsLoading = true
- var chartDom = document.getElementById("EventChangeEcharts")
if (
eventchangemychart != null &&
eventchangemychart != "" &&
eventchangemychart != undefined
- )
+ ) {
+
+ eventchangemychart.clear()
eventchangemychart.dispose()
+ }
+
+ var chartDom = document.getElementById("EventChangeEcharts")
eventchangemychart = this.$echarts.init(chartDom)
const date = this.eventTime.map((item) => {
return this.dateFormat(item)
})
- const optionsData = await this.getCaseAll(date[0], date[1])
+ if (type == 0) {
+ this.getCaseAll(date[0], date[1])
+ } else {
+ this.getCaseRanking(date[0], date[1])
+ }
- eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
-
- setTimeout(() => {
- this.eventChangeEchartsLoading = false
- }, 500)
},
- // 警情统计的options
+ // 警情数量统计的options
initEventChangeOption (xData, yDataList) {
let option
if (xData.length == 0) {
@@ -607,6 +772,147 @@
bottom: "4%",
containLabel: true,
},
+ }
+ }
+
+ return option
+ },
+
+ // 警情排行统计的options
+ initRankingOption (dataArr) {
+ let option
+ if (dataArr.length == 0) {
+ //暂无数据
+ option = {
+ title: {
+ text: "暂无警情排行数据",
+ x: "center",
+ y: "center",
+ textStyle: {
+ color: "#fff",
+ fontSize: fontSize(14),
+ fontWeight: "normal",
+ },
+ },
+ }
+ } else {
+ let seriesData = dataArr.map(item => {
+ return { value: item.value, itemStyle: item.itemStyle }
+ })
+ option = {
+ tooltip: {
+ trigger: "item",
+ formatter:
+ ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
+ },
+ xAxis: {
+ type: "value",
+ splitLine: { show: false },
+ axisLabel: { show: false },
+ axisTick: { show: false },
+ axisLine: { show: false }
+ },
+ yAxis: [
+ {
+ type: "category",
+ inverse: true,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ data: dataArr.map((item) => item.name),
+ axisLabel: {
+ rich: {
+ nt1: {
+ color: "#fff",
+ backgroundColor: '#EB3B5A',
+ width: fontSize(12),
+ height: fontSize(12),
+ fontSize: fontSize(10),
+ align: "center",
+ borderRadius: fontSize(50),
+ padding: [0, 1, 2, 1]
+ },
+ nt2: {
+ color: "#fff",
+ backgroundColor: '#FA8231',
+ width: fontSize(12),
+ height: fontSize(12),
+ fontSize: fontSize(10),
+ align: "center",
+ borderRadius: fontSize(50),
+ padding: [0, 1, 2, 1]
+ },
+ nt3: {
+ color: "#fff",
+ backgroundColor: '#F7B731',
+ width: fontSize(12),
+ height: fontSize(12),
+ fontSize: fontSize(10),
+ align: "center",
+ borderRadius: fontSize(50),
+ padding: [0, 1, 2, 1]
+ },
+ nt: {
+ color: "#fff",
+ backgroundColor: '#00a9c8',
+ width: fontSize(12),
+ height: fontSize(12),
+ fontSize: fontSize(10),
+ align: "center",
+ borderRadius: fontSize(50),
+ padding: [0, 1, 2, 1]
+ }
+ },
+ formatter: function (value, index) {
+ let idx = index + 1
+ if (idx <= 3) {
+ return ["{nt" + idx + "|" + idx + "}"].join("\n")
+ } else {
+ return ["{nt|" + idx + "}"].join("\n")
+ }
+ }
+ }
+ },
+ {//名称
+ type: 'category',
+ offset: -10,
+ position: "left",
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: {
+ color: '#fff',
+ align: "left",
+ verticalAlign: "bottom",
+ lineHeight: fontSize(24),
+ fontSize: fontSize(10)
+ },
+ data: dataArr.reverse().map((item) => item.name),
+ },
+ ],
+ series: [
+ {
+ zlevel: 1,
+ type: "bar",
+ barWidth: fontSize(10),
+ data: seriesData,
+ itemStyle: {
+ normal: {
+ barBorderRadius: fontSize(5)
+ }
+ },
+ label: {
+ show: true,
+ fontSize: fontSize(10),
+ color: "#fff"
+ }
+ }
+ ],
+ grid: {
+ top: "3%",
+ left: "-20%",
+ right: "2%",
+ bottom: "3%",
+ containLabel: true,
+ }
}
}
@@ -1034,7 +1340,6 @@
// margin-left: 8px;
// }
-
:deep(.el-main) {
padding: 0;
}
@@ -1114,7 +1419,7 @@
align-items: center;
justify-content: center;
- &>div {
+ & > div {
height: 22px;
line-height: 22px;
white-space: nowrap;
@@ -1180,33 +1485,32 @@
.duty-information-box {
height: 100%;
- &>div:first-child {
+ & > div:first-child {
background: $table-body-tr-n-color;
}
- &>div:last-child {
+ & > div:last-child {
background: $table-body-tr-2n-color;
}
- &>div {
+ & > div {
display: flex;
height: 50%;
- &>div {
+ & > div {
display: flex;
align-items: center;
}
- &>div:first-child {
+ & > div:first-child {
width: 28%;
justify-content: center;
}
- &>div:last-child {
+ & > div:last-child {
width: 72%;
text-align: left;
}
-
}
}
--
Gitblit v1.9.3