|
|
|
|
@ -1,167 +1,160 @@
|
|
|
|
|
<template> |
|
|
|
|
<el-scrollbar height="100vh"> |
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<datav-header /> |
|
|
|
|
<main> |
|
|
|
|
<el-row :gutter="16"> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<datav-card title="内部视频"> |
|
|
|
|
<div class="row mt-4 mb-20"> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>视频总数</label> |
|
|
|
|
<span>107</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>在线数</label> |
|
|
|
|
<span>97</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>在线率</label> |
|
|
|
|
<span>91%</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="mb-12"> |
|
|
|
|
<video |
|
|
|
|
width="100%" |
|
|
|
|
height="250" |
|
|
|
|
controls="controls" |
|
|
|
|
autoplay |
|
|
|
|
> |
|
|
|
|
<source src="/mp4/1.mp4" type="video/ogg" /> |
|
|
|
|
</video> |
|
|
|
|
</div> |
|
|
|
|
<el-row :gutter="12"> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/1.png" class="active" alt="" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/2.jpg" alt="" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/3.jpeg" alt="" /> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</datav-card> |
|
|
|
|
<datav-card title="问题数排名"> |
|
|
|
|
<datav-chart-bar |
|
|
|
|
sub-title="问题数" |
|
|
|
|
:data="data1" |
|
|
|
|
:max="11" |
|
|
|
|
/> |
|
|
|
|
<div |
|
|
|
|
class="flex tab-title flex center mt-20" |
|
|
|
|
style="margin-bottom: 20px" |
|
|
|
|
> |
|
|
|
|
<div class="tab-title-item active"> |
|
|
|
|
分县市局 |
|
|
|
|
</div> |
|
|
|
|
<div class="tab-title-item">局属单位</div> |
|
|
|
|
</div> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="datav-col"> |
|
|
|
|
<label for="">统计周期：</label> |
|
|
|
|
<span>2024年01月01日 - 2024年08月30日</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-42"> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="98" |
|
|
|
|
title="发现问题数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="10" |
|
|
|
|
title="整改问题数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="22" |
|
|
|
|
title="涉及单位数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="121" |
|
|
|
|
title="涉及人数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="10" |
|
|
|
|
value-unit="%" |
|
|
|
|
title="整改率" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 420px" |
|
|
|
|
:option="option" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
<datav-card title="问题趋势"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 250px" |
|
|
|
|
:option="option1" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<datav-card title="实时预警"> |
|
|
|
|
<el-scrollbar height="450px"> |
|
|
|
|
<div class="message message-error"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ）   “民警单人询（讯）问”的违规问题 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>芙蓉分局定王台派出所</span> |
|
|
|
|
<span>2024-11-11 19:16</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message message-info"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）  民警单人询（讯）问”的违规问题。 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>望城区公安局法制大队</span> |
|
|
|
|
<span>2024-11-18 11:12</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所）  同时讯（询）问多名嫌疑对象 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>芙蓉分局蓉园派出所</span> |
|
|
|
|
<span>2024-11-14 10:00</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队）  “民警单人询（讯）问”的违规问题 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>开福分局法制大队</span> |
|
|
|
|
<span>2024-11-15 15:51</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</datav-card> |
|
|
|
|
<datav-card title="问题类型占比"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 300px" |
|
|
|
|
:option="option2" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</main> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<el-scrollbar height="100vh"> |
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<datav-header/> |
|
|
|
|
<main> |
|
|
|
|
<el-row :gutter="16"> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<datav-card title="内部视频"> |
|
|
|
|
<div class="row mt-4 mb-20"> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>视频总数</label> |
|
|
|
|
<span>107</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>在线数</label> |
|
|
|
|
<span>97</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="col col-8"> |
|
|
|
|
<label>在线率</label> |
|
|
|
|
<span>91%</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="mb-12"> |
|
|
|
|
<video |
|
|
|
|
width="100%" |
|
|
|
|
height="250" |
|
|
|
|
controls="controls" |
|
|
|
|
autoplay |
|
|
|
|
> |
|
|
|
|
<source src="/mp4/1.mp4" type="video/ogg"/> |
|
|
|
|
</video> |
|
|
|
|
</div> |
|
|
|
|
<el-row :gutter="12"> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/1.png" class="active" alt=""/> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/2.jpg" alt=""/> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<img src="/imgs/datav/3.jpeg" alt=""/> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</datav-card> |
|
|
|
|
<datav-card title="问题数排名" style="height: 370px;"> |
|
|
|
|
<datav-chart-bar |
|
|
|
|
sub-title="问题数" |
|
|
|
|
:data="data1" |
|
|
|
|
:max="11" |
|
|
|
|
:color="colors" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="datav-col"> |
|
|
|
|
<label for="">统计周期：</label> |
|
|
|
|
<span>2024年01月01日 - 2024年08月30日</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-42"> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="135" |
|
|
|
|
title="发现问题数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="135" |
|
|
|
|
title="整改问题数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="89" |
|
|
|
|
title="涉及单位数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="152" |
|
|
|
|
title="涉及人数" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
<datav-statistic |
|
|
|
|
:value="100" |
|
|
|
|
value-unit="%" |
|
|
|
|
title="整改率" |
|
|
|
|
style="width: 20%" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 420px" |
|
|
|
|
:option="option" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
<datav-card title="问题趋势"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 250px" |
|
|
|
|
:option="option1" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<datav-card title="实时预警"> |
|
|
|
|
<el-scrollbar height="450px"> |
|
|
|
|
<div class="message message-error"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ）   “民警单人询（讯）问”的违规问题 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>芙蓉分局定王台派出所</span> |
|
|
|
|
<span>2024-11-18 20:12</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message message-info"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）  民警单人询（讯）问”的违规问题。 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>望城区公安局法制大队</span> |
|
|
|
|
<span>2024-11-18 19:12</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所）  同时讯（询）问多名嫌疑对象 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>芙蓉分局蓉园派出所</span> |
|
|
|
|
<span>2024-11-18 16:12</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="message"> |
|
|
|
|
<div class="message-title">待处理</div> |
|
|
|
|
<div> |
|
|
|
|
开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队）  “民警单人询（讯）问”的违规问题 |
|
|
|
|
</div> |
|
|
|
|
<div class="message-footer flex between"> |
|
|
|
|
<span>开福分局法制大队</span> |
|
|
|
|
<span>2024-11-18 15:12</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</datav-card> |
|
|
|
|
<datav-card title="问题类型占比"> |
|
|
|
|
<v-charts |
|
|
|
|
style="height: 300px" |
|
|
|
|
:option="option2" |
|
|
|
|
autoresize |
|
|
|
|
/> |
|
|
|
|
</datav-card> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</main> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</template> |
|
|
|
|
<script setup> |
|
|
|
|
import changshaMap from "@/assets/data/changsha.json"; |
|
|
|
|
@ -170,229 +163,447 @@ import vCharts from "vue-echarts";
|
|
|
|
|
import * as echarts from "echarts/core"; |
|
|
|
|
|
|
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
|
|
|
const option = { |
|
|
|
|
geo: { |
|
|
|
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
|
|
|
map: "changsha", |
|
|
|
|
let gobalTempMapVoList = [ |
|
|
|
|
{ |
|
|
|
|
"name": "芙蓉分局", |
|
|
|
|
"total": 25, |
|
|
|
|
"changedPro": 25, |
|
|
|
|
"relationOrg": 15, |
|
|
|
|
"relationPre": 27, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "天心分局", |
|
|
|
|
"total": 5, |
|
|
|
|
"changedPro": 5, |
|
|
|
|
"relationOrg": 5, |
|
|
|
|
"relationPre": 7, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "岳麓分局", |
|
|
|
|
"total": 22, |
|
|
|
|
"changedPro": 22, |
|
|
|
|
"relationOrg": 12, |
|
|
|
|
"relationPre": 25, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "开福分局", |
|
|
|
|
"total": 30, |
|
|
|
|
"changedPro": 30, |
|
|
|
|
"relationOrg": 16, |
|
|
|
|
"relationPre": 32, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "雨花分局", |
|
|
|
|
"total": 18, |
|
|
|
|
"changedPro": 18, |
|
|
|
|
"relationOrg": 12, |
|
|
|
|
"relationPre": 16, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "望城分局", |
|
|
|
|
"total": 15, |
|
|
|
|
"changedPro": 15, |
|
|
|
|
"relationOrg": 10, |
|
|
|
|
"relationPre": 15, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "浏阳市局", |
|
|
|
|
"total": 13, |
|
|
|
|
"changedPro": 13, |
|
|
|
|
"relationOrg": 11, |
|
|
|
|
"relationPre": 15, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "宁乡市局", |
|
|
|
|
"total": 11, |
|
|
|
|
"changedPro": 11, |
|
|
|
|
"relationOrg": 9, |
|
|
|
|
"relationPre": 13, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
}, { |
|
|
|
|
"name": "长沙县局", |
|
|
|
|
"total": 6, |
|
|
|
|
"changedPro": 6, |
|
|
|
|
"relationOrg": 8, |
|
|
|
|
"relationPre": 9, |
|
|
|
|
"changeRate": 100 |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
const option = ref({ |
|
|
|
|
geo: { |
|
|
|
|
map: "changsha", |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: function (params) { |
|
|
|
|
console.log(params) |
|
|
|
|
const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2))); |
|
|
|
|
if (dataItem) { |
|
|
|
|
return ` |
|
|
|
|
<div class="tooltip"> |
|
|
|
|
<div class="tooltip-title">${dataItem.name}</div> |
|
|
|
|
<div class="tooltip-content"> |
|
|
|
|
<ul class="tooltip-ul" > |
|
|
|
|
<li>发现问题数 <span>${dataItem.total}</span></li> |
|
|
|
|
<li>整改问题数 <span>${dataItem.changedPro}</span></li> |
|
|
|
|
<li>涉及单位数 <span>${dataItem.relationOrg}</span></li> |
|
|
|
|
<li>涉及人数 <span>${dataItem.relationPre}</span></li> |
|
|
|
|
<li>整改率 <span>${dataItem.changeRate}%</span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
} else { |
|
|
|
|
return `<div class="tooltip"> |
|
|
|
|
<div class="tooltip-title">${params.name}</div> |
|
|
|
|
<div class="tooltip-content"> |
|
|
|
|
<ul class="tooltip-ul""> |
|
|
|
|
<li>信访总件数 <span>0</span></li> |
|
|
|
|
<li>国家信访 <span>0</span></li> |
|
|
|
|
<li>公安部信访 <span>0</span></li> |
|
|
|
|
|
|
|
|
|
<li>12337信访 <span>0</span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div>`; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
visualMap: { |
|
|
|
|
type: "piecewise", |
|
|
|
|
bottom: 10, |
|
|
|
|
pieces: [ |
|
|
|
|
{ gte: 85, lte: 100, label: "问题数低于500" }, |
|
|
|
|
{ gte: 65, lte: 85, label: "问题数低于1000" }, |
|
|
|
|
{ gte: 0, lte: 65, label: "问题数低于1000" }, |
|
|
|
|
], |
|
|
|
|
right: 10, // 右边距 |
|
|
|
|
realtime: false, |
|
|
|
|
orient: "horizontal", // 水平显示 |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#fff", // 文字颜色 |
|
|
|
|
}, |
|
|
|
|
calculable: true, |
|
|
|
|
inRange: { |
|
|
|
|
color: ["#D34343", "#F6A149", "#4987F6"], |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
visualMap: { |
|
|
|
|
|
|
|
|
|
type: "piecewise", |
|
|
|
|
bottom: 10, |
|
|
|
|
pieces: [ |
|
|
|
|
{gte: 0, lte: 10, label: "问题数低于500"}, |
|
|
|
|
{gte: 10, lte: 20, label: "问题数介于500-1000"}, |
|
|
|
|
{gte: 30, label: "问题数高于1000"}, |
|
|
|
|
], |
|
|
|
|
right: 10, |
|
|
|
|
realtime: false, |
|
|
|
|
orient: "horizontal", |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
calculable: true, |
|
|
|
|
inRange: { |
|
|
|
|
color: ["#4987F6", "#F6A149", "#D34343",], |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "长沙", |
|
|
|
|
type: "map", |
|
|
|
|
map: "changsha", |
|
|
|
|
hoverAnimation: true, |
|
|
|
|
|
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
color: "white", |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "长沙", |
|
|
|
|
type: "map", |
|
|
|
|
map: "changsha", |
|
|
|
|
hoverAnimation: true, |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
color: "white", |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
areaColor: "#02215E", |
|
|
|
|
borderColor: "#1773c3", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
emphasis: { |
|
|
|
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
|
|
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
|
|
|
borderWidth: 4 // 高亮时边框宽度 |
|
|
|
|
}, |
|
|
|
|
data: gobalTempMapVoList.map(item => ({ |
|
|
|
|
name: item.name, |
|
|
|
|
value: item.totalPro // 将 totalPro 值映射到 value 字段 |
|
|
|
|
})) |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const option1 = ref({ |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: [ |
|
|
|
|
"9/10", |
|
|
|
|
"9/11", |
|
|
|
|
"9/12", |
|
|
|
|
"9/13", |
|
|
|
|
"9/14", |
|
|
|
|
"9/15", |
|
|
|
|
"9/16", |
|
|
|
|
"9/17", |
|
|
|
|
"9/18", |
|
|
|
|
"9/19", |
|
|
|
|
"9/20", |
|
|
|
|
"9/21", |
|
|
|
|
"9/22", |
|
|
|
|
"9/23", |
|
|
|
|
], |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",], |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: "value", |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#193775", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: "value", |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#193775", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'line', |
|
|
|
|
label: { |
|
|
|
|
backgroundColor: '#6a7985' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
smooth: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#28E6FF", |
|
|
|
|
width: 4, |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "rgba(40,230,255,0.47)", // 渐变起始颜色 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: "rgba(40,230,255,0)", // 渐变结束颜色 |
|
|
|
|
}, |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
data: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12], |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
smooth: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#28E6FF", |
|
|
|
|
width: 4, |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "rgba(40,230,255,0.47)", // 渐变起始颜色 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: "rgba(40,230,255,0)", // 渐变结束颜色 |
|
|
|
|
}, |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310, |
|
|
|
|
3000, 3100, 3100, 3100, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const option2 = { |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
radius: ["40%", "70%"], |
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ value: 1048, name: "着装不规范" }, |
|
|
|
|
{ value: 735, name: "看守人员睡岗" }, |
|
|
|
|
{ value: 580, name: "工作人员玩手机" }, |
|
|
|
|
{ value: 484, name: "单人问询" }, |
|
|
|
|
{ value: 300, name: "民警不在岗" }, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "pie", |
|
|
|
|
radius: ["40%", "70%"], |
|
|
|
|
label: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{value: 40, name: "着装不规范"}, |
|
|
|
|
{value: 25, name: "看守人员睡岗"}, |
|
|
|
|
{value: 30, name: "工作人员玩手机"}, |
|
|
|
|
{value: 30, name: "单人问询"}, |
|
|
|
|
{value: 10, name: "民警不在岗"}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "item", |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const data1 = [ |
|
|
|
|
{ |
|
|
|
|
name: "芙蓉分局", |
|
|
|
|
value: 11 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "开福分局", |
|
|
|
|
value: 10 |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
name: "岳麓分局", |
|
|
|
|
value: 9 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "雨花分局", |
|
|
|
|
value: 8 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "望城分局", |
|
|
|
|
value: 8 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "浏阳市局", |
|
|
|
|
value: 7 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "长沙县局", |
|
|
|
|
value: 5 |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
label: "开福分局", |
|
|
|
|
value: 30 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "芙蓉分局", |
|
|
|
|
value: 25 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "岳麓分局", |
|
|
|
|
value: 22 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "雨花分局", |
|
|
|
|
value: 18 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "望城分局", |
|
|
|
|
value: 15 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "浏阳分局", |
|
|
|
|
value: 13 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "宁乡分局", |
|
|
|
|
value: 11 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "长沙县局", |
|
|
|
|
value: 6 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
label: "天心分局", |
|
|
|
|
value: 5 |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const colors = [ |
|
|
|
|
{ |
|
|
|
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
|
|
|
percentage: 80, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
|
|
|
percentage: 60, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", |
|
|
|
|
percentage: 40, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import "@/style/datav.scss"; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
display: block; |
|
|
|
|
border: 1px solid transparent; |
|
|
|
|
&.active { |
|
|
|
|
border-color: #1cd9ff; |
|
|
|
|
} |
|
|
|
|
width: 100%; |
|
|
|
|
display: block; |
|
|
|
|
border: 1px solid transparent; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
border-color: #1cd9ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.message { |
|
|
|
|
padding: 10px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
padding: 10px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
background: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(145, 145, 145, 0) 0%, |
|
|
|
|
rgba(164, 164, 164, 0.26) 98% |
|
|
|
|
); |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(255, 255, 255, 0.28), |
|
|
|
|
rgba(255, 255, 255, 0.26) |
|
|
|
|
) 1 1; |
|
|
|
|
|
|
|
|
|
&.message-error { |
|
|
|
|
background: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(145, 145, 145, 0) 0%, |
|
|
|
|
rgba(164, 164, 164, 0.26) 98% |
|
|
|
|
180deg, |
|
|
|
|
rgba(208, 18, 18, 0) 0%, |
|
|
|
|
rgba(255, 0, 0, 0.26) 100% |
|
|
|
|
); |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(255, 255, 255, 0.28), |
|
|
|
|
rgba(255, 255, 255, 0.26) |
|
|
|
|
) |
|
|
|
|
1 1; |
|
|
|
|
&.message-error { |
|
|
|
|
background: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(208, 18, 18, 0) 0%, |
|
|
|
|
rgba(255, 0, 0, 0.26) 100% |
|
|
|
|
); |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(255, 71, 71, 0.59), |
|
|
|
|
rgba(251, 95, 95, 1) |
|
|
|
|
) |
|
|
|
|
1 1; |
|
|
|
|
.message-title { |
|
|
|
|
color: #ff0017; |
|
|
|
|
} |
|
|
|
|
rgba(255, 71, 71, 0.59), |
|
|
|
|
rgba(251, 95, 95, 1) |
|
|
|
|
) 1 1; |
|
|
|
|
|
|
|
|
|
.message-title { |
|
|
|
|
color: #ff0017; |
|
|
|
|
} |
|
|
|
|
&.message-info { |
|
|
|
|
background: linear-gradient( |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.message-info { |
|
|
|
|
background: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(18, 104, 208, 0) 0%, |
|
|
|
|
rgba(0, 166, 255, 0.26) 100% |
|
|
|
|
); |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(71, 209, 255, 0.28), |
|
|
|
|
rgba(8, 177, 255, 1) |
|
|
|
|
) |
|
|
|
|
1 1; |
|
|
|
|
.message-title { |
|
|
|
|
color: #1cd9ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
180deg, |
|
|
|
|
rgba(71, 209, 255, 0.28), |
|
|
|
|
rgba(8, 177, 255, 1) |
|
|
|
|
) 1 1; |
|
|
|
|
|
|
|
|
|
.message-title { |
|
|
|
|
font-size: 23px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
color: #597ae9; |
|
|
|
|
} |
|
|
|
|
.message-footer { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #597ae9; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #1cd9ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.message-title { |
|
|
|
|
font-size: 23px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
color: #597ae9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.message-footer { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #597ae9; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep() { |
|
|
|
|
// 弹框整体 |
|
|
|
|
.tooltip { |
|
|
|
|
position: relative; |
|
|
|
|
width: 169.88px; |
|
|
|
|
height: 178px; |
|
|
|
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
|
|
|
border: 1px solid #4E8FFF; |
|
|
|
|
margin: -10px -10px -10px -10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//浏阳市局 |
|
|
|
|
.tooltip-title { |
|
|
|
|
width: 169.88px; |
|
|
|
|
height: 43px; |
|
|
|
|
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; /* 水平居中 */ |
|
|
|
|
align-items: center; /* 垂直居中 */ |
|
|
|
|
text-align: center; /* 水平居中 */ |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
line-height: 22px; |
|
|
|
|
border-bottom: 1px solid #253755; /* 设置下边框 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tooltip-content { |
|
|
|
|
width: 170px; |
|
|
|
|
height: 132px; |
|
|
|
|
//font-size: 11px; |
|
|
|
|
margin-top: -12px; |
|
|
|
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul { |
|
|
|
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tooltip-content ul li { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
height: 25px; |
|
|
|
|
color: #597AE9; |
|
|
|
|
font-size: 13px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 数字的span |
|
|
|
|
.tooltip-ul span { |
|
|
|
|
float: right; |
|
|
|
|
width: 30px; |
|
|
|
|
text-align: right; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 13px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 小尖角 */ |
|
|
|
|
.tooltip::before { |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 90px; /* 调整尖角的垂直位置 */ |
|
|
|
|
left: -10px; /* 调整尖角的水平位置 */ |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
//border-top: 10px solid red; /* 顶边颜色 */ |
|
|
|
|
//border-bottom: 10px solid green; /* 底边颜色 */ |
|
|
|
|
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
