From f13afcb61276061871b30bce17a7877287df0b67 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 20 Jan 2024 09:56:43 +0800
Subject: [PATCH] 1
---
src/views/home/components/rightContainer.vue | 376 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 211 insertions(+), 165 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index cda0565..99b3c85 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -6,37 +6,16 @@
<div>值班信息(当日)</div>
</div>
- <div class="table-box" v-show="!showMJL">
- <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)"
- >
- <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"
- >
- <div class="point" @click="getSchedlingList(item)"></div>
- </el-tooltip>
+ <div class="duty-information-box" v-show="!showMJL">
+ <div v-for="item in schedulingList" :key="item.id">
+ <div>
+ <span>{{ item.type }}</span>
+ </div>
+ <div>
+ <span>{{ item.person }}</span>
+ </div>
</div>
+ <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
</div>
<div class="duty-information-box" v-show="showMJL">
@@ -56,23 +35,15 @@
<span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
</div>
</div>
+ <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</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>
@@ -82,40 +53,22 @@
<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" :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 class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
+ <div class="tab-title-small">社区警情排行</div>
+ </div>
+ <div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }" @click="initEventChangeEcharts(2)">
+ <div class="tab-title-small">辖区警情排行</div>
</div>
</div>
<div id="EventChangeEcharts" class="echarts-box"></div>
@@ -123,19 +76,10 @@
</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>
@@ -171,25 +115,13 @@
<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>
@@ -198,19 +130,10 @@
</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>
@@ -241,7 +164,7 @@
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"
-import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"
+import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"
const timeEvents = []
@@ -257,33 +180,41 @@
pickerOptions: {
shortcuts: [
{
- text: "最近一周",
+ text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
- picker.$emit("pick", [start, end])
- },
+ picker.$emit('pick', [start, end])
+ }
},
{
- text: "最近一个月",
+ text: '最近两周',
+ onClick (picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
- picker.$emit("pick", [start, end])
- },
+ picker.$emit('pick', [start, end])
+ }
},
{
- text: "最近三个月",
+ text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
- picker.$emit("pick", [start, end])
- },
- },
- ],
+ picker.$emit('pick', [start, end])
+ }
+ }]
},
regionTotal: 0,
linetype: 0,
@@ -411,13 +342,13 @@
} else {
const params = {
sameday: 1,
+ isPage: 1
}
this.showMJL = false
- getSchedulingList(1, 100, params).then((res) => {
- this.schedulingList = res.data.data.records
+ getSchedulingList(params).then((res) => {
+ this.schedulingList = res.data.data
})
-
setTimeout(() => {
this.schedulingNoDataText = ' '
@@ -428,10 +359,7 @@
}, 200)
}
}, 500)
-
-
}
-
},
echartsResize () {
@@ -448,18 +376,14 @@
})
eventchangemychart.clear()
- const optionsData = await this.getCaseAll(date[0], date[1])
- eventchangemychart.showLoading({
- text: '拼命加载中',
- color: '#c23531',
- textColor: '#FFF',
- maskColor: 'rgba(0, 0, 0, 0.2)',
- zlevel: 0,
- })
- setTimeout(() => {
- eventchangemychart.hideLoading()
- eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
- }, 500)
+
+ if (this.caseInfoType == 0) {
+ this.getCaseAll(date[0], date[1])
+ } else if (this.caseInfoType == 1) {
+ this.getCaseRanking(date[0], date[1])
+ } else {
+ this.getCaseRankingArea(date[0], date[1])
+ }
},
// 设置默认时间
@@ -492,6 +416,7 @@
).then((res) => {
let obj = {}
if (res.data.timeList) {
+ console.log(res.data, 1111)
let yDataList = {}
yDataList.dqList = res.data.dqList.reduce(
(previous, current) => {
@@ -521,6 +446,34 @@
},
[]
)
+ yDataList.qjList = res.data.qjList.reduce(
+ (previous, current) => {
+ previous.push(current.count)
+ return previous
+ },
+ []
+ )
+ yDataList.sdList = res.data.sdList.reduce(
+ (previous, current) => {
+ previous.push(current.count)
+ return previous
+ },
+ []
+ )
+ yDataList.sduList = res.data.sduList.reduce(
+ (previous, current) => {
+ previous.push(current.count)
+ return previous
+ },
+ []
+ )
+ yDataList.shList = res.data.shList.reduce(
+ (previous, current) => {
+ previous.push(current.count)
+ return previous
+ },
+ []
+ )
let xData = res.data.timeList.map(item => item.slice(5, 10))
obj = { xData, yDataList }
} else {
@@ -535,7 +488,7 @@
})
},
- // 获取警情排行统计值
+ // 获取警情社区排行统计值
getCaseRanking (start, end) {
getCaseRanking(
start,
@@ -545,8 +498,8 @@
let data = []
if (res.data.data) {
- res.data.data = res.data.data.sort((a, b) => a.value - b.value)
- res.data.data = res.data.data.map((item, index) => {
+ res.data.data = res.data.data.sort((a, b) => b.value - a.value)
+ res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
item.value = item.count
if (index == 0) {
@@ -570,7 +523,55 @@
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)
+ })
+ },
+
+ // 获取警情辖区排行统计值
+ getCaseRankingArea (start, end) {
+ getCaseRankingArea(
+ start,
+ end,
+ this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
+ ).then((res) => {
+ let data = []
+ if (res.data.data) {
+ res.data.data = res.data.data.sort((a, b) => b.num - a.num)
+ res.data.data = res.data.data.filter((item) => {
+ return 'num' in item && 'police_station_name' in item
+ }).filter((item, index) => index < 8).map((item, index) => {
+ item.value = item.num
+ item.name = item.police_station_name
+
+ 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
+ })
data = res.data.data
} else {
@@ -610,10 +611,11 @@
if (type == 0) {
this.getCaseAll(date[0], date[1])
- } else {
+ } else if (type == 1) {
this.getCaseRanking(date[0], date[1])
+ } else {
+ this.getCaseRankingArea(date[0], date[1])
}
-
},
// 警情数量统计的options
@@ -655,7 +657,7 @@
},
},
legend: {
- data: ['盗窃', '诈骗', '纠纷', '其他'],
+ data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
textStyle: {
color: "#fff"
}
@@ -717,7 +719,7 @@
// },
},
{
- name: '诈骗',
+ name: '涉诈',
data: yDataList.zpList,
type: "line",
smooth: true,
@@ -733,10 +735,35 @@
data: yDataList.qtList,
type: "line",
smooth: true,
+ },
+ {
+ name: '求助',
+ data: yDataList.qjList,
+ type: "line",
+ smooth: true,
+ },
+ {
+ name: '涉毒',
+ data: yDataList.sduList,
+ type: "line",
+ smooth: true,
+ },
+ {
+ name: '涉赌',
+ data: yDataList.sdList,
+ type: "line",
+ smooth: true,
+ },
+ {
+ name: '涉黄',
+ data: yDataList.shList,
+ type: "line",
+ smooth: true,
}
+
],
grid: {
- top: "4%",
+ top: "24%",
left: "3%",
right: "2%",
bottom: "4%",
@@ -769,9 +796,19 @@
let seriesData = dataArr.map(item => {
return { value: item.value, itemStyle: item.itemStyle }
})
+ let xData = dataArr.map((item) => {
+ if (item.name.length > 5) {
+ let name = item.name.substring(0, 6) + '…'
+
+ return name
+ } else {
+ return item.name
+ }
+ })
option = {
tooltip: {
trigger: "item",
+ confine: true,
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>',
},
@@ -788,7 +825,7 @@
inverse: true,
axisLine: { show: false },
axisTick: { show: false },
- data: dataArr.map((item) => item.name),
+ data: dataArr.map(item => item.name),
axisLabel: {
rich: {
nt1: {
@@ -855,7 +892,7 @@
lineHeight: fontSize(24),
fontSize: fontSize(10)
},
- data: dataArr.reverse().map((item) => item.name),
+ data: xData.reverse(),
},
],
series: [
@@ -878,7 +915,7 @@
],
grid: {
top: "3%",
- left: "-20%",
+ left: "-14%",
right: "2%",
bottom: "3%",
containLabel: true,
@@ -892,14 +929,14 @@
// 现有设备统计
getEquipment () {
const typeData = {
- carCount: "车辆",
+ carCount: "警车",
monitorCount: "摄像头",
phoneCount: "执法记录仪",
recorderCount: "手台",
}
const typeIndexData = {
- 车辆: 0,
+ 警车: 0,
摄像头: 1,
手台: 2,
执法记录仪: 3,
@@ -1389,7 +1426,7 @@
align-items: center;
justify-content: center;
- & > div {
+ &>div {
height: 22px;
line-height: 22px;
white-space: nowrap;
@@ -1455,33 +1492,42 @@
.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;
}
}
+
+ .no-zb-data {
+ width: 100%;
+ height: 100%;
+ background: transparent !important;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
}
#peopleList {
--
Gitblit v1.9.3