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/styles/media/index.scss | 6
src/views/police/index.vue | 4
src/views/home/components/rightContainer.vue | 436 ++++++++++++++++++++++++++----
src/views/policeInfor/index.vue | 149 ++++++++-
src/api/home/index.js | 18 +
src/views/activity/index.vue | 206 +++++++++----
6 files changed, 649 insertions(+), 170 deletions(-)
diff --git a/src/api/home/index.js b/src/api/home/index.js
index 9e4b50c..91ad0d8 100644
--- a/src/api/home/index.js
+++ b/src/api/home/index.js
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-12-27 14:19:19
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-02-11 14:54:32
+ * @LastEditTime: 2023-05-08 09:55:58
* @FilePath: \srs-police-affairs\src\api\home\index.js
* @Description:
*
@@ -102,7 +102,7 @@
})
}
-// 案件统计接口查询
+// 案件统计数量接口查询
export const getCaseAll = (start, end, jjdwbh = '') => {
return request({
url: `/api/alarm/alarm/statisticsAlarm`,
@@ -115,6 +115,20 @@
})
}
+// 案件统计排行接口查询
+export const getCaseRanking = (start, end, dwbh = '') => {
+ return request({
+ url: `/api/alarm/alarm/getAlarmVillageOrderList`,
+ method: 'get',
+ params: {
+ start,
+ end,
+ dwbh
+ }
+ })
+}
+
+
// 获取设备统计数据
export const getEquipment = (jjdwbh = '') => {
return request({
diff --git a/src/styles/media/index.scss b/src/styles/media/index.scss
index 6bb9596..c6893b2 100644
--- a/src/styles/media/index.scss
+++ b/src/styles/media/index.scss
@@ -225,12 +225,6 @@
}
- .alert-box {
- .echarts-box {
- height: 100%;
- }
- }
-
.person-box {
.back {
top: countSizeVh(102);
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index a8d8709..7a4a5eb 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-24 16:36:55
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-04-18 20:12:05
+ * @LastEditTime: 2023-05-08 09:37:39
* @FilePath: \srs-police-affairs\src\views\activity\index.vue
* @Description:
*
@@ -17,39 +17,55 @@
<div>
<div class="category">名称：</div>
<div class="category-value search-activity">
- <el-input size="small" placeholder="请输入…" v-model="searchActivity" @change="activeSearch" clearable>
- </el-input>
+ <el-input
+ size="small"
+ placeholder="请输入…"
+ v-model="searchActivity"
+ @change="activeSearch"
+ clearable
+ ></el-input>
</div>
</div>
</div>
<div class="result-content">
<div class="table-box">
- <el-collapse v-show="activityList.length > 0" v-model="activeActivityIndex" accordion
- @change="handleActivityChange" class="activity-list">
- <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
- <template slot="title">
- {{ item.name }}({{ item.plotType == 1 ? '二维' : '三维' }})
- </template>
+ <el-collapse
+ v-show="activityList.length > 0"
+ v-model="activeActivityIndex"
+ accordion
+ @change="handleActivityChange"
+ class="activity-list"
+ >
+ <el-collapse-item
+ v-for="item in activityList"
+ :name="item.id"
+ :key="item.id"
+ >
+ <template
+ slot="title"
+ >{{ item.name }}({{ item.plotType == 1 ? '二维' : '三维' }})</template>
<el-collapse v-model="activeActivityElementIndex" accordion>
<el-collapse-item title="要素资源" :name="yszy">
<el-collapse v-model="elementPoliceIndex" accordion>
<el-collapse-item title="警车" :name="jc">
<ul>
- <li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
- @click="carOrPoliceItemClick(carItem.position, 'point')">
- {{ carItem.serialNumber }}
- </li>
+ <li
+ v-for="carItem in chooseActivityPoliceCarList"
+ :key="carItem.id"
+ @click="carOrPoliceItemClick(carItem.position, 'point')"
+ >{{ carItem.serialNumber }}</li>
</ul>
</el-collapse-item>
</el-collapse>
<el-collapse v-model="elementPoliceCarIndex" accordion>
<el-collapse-item title="警员" :name="jy">
<ul>
- <li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
- @click="carOrPoliceItemClick(policeItem.position, 'point')">
- {{ policeItem.policeName }}
- </li>
+ <li
+ v-for="policeItem in chooseActivityPoliceManList"
+ :key="policeItem.id"
+ @click="carOrPoliceItemClick(policeItem.position, 'point')"
+ >{{ policeItem.policeName }}</li>
</ul>
</el-collapse-item>
</el-collapse>
@@ -57,10 +73,13 @@
<el-collapse v-model="elementCustomIndex" accordion>
<el-collapse-item title="自定义图片标注" :name="wxrw">
<ul>
- <li v-for="(item, index) in customList" :key="item.id"
- @click="carOrPoliceItemClick(item.position, 'people')">
+ <li
+ v-for="(item, index) in customList"
+ :key="item.id"
+ @click="carOrPoliceItemClick(item.position, 'people')"
+ >
{{ item.remark && item.remark.trim() != '' ? item.remark :
- `自定义图片标注${index + 1}` }}
+ `自定义图片标注${index + 1}` }}
</li>
</ul>
</el-collapse-item>
@@ -69,65 +88,94 @@
<el-collapse v-model="elementNormalIndex" accordion>
<el-collapse-item title="其他" :name="wxrw">
<ul>
- <li v-for="(item, index) in restList" :key="item.id"
- @click="carOrPoliceItemClick(item.position, 'people')">
+ <li
+ v-for="(item, index) in restList"
+ :key="item.id"
+ @click="carOrPoliceItemClick(item.position, 'people')"
+ >
{{ item.remark && item.remark.trim() != '' ? item.remark :
- restCurType(item, index) }}
+ restCurType(item, index) }}
</li>
</ul>
</el-collapse-item>
</el-collapse>
-
</el-collapse-item>
</el-collapse>
<el-collapse v-model="activeActivityArrowIndex" accordion>
<el-collapse-item title="作战标绘" :name="zzbh">
- <el-collapse v-model="attackArrowIndex" accordion v-show="item.plotType == 1">
+ <el-collapse
+ v-model="attackArrowIndex"
+ accordion
+ v-show="item.plotType == 1"
+ >
<el-collapse-item title="进攻箭头" :name="jgjt">
<ul>
- <li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
- @click="carOrPoliceItemClick(attackItem.position, 'arrow')">
+ <li
+ v-for="(attackItem, index) in attackArrowList"
+ :key="attackItem.id"
+ @click="carOrPoliceItemClick(attackItem.position, 'arrow')"
+ >
{{ attackItem.remark && attackItem.remark.trim() != '' ?
- attackItem.remark : `进攻箭头${index +
- 1}` }}
+ attackItem.remark : `进攻箭头${index +
+ 1}` }}
</li>
</ul>
</el-collapse-item>
</el-collapse>
- <el-collapse v-model="doubleArrowIndex" accordion v-show="item.plotType == 1">
+ <el-collapse
+ v-model="doubleArrowIndex"
+ accordion
+ v-show="item.plotType == 1"
+ >
<el-collapse-item title="双箭头" :name="sjt">
<ul>
- <li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
- @click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
+ <li
+ v-for="(doubleItem, index) in doubleArrowList"
+ :key="doubleItem.id"
+ @click="carOrPoliceItemClick(doubleItem.position, 'arrow')"
+ >
{{ doubleItem.remark && doubleItem.remark.trim() != '' ?
- doubleItem.remark : `双箭头${index
- + 1}` }}
+ doubleItem.remark : `双箭头${index
+ + 1}` }}
</li>
</ul>
</el-collapse-item>
</el-collapse>
- <el-collapse v-model="fineArrowIndex" accordion v-show="item.plotType == 1">
+ <el-collapse
+ v-model="fineArrowIndex"
+ accordion
+ v-show="item.plotType == 1"
+ >
<el-collapse-item title="直箭头" :name="zjt">
<ul>
- <li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
- @click="carOrPoliceItemClick(fineItem.position, 'arrow')">
+ <li
+ v-for="(fineItem, index) in fineArrowList"
+ :key="fineItem.id"
+ @click="carOrPoliceItemClick(fineItem.position, 'arrow')"
+ >
{{ fineItem.remark && fineItem.remark.trim() != '' ? fineItem.remark :
- `直箭头${index +
- 1}` }}
+ `直箭头${index +
+ 1}` }}
</li>
</ul>
</el-collapse-item>
</el-collapse>
- <el-collapse v-model="tailedAttackArrowIndex" accordion v-show="item.plotType == 1">
+ <el-collapse
+ v-model="tailedAttackArrowIndex"
+ accordion
+ v-show="item.plotType == 1"
+ >
<el-collapse-item title="燕尾箭头" :name="ywjt">
<ul>
- <li v-for="(tailedItem, index) in tailedAttackArrowList"
+ <li
+ v-for="(tailedItem, index) in tailedAttackArrowList"
:key="tailedItem.id"
- @click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
+ @click="carOrPoliceItemClick(tailedItem.position, 'arrow')"
+ >
{{ tailedItem.remark && tailedItem.remark.trim() != '' ?
- tailedItem.remark : `燕尾箭头${index
- + 1}` }}
+ tailedItem.remark : `燕尾箭头${index
+ + 1}` }}
</li>
</ul>
</el-collapse-item>
@@ -135,11 +183,14 @@
<el-collapse v-model="polygonArrowIndex" accordion>
<el-collapse-item title="多边形" :name="dbx">
<ul>
- <li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
- @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
+ <li
+ v-for="(polygonItem, index) in polygonList"
+ :key="polygonItem.id"
+ @click="carOrPoliceItemClick(polygonItem.position, 'polygon')"
+ >
{{ polygonItem.remark && polygonItem.remark.trim() != '' ?
- polygonItem.remark :
- `多边形${index + 1}` }}
+ polygonItem.remark :
+ `多边形${index + 1}` }}
</li>
</ul>
</el-collapse-item>
@@ -147,11 +198,14 @@
<el-collapse v-model="borkenlineIndex" accordion>
<el-collapse-item title="折线" :name="dbx">
<ul>
- <li v-for="(polygonItem, index) in borkenList" :key="polygonItem.id"
- @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
+ <li
+ v-for="(polygonItem, index) in borkenList"
+ :key="polygonItem.id"
+ @click="carOrPoliceItemClick(polygonItem.position, 'polygon')"
+ >
{{ polygonItem.remark && polygonItem.remark.trim() != '' ?
- polygonItem.remark : `折线${index
- + 1}` }}
+ polygonItem.remark : `折线${index
+ + 1}` }}
</li>
</ul>
</el-collapse-item>
@@ -161,10 +215,13 @@
<el-collapse v-model="activeActivityLineIndex" accordion>
<el-collapse-item title="巡逻路线" :name="xllx">
<ul>
- <li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
- @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')">
+ <li
+ v-for="(lineItem, index) in chooseActivityLineList"
+ :key="lineItem.id"
+ @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')"
+ >
{{ lineItem.remark && lineItem.remark.trim() != '' ? lineItem.remark :
- `路线${index + 1}` }}
+ `路线${index + 1}` }}
</li>
</ul>
</el-collapse-item>
@@ -175,15 +232,26 @@
<div v-show="activityList == 0" class="no-data">暂无数据</div>
</div>
<div class="pages all-pagination-sty">
- <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
- :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ :page-size="pagesize"
+ :page-count="pagesCount"
+ :current-page="currentPage"
+ @current-change="handleCurrentChange"
+ ></el-pagination>
</div>
</div>
</div>
<div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
- <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"
- @check-change="treeCheckChange"></el-tree>
+ <el-tree
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ @check="treeCheckClick"
+ @check-change="treeCheckChange"
+ ></el-tree>
</div>
<map-search-box></map-search-box>
@@ -757,7 +825,7 @@
if (data != []) {
data.some(item => {
return item.label == '视频监控'
- }) ? this.iconImageShowOrHidden('/img/icon/camera.png', '', cameraList, 'activityCameraLayers') : this.clearLayerIconForMap('activityCameraLayers')
+ }) ? this.iconImageShowOrHidden('/img/icon/video.png', '/img/icon/video-off.png', cameraList, 'activityCameraLayers') : this.clearLayerIconForMap('activityCameraLayers')
data.some(item => {
return item.label == '警车'
@@ -809,6 +877,12 @@
if (data.length > 0) {
data.forEach(item => {
if (item.longitude && item.latitude) {
+ let url = item.clockStatus == 0 ? img : imgOk
+
+ if (img == '/img/icon/video.png') {
+ url = item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png'
+ }
+
this.$EventBus.$emit('layerPointAdd', {
layerName: layerName,
type: "billboard",
@@ -818,7 +892,7 @@
lng: item.longitude,
lat: item.latitude,
alt: 1,
- url: item.clockStatus == 0 ? img : imgOk
+ url
},
})
}
@@ -1092,11 +1166,11 @@
.search-box {
padding: 0 10px;
- &>div:first-child {
+ & > div:first-child {
margin-top: 0;
}
- &>div {
+ & > div {
margin-top: 10px;
display: flex;
align-items: center;
@@ -1188,7 +1262,7 @@
border-radius: 8px;
.row-content {
- &>div {
+ & > div {
display: flex;
line-height: 28px;
@@ -1277,12 +1351,8 @@
left: 10px;
}
-
-
.item-new-width {
width: 25vw;
}
-
-
}
</style>
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;
}
-
}
}
diff --git a/src/views/police/index.vue b/src/views/police/index.vue
index 133429f..996e019 100644
--- a/src/views/police/index.vue
+++ b/src/views/police/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-05-05 10:58:05
+ * @LastEditTime: 2023-05-08 09:30:10
* @FilePath: \srs-police-affairs\src\views\police\index.vue
* @Description: 辖区管理
*
@@ -442,7 +442,7 @@
type: 'billboard',
params: {
...item,
- url: '/img/icon/camera.png',
+ url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
setStyle: {
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
diff --git a/src/views/policeInfor/index.vue b/src/views/policeInfor/index.vue
index e068b25..be1af58 100644
--- a/src/views/policeInfor/index.vue
+++ b/src/views/policeInfor/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-05-06 21:39:45
+ * @LastEditTime: 2023-05-08 09:19:32
* @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
* @Description: 辖区管理
*
@@ -16,40 +16,82 @@
<div class="search-item-box">
<span>警情类型：</span>
- <el-select style="flex: 1;" size="small" v-model="policeInforValue" @change="policeTypeChange"
- placeholder="请选择">
- <el-option v-for="item in policeInforOptions" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ style="flex: 1;"
+ size="small"
+ v-model="policeInforValue"
+ @change="policeTypeChange"
+ placeholder="请选择"
+ >
+ <el-option
+ v-for="item in policeInforOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="search-item-box">
- <el-date-picker size="mini" :clearable="false" v-model="currentTime" type="daterange" align="center"
- unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
- @change="datePickerChange" :picker-options="pickerOptions"></el-date-picker>
+ <el-date-picker
+ size="mini"
+ :clearable="false"
+ v-model="currentTime"
+ type="daterange"
+ align="center"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ @change="datePickerChange"
+ :picker-options="pickerOptions"
+ ></el-date-picker>
</div>
</div>
<div class="police-info">
- <el-table :data="historyPoliceInforData" style="width: 100%" :height="currentTableHeight"
+ <el-table
+ :data="historyPoliceInforData"
+ style="width: 100%"
+ :height="currentTableHeight"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
- :row-class-name="tableRowClassName" class="police-infor-table" @cell-mouse-enter="tableEnter"
- @cell-mouse-leave="tabelLeave">
+ :row-class-name="tableRowClassName"
+ class="police-infor-table"
+ @cell-mouse-enter="tableEnter"
+ @cell-mouse-leave="tabelLeave"
+ >
<template slot="empty">
<div>{{ historyEmptyText }}</div>
</template>
- <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
- min-width="80%"></el-table-column>
+ <el-table-column
+ prop="JJDWMC"
+ :show-overflow-tooltip="true"
+ label="接警单位"
+ min-width="80%"
+ ></el-table-column>
<el-table-column prop="BJSJ" label="报警时间" min-width="50%"></el-table-column>
<el-table-column prop="BJLX" label="报警类型"></el-table-column>
<el-table-column label="操作" align="center" min-width="32%">
<template slot-scope="scope">
- <el-button v-if="!whetherPosition(scope.row)" @click="clickData(scope.row)" type="text"
- size="small" title="定位">
- <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
+ <el-button
+ v-if="!whetherPosition(scope.row)"
+ @click="clickData(scope.row)"
+ type="text"
+ size="small"
+ title="定位"
+ >
+ <i
+ class="el-icon-location"
+ :style="{ color: positionColor(scope.row) }"
+ ></i>
</el-button>
- <el-buttonalign-justify @click="siteClick(scope.row)" type="text" size="small" title="详情">
+ <el-buttonalign-justify
+ @click="siteClick(scope.row)"
+ type="text"
+ size="small"
+ title="详情"
+ >
<i class="el-icon-document"></i>
</el-buttonalign-justify>
</template>
@@ -58,12 +100,24 @@
</div>
</div>
- <el-dialog title="警情信息" :visible.sync="policeSituationVisible" :modal-append-to-body="false"
- :before-close="policeSituationBeforeClose" :modal="true" :close-on-click-modal="false"
- class="policeSituation-details-box">
+ <el-dialog
+ title="警情信息"
+ :visible.sync="policeSituationVisible"
+ :modal-append-to-body="false"
+ :before-close="policeSituationBeforeClose"
+ :modal="true"
+ :close-on-click-modal="false"
+ class="policeSituation-details-box"
+ >
<div class="btn-change">
- <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
- <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
+ <div
+ :class="{ on: policeInformationType == '接警信息' }"
+ @click="alarmOrActAsPolice('接警信息')"
+ >接警信息</div>
+ <div
+ :class="{ on: policeInformationType == '出警信息' }"
+ @click="alarmOrActAsPolice('出警信息')"
+ >出警信息</div>
</div>
<div v-show="policeInformationType == '接警信息'" class="box">
@@ -125,7 +179,10 @@
</div>
</div>
- <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
+ <div
+ v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
+ class="box"
+ >
<div class="item">
<div>处警单位编号:</div>
<div>{{ CJdata.CJDWBH }}</div>
@@ -182,11 +239,17 @@
</div>
</div>
- <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无警情</div>
+ <div
+ v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
+ class="box no-data"
+ >暂无警情</div>
</el-dialog>
- <div class="cur-tooltip" v-show="currentTooltip"
- :style="{ top: currentPointerPosition.y + 'px', left: currentPointerPosition.x + 'px' }">
+ <div
+ class="cur-tooltip"
+ v-show="currentTooltip"
+ :style="{ top: currentPointerPosition.y + 'px', left: currentPointerPosition.x + 'px' }"
+ >
<div class="type-name">报警内容</div>
<div class="type-content">{{ currentBJNR }}</div>
</div>
@@ -639,6 +702,8 @@
this.realEmptyText = "暂无历史警情信息"
}
+ this.addPoliceInforSiteLayer(this.historyPoliceInforData)
+
setTimeout(() => {
loading && loading.close()
}, 500)
@@ -733,6 +798,38 @@
// })
},
+ addPoliceInforSiteLayer (data) {
+ this.clearLayer()
+ let policeInfoPositionList = []
+
+ data.forEach((item, index) => {
+ if (item.lng && item.lng != undefined && item.lng != '') {
+ let center = new global.DC.Position(Number(item.lng), Number(item.lat))
+ let point = new global.DC.PointPrimitive(center)
+ policeInfoPositionList.push(center)
+ let num = 0
+
+ timer[index] = setInterval(() => {
+ num++
+ if (num >= 10) {
+ num = 0
+ }
+
+ point.setStyle({
+ outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
+ outlineWidth: num,//边框大小，
+ color: global.DC.Color.RED
+ })
+ }, 100)
+
+ point.attrParams = item
+ point.on(global.DC.MouseEventType.CLICK, this.siteClick)
+ policeInforSiteLayer.addOverlay(point)
+ }
+ })
+ },
+
+
/**
* @description: 警情闪烁点的点击事件
* @param {*} e
--
Gitblit v1.9.3