supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ok

main
不爱学习的石同学 1 year ago
parent
e58d1bf79c
commit
04180f3142
6 changed files with 661 additions and 406 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/datav/header.vue
  2. 2
      src/views/Home.vue
  3. 15
      src/views/datav/AuditSuper.vue
  4. 8
      src/views/datav/Gobal.vue
  5. 119
      src/views/datav/MailVisits.vue
  6. 921
      src/views/datav/VideoInsp.vue

2
src/components/datav/header.vue
Unescape View File

@ -18,7 +18,7 @@
<div @click="goToBaidu"> <div @click="goToBaidu">
<router-link to="" v-slot="{ isActive }"> <router-link to="" v-slot="{ isActive }">
<span>民意感知</span> <span>民意感知</span>
<img :src="isActive ? Img2 : Img1" alt=""/> <img :src="Img1" alt=""/>
</router-link> </router-link>
</div> </div>

2
src/views/Home.vue
Unescape View File

@ -57,7 +57,7 @@ flowNumberAndTodayNumber().then(data => {
flowNumber.value = data.flowNumber; flowNumber.value = data.flowNumber;
todayNumber.value = data.todayNumber; todayNumber.value = data.todayNumber;
}) })
const links = ['警务评议', '视频督察', '情指行', '执法办案'] const links = ['民意感知', '视频督察', '情指行', '执法办案']
const router = useRouter() const router = useRouter()
function goQuery(item) { function goQuery(item) {

15
src/views/datav/AuditSuper.vue
Unescape View File

@ -15,6 +15,7 @@
unit="%" unit="%"
remark-font-size="12px" remark-font-size="12px"
spanClass="right-aligned" spanClass="right-aligned"
:color="colors"
/> />
</el-scrollbar> </el-scrollbar>
@ -581,16 +582,20 @@ const option22 = {
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", // 绿色
percentage: 80, color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 90,
}, },
{ {
// 黄色
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60, percentage: 80,
}, },
{ {
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40, // 红色
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 70,
}, },
]; ];

8
src/views/datav/Gobal.vue
Unescape View File

@ -186,8 +186,6 @@ const option = ref({
<li>督察问题 <span>${dataItem.supervisePro}</span></li> <li>督察问题 <span>${dataItem.supervisePro}</span></li>
<li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li> <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
<li>信访投诉问题 <span>${dataItem.mailPro}</span></li> <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
<li>民意感知问题 <span>${dataItem.policePro}</span></li>
<li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
@ -200,8 +198,6 @@ const option = ref({
<li>督察问题 <span>0</span></li> <li>督察问题 <span>0</span></li>
<li>案件核查问题 <span>0</span></li> <li>案件核查问题 <span>0</span></li>
<li>信访投诉问题 <span>0</span></li> <li>信访投诉问题 <span>0</span></li>
<li>民意感知问题 <span>0</span></li>
<li>审计监督问题 <span>0</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
@ -450,7 +446,7 @@ const colors = [
.tooltip { .tooltip {
position: relative; position: relative;
width: 169.88px; width: 169.88px;
height: 198px; height: 168px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%); background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF; border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px; margin: -10px -10px -10px -10px;
@ -475,7 +471,7 @@ const colors = [
.tooltip-content { .tooltip-content {
width: 170px; width: 170px;
height: 155.8px; height: 120px;
//font-size: 11px; //font-size: 11px;
margin-top: -12px; margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%); background: linear-gradient(180deg, #010457 0%, #031577 100%);

119
src/views/datav/MailVisits.vue
Unescape View File

@ -93,7 +93,6 @@
/> />
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<div class="tab-title-item active"> <div class="tab-title-item active">
暂无数据
</div> </div>
</div> </div>
</datav-card> </datav-card>
@ -218,7 +217,6 @@
/> />
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<div class="tab-title-item active"> <div class="tab-title-item active">
暂无数据
</div> </div>
</div> </div>
</datav-card> </datav-card>
@ -245,13 +243,59 @@ import moment from "moment/moment.js";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
let gobalTempMapVoList = [ let gobalTempMapVoList = [
{ {
"name": "芙蓉分局",
"total": 704,
"countryTotal": 153,
"policeTotal": 506,
"numTotal": 45,
}, {
"name": "天心分局", "name": "天心分局",
"totalPro": 11, "total": 700,
"supervisePro": 11, "countryTotal": 150,
"caseVerifyPro": 11, "policeTotal": 483,
"mailPro": 11, "numTotal": 67,
"policePro": 11, }, {
"reviewPro": 11 "name": "岳麓分局",
"total": 609,
"countryTotal": 94,
"policeTotal": 462,
"numTotal": 53,
}, {
"name": "开福分局",
"total": 392,
"countryTotal": 108,
"policeTotal": 224,
"numTotal": 60,
}, {
"name": "雨花分局",
"total": 886,
"countryTotal": 204,
"policeTotal": 601,
"numTotal": 81,
}, {
"name": "望城分局",
"total": 273,
"countryTotal": 22,
"policeTotal": 224,
"numTotal": 27,
}, {
"name": "浏阳市局",
"total": 335,
"countryTotal": 34,
"policeTotal": 261,
"numTotal": 40,
}, {
"name": "宁乡市局",
"total": 309,
"countryTotal": 16,
"policeTotal": 267,
"numTotal": 26,
}, {
"name": "长沙县局",
"total": 422,
"countryTotal": 75,
"policeTotal": 303,
"numTotal": 44,
} }
]; ];
const option = ref({ const option = ref({
@ -270,11 +314,11 @@ const option = ref({
<div class="tooltip-title">${dataItem.name}</div> <div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content"> <div class="tooltip-content">
<ul class="tooltip-ul" > <ul class="tooltip-ul" >
<li>信访总件数 <span>${dataItem.totalPro}</span></li> <li>信访总件数 <span>${dataItem.total}</span></li>
<li>国家信访 <span>${dataItem.supervisePro}</span></li> <li>国家信访 <span>${dataItem.countryTotal}</span></li>
<li>公安部信访 <span>${dataItem.caseVerifyPro}</span></li> <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
<li>局长信箱 <span>${dataItem.mailPro}</span></li>
<li>12337信访 <span>${dataItem.policePro}</span></li> <li>12337信访 <span>${dataItem.numTotal}</span></li>
</ul> </ul>
</div> </div>
</div>`; </div>`;
@ -286,7 +330,7 @@ const option = ref({
<li>信访总件数 <span>0</span></li> <li>信访总件数 <span>0</span></li>
<li>国家信访 <span>0</span></li> <li>国家信访 <span>0</span></li>
<li>公安部信访 <span>0</span></li> <li>公安部信访 <span>0</span></li>
<li>局长信箱 <span>0</span></li>
<li>12337信访 <span>0</span></li> <li>12337信访 <span>0</span></li>
</ul> </ul>
</div> </div>
@ -404,17 +448,26 @@ const option2 = {
color: "#fff", color: "#fff",
}, },
data: [ data: [
// {value: 311, name: "慢作为"}, {value: 1282, name: "不作为"},
// {value: 735, name: "意见建议"}, {value: 426, name: "求助咨询"},
// {value: 580, name: "违法违纪违规"}, {value: 284, name: "乱作为"},
// {value: 484, name: "乱作为"}, {value: 131, name: "其他"},
// {value: 300, name: "其他"}, {value: 95, name: "违法违纪违规"},
// {value: 300, name: "不作为"}, {value: 72, name: "慢作为"},
{value: 24, name: "意见建议"},
{value: 5, name: "纪律作风"},
], ],
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
const option3 = { const option3 = {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -423,12 +476,10 @@ const option3 = {
color: "#fff", color: "#fff",
}, },
data: [ data: [
// {value: 21, name: "其他"}, {value: 10, name: "通报批评"},
// {value: 33, name: "通报批评"}, {value: 2, name: "责令检查"},
// {value: 56, name: "责令检查"}, {value: 1, name: "诫勉谈话"},
// {value: 31, name: "考核降级"}, {value: 1, name: "批评教育"},
// {value: 120, name: "组织处理"},
// {value: 32, name: "党纪处分"},
], ],
}, },
], ],
@ -473,21 +524,17 @@ const time = ref([
]); ]);
const temp1 = [{
const temp1=[{ label: '张三',
label:'张三',
value: '1' value: '1'
}] }]
const temp2=[{ const temp2 = [{
label:'李四', label: '李四',
value: '1' value: '1'
}] }]
/** /**
* 信访趋势 * 信访趋势
* @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>} * @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>}
@ -630,9 +677,6 @@ const colors = [
} }
:deep() { :deep() {
// 弹框整体 // 弹框整体
.tooltip { .tooltip {
@ -711,5 +755,4 @@ const colors = [
} }
</style> </style>

921
src/views/datav/VideoInsp.vue
Unescape View File

@ -1,167 +1,160 @@
<template> <template>
<el-scrollbar height="100vh"> <el-scrollbar height="100vh">
<div class="wrapper"> <div class="wrapper">
<datav-header /> <datav-header/>
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="内部视频"> <datav-card title="内部视频">
<div class="row mt-4 mb-20"> <div class="row mt-4 mb-20">
<div class="col col-8"> <div class="col col-8">
<label>视频总数</label> <label>视频总数</label>
<span>107</span> <span>107</span>
</div> </div>
<div class="col col-8"> <div class="col col-8">
<label>在线数</label> <label>在线数</label>
<span>97</span> <span>97</span>
</div> </div>
<div class="col col-8"> <div class="col col-8">
<label>在线率</label> <label>在线率</label>
<span>91%</span> <span>91%</span>
</div> </div>
</div> </div>
<div class="mb-12"> <div class="mb-12">
<video <video
width="100%" width="100%"
height="250" height="250"
controls="controls" controls="controls"
autoplay autoplay
> >
<source src="/mp4/1.mp4" type="video/ogg" /> <source src="/mp4/1.mp4" type="video/ogg"/>
</video> </video>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="8"> <el-col :span="8">
<img src="/imgs/datav/1.png" class="active" alt="" /> <img src="/imgs/datav/1.png" class="active" alt=""/>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<img src="/imgs/datav/2.jpg" alt="" /> <img src="/imgs/datav/2.jpg" alt=""/>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<img src="/imgs/datav/3.jpeg" alt="" /> <img src="/imgs/datav/3.jpeg" alt=""/>
</el-col> </el-col>
</el-row> </el-row>
</datav-card> </datav-card>
<datav-card title="问题数排名"> <datav-card title="问题数排名" style="height: 370px;">
<datav-chart-bar <datav-chart-bar
sub-title="问题数" sub-title="问题数"
:data="data1" :data="data1"
:max="11" :max="11"
/> :color="colors"
<div />
class="flex tab-title flex center mt-20"
style="margin-bottom: 20px" </datav-card>
> </el-col>
<div class="tab-title-item active"> <el-col :span="12">
分县市局 <div class="datav-col">
</div> <label for="">统计周期：</label>
<div class="tab-title-item">局属单位</div> <span>2024年01月01日 - 2024年08月30日</span>
</div> </div>
</datav-card> <div class="flex gap-42">
</el-col> <datav-statistic
<el-col :span="12"> :value="135"
<div class="datav-col"> title="发现问题数"
<label for="">统计周期：</label> style="width: 20%"
<span>2024年01月01日 - 2024年08月30日</span> />
</div> <datav-statistic
<div class="flex gap-42"> :value="135"
<datav-statistic title="整改问题数"
:value="98" style="width: 20%"
title="发现问题数" />
style="width: 20%" <datav-statistic
/> :value="89"
<datav-statistic title="涉及单位数"
:value="10" style="width: 20%"
title="整改问题数" />
style="width: 20%" <datav-statistic
/> :value="152"
<datav-statistic title="涉及人数"
:value="22" style="width: 20%"
title="涉及单位数" />
style="width: 20%" <datav-statistic
/> :value="100"
<datav-statistic value-unit="%"
:value="121" title="整改率"
title="涉及人数" style="width: 20%"
style="width: 20%" />
/> </div>
<datav-statistic <v-charts
:value="10" style="height: 420px"
value-unit="%" :option="option"
title="整改率" autoresize
style="width: 20%" />
/> <datav-card title="问题趋势">
</div> <v-charts
<v-charts style="height: 250px"
style="height: 420px" :option="option1"
:option="option" autoresize
autoresize />
/> </datav-card>
<datav-card title="问题趋势"> </el-col>
<v-charts <el-col :span="6">
style="height: 250px" <datav-card title="实时预警">
:option="option1" <el-scrollbar height="450px">
autoresize <div class="message message-error">
/> <div class="message-title">待处理</div>
</datav-card> <div>
</el-col> 芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ） &emsp; “民警单人询（讯）问”的违规问题
<el-col :span="6"> </div>
<datav-card title="实时预警"> <div class="message-footer flex between">
<el-scrollbar height="450px"> <span>芙蓉分局定王台派出所</span>
<div class="message message-error"> <span>2024-11-18 20:12</span>
<div class="message-title">待处理</div> </div>
<div> </div>
芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ） &emsp; “民警单人询（讯）问”的违规问题 <div class="message message-info">
</div> <div class="message-title">待处理</div>
<div class="message-footer flex between"> <div>
<span>芙蓉分局定王台派出所</span> 望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）&emsp; 民警单人询（讯）问”的违规问题。
<span>2024-11-11 19:16</span> </div>
</div> <div class="message-footer flex between">
</div> <span>望城区公安局法制大队</span>
<div class="message message-info"> <span>2024-11-18 19:12</span>
<div class="message-title">待处理</div> </div>
<div> </div>
望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）&emsp; 民警单人询（讯）问”的违规问题。 <div class="message">
</div> <div class="message-title">待处理</div>
<div class="message-footer flex between"> <div>
<span>望城区公安局法制大队</span> 执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所） &emsp;同时讯（询）问多名嫌疑对象
<span>2024-11-18 11:12</span> </div>
</div> <div class="message-footer flex between">
</div> <span>芙蓉分局蓉园派出所</span>
<div class="message"> <span>2024-11-18 16:12</span>
<div class="message-title">待处理</div> </div>
<div> </div>
执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所） &emsp;同时讯（询）问多名嫌疑对象 <div class="message">
</div> <div class="message-title">待处理</div>
<div class="message-footer flex between"> <div>
<span>芙蓉分局蓉园派出所</span> 开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队） &emsp;“民警单人询（讯）问”的违规问题
<span>2024-11-14 10:00</span> </div>
</div> <div class="message-footer flex between">
</div> <span>开福分局法制大队</span>
<div class="message"> <span>2024-11-18 15:12</span>
<div class="message-title">待处理</div> </div>
<div> </div>
开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队） &emsp;“民警单人询（讯）问”的违规问题 </el-scrollbar>
</div> </datav-card>
<div class="message-footer flex between"> <datav-card title="问题类型占比">
<span>开福分局法制大队</span> <v-charts
<span>2024-11-15 15:51</span> style="height: 300px"
</div> :option="option2"
</div> autoresize
</el-scrollbar> />
</datav-card> </datav-card>
<datav-card title="问题类型占比"> </el-col>
<v-charts </el-row>
style="height: 300px" </main>
:option="option2" </div>
autoresize </el-scrollbar>
/>
</datav-card>
</el-col>
</el-row>
</main>
</div>
</el-scrollbar>
</template> </template>
<script setup> <script setup>
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
@ -170,229 +163,447 @@ import vCharts from "vue-echarts";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { let gobalTempMapVoList = [
geo: { {
// 是上面注册时的名字哦，registerMap（'名字保持一致'） "name": "芙蓉分局",
map: "changsha", "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", visualMap: {
bottom: 10,
pieces: [ type: "piecewise",
{ gte: 85, lte: 100, label: "问题数低于500" }, bottom: 10,
{ gte: 65, lte: 85, label: "问题数低于1000" }, pieces: [
{ gte: 0, lte: 65, label: "问题数低于1000" }, {gte: 0, lte: 10, label: "问题数低于500"},
], {gte: 10, lte: 20, label: "问题数介于500-1000"},
right: 10, // 右边距 {gte: 30, label: "问题数高于1000"},
realtime: false, ],
orient: "horizontal", // 水平显示 right: 10,
textStyle: { realtime: false,
color: "#fff", // 文字颜色 orient: "horizontal",
}, textStyle: {
calculable: true, color: "#fff",
inRange: { },
color: ["#D34343", "#F6A149", "#4987F6"], calculable: true,
}, inRange: {
color: ["#4987F6", "#F6A149", "#D34343",],
}, },
series: [ },
{ series: [
name: "长沙", {
type: "map", name: "长沙",
map: "changsha", type: "map",
hoverAnimation: true, map: "changsha",
hoverAnimation: true,
label: { label: {
show: true, show: true,
color: "white", color: "white",
}, },
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 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({ const option1 = ref({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
"9/10", },
"9/11", yAxis: {
"9/12", type: "value",
"9/13", splitLine: {
"9/14", show: true,
"9/15", lineStyle: {
"9/16", color: "#193775",
"9/17", },
"9/18",
"9/19",
"9/20",
"9/21",
"9/22",
"9/23",
],
}, },
yAxis: { },
type: "value", tooltip: {
splitLine: { trigger: 'axis',
show: true, axisPointer: {
lineStyle: { type: 'line',
color: "#193775", 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 = { const option2 = {
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["40%", "70%"], radius: ["40%", "70%"],
label: { label: {
color: "#fff", color: "#fff",
}, },
data: [ data: [
{ value: 1048, name: "着装不规范" }, {value: 40, name: "着装不规范"},
{ value: 735, name: "看守人员睡岗" }, {value: 25, name: "看守人员睡岗"},
{ value: 580, name: "工作人员玩手机" }, {value: 30, name: "工作人员玩手机"},
{ value: 484, name: "单人问询" }, {value: 30, name: "单人问询"},
{ value: 300, name: "民警不在岗" }, {value: 10, name: "民警不在岗"},
], ],
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
const data1 = [ const data1 = [
{
name: "芙蓉分局", {
value: 11 label: "开福分局",
}, value: 30
{ },
name: "开福分局", {
value: 10 label: "芙蓉分局",
}, value: 25
},
{ {
name: "岳麓分局", label: "岳麓分局",
value: 9 value: 22
}, },
{ {
name: "雨花分局", label: "雨花分局",
value: 8 value: 18
}, },
{ {
name: "望城分局", label: "望城分局",
value: 8 value: 15
}, },
{ {
name: "浏阳市局", label: "浏阳分局",
value: 7 value: 13
}, },
{ {
name: "长沙县局", label: "宁乡分局",
value: 5 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
img { img {
width: 100%; width: 100%;
display: block; display: block;
border: 1px solid transparent; border: 1px solid transparent;
&.active {
border-color: #1cd9ff; &.active {
} border-color: #1cd9ff;
}
} }
.message { .message {
padding: 10px; padding: 10px;
margin-bottom: 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( background: linear-gradient(
180deg, 180deg,
rgba(145, 145, 145, 0) 0%, rgba(208, 18, 18, 0) 0%,
rgba(164, 164, 164, 0.26) 98% rgba(255, 0, 0, 0.26) 100%
); );
border: 1px solid; border: 1px solid;
border-image: linear-gradient( border-image: linear-gradient(
180deg, 180deg,
rgba(255, 255, 255, 0.28), rgba(255, 71, 71, 0.59),
rgba(255, 255, 255, 0.26) rgba(251, 95, 95, 1)
) ) 1 1;
1 1;
&.message-error { .message-title {
background: linear-gradient( color: #ff0017;
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;
}
} }
&.message-info { }
background: linear-gradient(
&.message-info {
background: linear-gradient(
180deg, 180deg,
rgba(18, 104, 208, 0) 0%, rgba(18, 104, 208, 0) 0%,
rgba(0, 166, 255, 0.26) 100% rgba(0, 166, 255, 0.26) 100%
); );
border: 1px solid; border: 1px solid;
border-image: linear-gradient( border-image: linear-gradient(
180deg, 180deg,
rgba(71, 209, 255, 0.28), rgba(71, 209, 255, 0.28),
rgba(8, 177, 255, 1) rgba(8, 177, 255, 1)
) ) 1 1;
1 1;
.message-title {
color: #1cd9ff;
}
}
.message-title { .message-title {
font-size: 23px; color: #1cd9ff;
font-weight: 700;
margin-bottom: 10px;
color: #597ae9;
}
.message-footer {
font-size: 14px;
color: #597ae9;
margin-top: 10px;
} }
}
.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> </style>
Write Preview
Loading…
Cancel
Save