12 changed files with 142 additions and 2838 deletions
@ -1,5 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<project version="4"> |
||||
<component name="ProjectRootManager"> |
||||
<component name="ProjectRootManager" version="2" project-jdk-name="corretto-17_12" project-jdk-type="JavaSDK"> |
||||
<output url="file://$PROJECT_DIR$/out" /> |
||||
</component> |
||||
</project> |
||||
@ -0,0 +1,41 @@
|
||||
<template> |
||||
<div> |
||||
<video ref="localVideo" autoplay></video> |
||||
<video ref="remoteVideo" autoplay></video> |
||||
<button @click="startCall">Start Call</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, onMounted } from 'vue'; |
||||
import WebRTCService from "@/api/mv/WebRTCService.js"; |
||||
|
||||
const webrtcService = new WebRTCService(); |
||||
const localVideo = ref(null); |
||||
const remoteVideo = ref(null); |
||||
const localStream = ref(null); |
||||
const remoteStream = ref(null); |
||||
|
||||
onMounted(async () => { |
||||
localStream.value = await webrtcService.init(); |
||||
localVideo.value.srcObject = localStream.value; |
||||
|
||||
webrtcService.peer.ontrack = (event) => { |
||||
remoteStream.value = event.streams[0]; |
||||
remoteVideo.value.srcObject = remoteStream.value; |
||||
}; |
||||
}); |
||||
|
||||
const startCall = () => { |
||||
webrtcService.createOffer(); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
video { |
||||
width: 45%; |
||||
height: auto; |
||||
border: 1px solid #ccc; |
||||
margin: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,55 @@
|
||||
// src/services/webrtcService.js
|
||||
export default class WebRTCService { |
||||
constructor() { |
||||
this.peer = new RTCPeerConnection({ |
||||
iceServers: [ |
||||
{ urls: 'stun:stun.l.google.com:19302' } |
||||
] |
||||
}); |
||||
this.stream = null; |
||||
this.socket = new WebSocket('ws://localhost:8080'); |
||||
|
||||
this.socket.onmessage = (message) => { |
||||
const data = JSON.parse(message.data); |
||||
if (data.type === 'offer') { |
||||
this.peer.setRemoteDescription(new RTCSessionDescription(data.offer)); |
||||
this.createAnswer(); |
||||
} else if (data.type === 'answer') { |
||||
this.peer.setRemoteDescription(new RTCSessionDescription(data.answer)); |
||||
} else if (data.type === 'candidate') { |
||||
this.peer.addIceCandidate(new RTCIceCandidate(data.candidate)); |
||||
} |
||||
}; |
||||
|
||||
this.peer.onicecandidate = (event) => { |
||||
if (event.candidate) { |
||||
this.socket.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); |
||||
} |
||||
}; |
||||
|
||||
this.peer.ontrack = (event) => { |
||||
const [stream] = event.streams; |
||||
this.remoteStream = stream; |
||||
}; |
||||
} |
||||
|
||||
async init() { |
||||
this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); |
||||
this.stream.getTracks().forEach(track => this.peer.addTrack(track, this.stream)); |
||||
return this.stream; |
||||
} |
||||
|
||||
async createOffer() { |
||||
const offer = await this.peer.createOffer(); |
||||
await this.peer.setLocalDescription(offer); |
||||
this.socket.send(JSON.stringify({ type: 'offer', offer })); |
||||
} |
||||
|
||||
async createAnswer() { |
||||
const answer = await this.peer.createAnswer(); |
||||
await this.peer.setLocalDescription(answer); |
||||
this.socket.send(JSON.stringify({ type: 'answer', answer })); |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1,735 +0,0 @@
|
||||
<template> |
||||
<el-scrollbar height="100vh"> |
||||
<div class="wrapper"> |
||||
<datav-header/> |
||||
<main> |
||||
<el-row :gutter="16"> |
||||
<el-col :span="6"> |
||||
<datav-card title="所队排名" subTitle="查实案件数"> |
||||
<datav-tabs |
||||
type="bottom-button" |
||||
> |
||||
<datav-tab-item label="派出所" name="1"> |
||||
<el-scrollbar height="350px"> |
||||
<datav-chart-bar |
||||
:data="fxsjBarList" |
||||
size="large" |
||||
:color="colors" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="大队" name="2"> |
||||
<el-scrollbar height="350px"> |
||||
<datav-chart-bar |
||||
:data="jsdwBarList" |
||||
:max="11" |
||||
size="large" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
<datav-card title="案件问题性质"> |
||||
<datav-tabs> |
||||
<datav-tab-item label="执法办案" name="1"> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="zfbaPieOption" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="服务管理" name="2"> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="fwglPieOption" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="警纪警规" name="3"> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="jgjjPieOption" |
||||
autoresize |
||||
/> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<datav-date-picker v-model="time"/> |
||||
<div class="flex gap-42"> |
||||
<datav-statistic |
||||
:value="overview.total" |
||||
title="案件总数（起）" |
||||
style="width: 16.66%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.confirmed" |
||||
title="查实案件数" |
||||
style="width: 16.66%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.dealCasePro" |
||||
title="查处问题（个）" |
||||
style="width: 16.66%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.punishPre" |
||||
title="问责人次" |
||||
style="width: 16.66%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.punishOrg" |
||||
title="问责单位数" |
||||
style="width: 16.66%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.rate" |
||||
value-unit="%" |
||||
title="查实率" |
||||
style="width: 16.66%" |
||||
/> |
||||
</div> |
||||
<v-charts |
||||
style="height: 420px" |
||||
:option="option" |
||||
autoresize |
||||
ref="chart" |
||||
/> |
||||
<datav-card title="查实问题趋势"> |
||||
<v-charts |
||||
style="height: 320px" |
||||
:option="proTrend" |
||||
autoresize |
||||
/> |
||||
<div class="gobal-dropdown-container"> |
||||
<el-dropdown class="test" @command="handleCommand"> |
||||
<span class="el-dropdown-link my-gobal-yearselect"> |
||||
{{ selectedYear + " 年" }} |
||||
</span> |
||||
<template #dropdown> |
||||
<el-dropdown-menu style="width: 90px"> |
||||
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }} |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> |
||||
</datav-card> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<datav-card> |
||||
<datav-tabs> |
||||
<datav-tab-item label="案件来源占比" name="1"> |
||||
<div class="mb-40"> |
||||
<v-charts |
||||
style="height: 340px" |
||||
:option="ajlyPieOption" |
||||
autoresize |
||||
/> |
||||
</div> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="问责处理情况" name="2"> |
||||
<div class="mb-40"> |
||||
<v-charts |
||||
style="height: 340px" |
||||
:option="wzclPieOption" |
||||
autoresize |
||||
/> |
||||
</div> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
<datav-card> |
||||
<datav-tabs> |
||||
<datav-tab-item label="禁闭处理情况" name="1"> |
||||
<div class="mb-40"> |
||||
<v-charts |
||||
style="height: 340px" |
||||
:option="jbcloption" |
||||
autoresize |
||||
/> |
||||
</div> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="停职处理情况" name="2"> |
||||
<div class="mb-40"> |
||||
<v-charts |
||||
style="height: 340px" |
||||
:option="tzcloption" |
||||
autoresize |
||||
/> |
||||
</div> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
</datav-card> |
||||
</el-col> |
||||
</el-row> |
||||
</main> |
||||
</div> |
||||
</el-scrollbar> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import vCharts from "vue-echarts"; |
||||
import changshaMap from "@/assets/data/changsha.json"; |
||||
import * as echarts from "echarts/core"; |
||||
import moment from "moment"; |
||||
import {getCaseVerificationMap } from "@/api/screen/CaseVerif.ts"; |
||||
import {getSubOneStreetMap} from "@/api/screen/sub1.ts"; |
||||
import { |
||||
getSubOneAllCaseVerificationCount, |
||||
getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation, |
||||
getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend |
||||
} from "@/api/screen/subScreen/subOneCaseVerif.ts"; |
||||
|
||||
const currentYear = new Date().getFullYear(); |
||||
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
||||
const selectedYear = ref(currentYear); // 当前选中的年份 |
||||
const time = ref([ |
||||
moment().startOf("year").format("YYYY-MM-DD"), |
||||
moment().format("YYYY-MM-DD"), |
||||
]); |
||||
const route = useRoute(); |
||||
const currentDepartId = route.query.departId; |
||||
const chart = ref(null); // 地图 |
||||
const currentMapData = ref({}) // 地图数据 |
||||
const fxsjBarList = ref([]); |
||||
const jsdwBarList = ref([]); |
||||
const overview = ref({ |
||||
total: 0, |
||||
confirmed: 0, // 查实案件数 |
||||
dealCasePro: 0, // 查处问题（个） |
||||
punishPre: 0, // 问责人次 |
||||
punishOrg: 0, // 问责单位数、 |
||||
rate: 0, // 查实率 |
||||
}); |
||||
let gobalTempMapVoList = ref([]); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// region 事件||监听 |
||||
const handleCommand = ( year) => { |
||||
selectedYear.value = year; // 更新当前选中的年份 |
||||
getProTrendList(currentDepartId,year); |
||||
}; |
||||
watch(time, () => { |
||||
getData(); |
||||
}); |
||||
onMounted(() => { |
||||
getData(); |
||||
}); |
||||
// endregion |
||||
|
||||
|
||||
|
||||
|
||||
// region 所有函数 |
||||
const getMapJSON = async (departId) => { |
||||
const res = await getSubOneStreetMap(departId); |
||||
currentMapData.value = res; |
||||
echarts.registerMap("changsha", res); |
||||
chart.value.chart.setOption(option.value); |
||||
} |
||||
const getRankListData = async(departId, timeValue) => { |
||||
const res = await getSubOneCaseVerificationRank(departId, timeValue); |
||||
fxsjBarList.value = res.fxsjRankList |
||||
jsdwBarList.value = res.jsdwRankList |
||||
} |
||||
|
||||
const getCaseProblemPropertyList = async(departId, timeValue) => { |
||||
const res = await getSubOneCaseProblemProperty(departId,timeValue); |
||||
zfbaPieOption.value.series[0].data = res.zfbaPieList; |
||||
fwglPieOption.value.series[0].data = res.fwglPieList; |
||||
} |
||||
const getOverview = async(departId, timeValue)=>{ |
||||
const res = await getSubOneAllCaseVerificationCount(departId, timeValue) |
||||
overview.value = res.overview |
||||
} |
||||
const getMapIcon = async(timeValue)=> { |
||||
// const res = await getCaseVerificationMap(timeValue); |
||||
// const mappedData = res.caseVerificationMapList.map(item => { |
||||
// let name; |
||||
// switch (item.name) { |
||||
// case '长沙县局': |
||||
// name = '长沙县'; |
||||
// break; |
||||
// case '芙蓉分局': |
||||
// name = '芙蓉区'; |
||||
// break; |
||||
// case '天心分局': |
||||
// name = '天心区'; |
||||
// break; |
||||
// case '岳麓分局': |
||||
// name = '岳麓区'; |
||||
// break; |
||||
// case '开福分局': |
||||
// name = '开福区'; |
||||
// break; |
||||
// case '雨花分局': |
||||
// name = '雨花区'; |
||||
// break; |
||||
// case '望城分局': |
||||
// name = '望城区'; |
||||
// break; |
||||
// case '宁乡市局': |
||||
// name = '宁乡市'; |
||||
// break; |
||||
// case '浏阳市局': |
||||
// name = '浏阳市'; |
||||
// break; |
||||
// case '高新分局': |
||||
// name = '高新区'; |
||||
// break; |
||||
// default: |
||||
// name = item.name; |
||||
// break; |
||||
// } |
||||
// return { |
||||
// ...item, |
||||
// originalName: item.name, // 添加原始名称 |
||||
// name: name, |
||||
// value: item.total, |
||||
// }; |
||||
// }); |
||||
// gobalTempMapVoList.value = mappedData |
||||
// const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); |
||||
// const avg = total / mappedData.length; // 计算平均值 |
||||
// const range30Percent = avg*0.3 // 不用取整，小数也可以 |
||||
// option.value.series[0].data = mappedData; |
||||
// option.value.visualMap.pieces = [ |
||||
// {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
||||
// {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
||||
// {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"}, |
||||
// ]; |
||||
} |
||||
|
||||
const getProTrendList= async(departId, year) => { |
||||
const res = await getSubOneCaseVerificationTrend(departId, year); |
||||
const temp = res.proTrendList; |
||||
const categories = temp.map(item => item.name); |
||||
const values = temp.map(item => item.value); |
||||
proTrend.value.xAxis.data = categories; |
||||
proTrend.value.series[0].data = values; |
||||
} |
||||
const getCaseSourceAndDeal = async (departId, timeValue)=>{ |
||||
const res = await getSubOneCaseSourceRateAndDealSituation(departId, timeValue); |
||||
ajlyPieOption.value.series[0].data = res.caseSourceRateList |
||||
wzclPieOption.value.series[0].data = res.dealSituationPieList |
||||
} |
||||
|
||||
// const getConfinementAndPauseList = async (timeValue)=>{ |
||||
// const res = await getConfinementAndPause(timeValue); |
||||
// jbcloption.value.series[0].data = res.jbclList; |
||||
// tzcloption.value.series[0].data = res.dzclList; |
||||
// } |
||||
|
||||
function getData() { |
||||
getMapJSON(currentDepartId) |
||||
getRankListData(currentDepartId,time.value) |
||||
getCaseProblemPropertyList(currentDepartId,time.value) |
||||
getOverview(currentDepartId,time.value) |
||||
getProTrendList(currentDepartId,currentYear) |
||||
getCaseSourceAndDeal(currentDepartId,time.value) |
||||
} |
||||
|
||||
|
||||
// endregion |
||||
|
||||
|
||||
|
||||
echarts.registerMap("changsha", changshaMap); |
||||
const option = ref({ |
||||
geo: { |
||||
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
||||
map: "changsha", |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: function (params) { |
||||
console.log(params) |
||||
const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
||||
if (dataItem ) { |
||||
return ` |
||||
<div class="tooltip"> |
||||
<div class="tooltip-title">${dataItem.originalName}</div> |
||||
<div class="tooltip-content"> |
||||
<ul class="tooltip-ul" > |
||||
<li>案件总数（起）<span>${dataItem.total}</span></li> |
||||
<li>查实案件数 <span>${dataItem.confirmed}</span></li> |
||||
<li>查处问题（个） <span>${dataItem.dealCasePro}</span></li> |
||||
<li>问责人次 <span>${dataItem.punishPre}</span></li> |
||||
<li>问责单位数 <span>${dataItem.punishOrg}</span></li> |
||||
<li>查实率 <span>${dataItem.rate}</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>-</span></li> |
||||
<li>查实案件数 <span>-</span></li> |
||||
<li>查处问题（个） <span>-</span></li> |
||||
<li>问责人次 <span>-</span></li> |
||||
<li>问责单位数 <span>-</span></li> |
||||
<li>查实率 <span>-</span></li> |
||||
</ul> |
||||
</div> |
||||
</div>`; |
||||
} |
||||
}, |
||||
// backgroundColor: "#031577", // |
||||
// borderColor: "#0A2F86", |
||||
// borderWidth: 0, // 设置边框宽度为1像素 |
||||
// borderRadius: 3, // 设置边框半径为3像素 |
||||
// shadowBlur: 0, // 设置阴影模糊程度为8像素 |
||||
// shadowOffsetX: 0, // 设置水平阴影位移量为0像素 |
||||
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 |
||||
}, |
||||
visualMap: { |
||||
type: "piecewise", |
||||
bottom: 10, |
||||
pieces: [ |
||||
{gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"}, |
||||
{gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
||||
{gte: 400, label: "高于平均问题30%", color: "#D34343"},], |
||||
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: { |
||||
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 |
||||
borderColor: "#24D2EE", |
||||
borderWidth: 1 // 高亮时边框宽度 |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
}); |
||||
const proTrend = ref({ |
||||
grid: { |
||||
left: '5%', // 图表距离容器左边的距离 |
||||
right: '2%', // 图表距离容器右边的距离 |
||||
top: '10%', // 图表距离容器上边的距离 |
||||
bottom: '20%', // 图表距离容器下边的距离 |
||||
containLabel: false // 是否包含坐标轴的标签 |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: true, |
||||
axisTick: { |
||||
// 去掉X轴刻度线 |
||||
show: false |
||||
}, |
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'], |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#193775", |
||||
}, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'line', |
||||
label: { |
||||
backgroundColor: '#6a7985' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
smooth: true, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
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: [], |
||||
}, |
||||
], |
||||
}); |
||||
const ajlyPieOption = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); |
||||
const wzclPieOption = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); |
||||
const zfbaPieOption = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); |
||||
const fwglPieOption = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); |
||||
const jgjjPieOption = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); |
||||
const jbcloption = ref({ |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [ |
||||
// {value: 14, name: "工作饮酒"}, |
||||
// {value: 11, name: "违规办案"}, |
||||
// {value: 3, name: "涉嫌违纪"}, |
||||
// {value: 2, name: "违反“三个规定”"}, |
||||
// {value: 12, name: "违反生活纪律、工作纪律"}, |
||||
// {value: 8, name: "违规接受管理服务对象宴请"}, |
||||
// {value: 2, name: "酒后驾车、涉嫌违法"}, |
||||
// {value: 2, name: "执法乱作为"}, |
||||
// {value: 3, name: "为落实请示报告制度"}, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
const tzcloption = ref({ |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [ |
||||
// {value: 14, name: "工作饮酒"}, |
||||
// {value: 11, name: "违规办案"}, |
||||
// {value: 3, name: "涉嫌违纪"}, |
||||
// {value: 2, name: "违反“三个规定”"}, |
||||
// {value: 12, name: "违反生活纪律、工作纪律"}, |
||||
// {value: 8, name: "违规接受管理服务对象宴请"}, |
||||
// {value: 2, name: "酒后驾车、涉嫌违法"}, |
||||
// {value: 2, name: "执法乱作为"}, |
||||
// {value: 3, name: "为落实请示报告制度"}, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
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"; |
||||
|
||||
:deep() { |
||||
// 弹框整体 |
||||
.tooltip { |
||||
position: relative; |
||||
width: 160px; |
||||
height: 194px; |
||||
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: 160px; |
||||
height: 43px; |
||||
background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%); |
||||
box-shadow: inset 0px -1px 0px 0px #253755; |
||||
display: flex; |
||||
justify-content: center; /* 水平居中 */ |
||||
align-items: center; /* 垂直居中 */ |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #FFFFFF; |
||||
border-bottom: 1px solid #253755; /* 设置下边框 */ |
||||
} |
||||
|
||||
.tooltip-content { |
||||
width: 160px; |
||||
height: 150px; |
||||
background: linear-gradient(180deg, #010457 0%, #031577 100%) |
||||
} |
||||
|
||||
.tooltip-content ul { |
||||
list-style-type: none; /* 移除默认的小圆点 */ |
||||
padding-left: 5px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.tooltip-content ul li { |
||||
height: 24px; |
||||
color: #597AE9; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
|
||||
//// 数字的span |
||||
.tooltip-ul span { |
||||
float: right; |
||||
width: 55px; |
||||
color: #fff; |
||||
font-size: 14px; |
||||
text-align: center; /* 水平居中 */ |
||||
|
||||
} |
||||
|
||||
|
||||
///* 小尖角 */ |
||||
//.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; /* 右边颜色，与背景颜色相同 */ |
||||
//} |
||||
|
||||
} |
||||
|
||||
.gobal-dropdown-container { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 15px; |
||||
} |
||||
.test { |
||||
width: 95px; |
||||
height: 25px; |
||||
background: #1C3472; |
||||
} |
||||
|
||||
.gobal-dropdown-container { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 15px; |
||||
} |
||||
|
||||
.my-gobal-yearselect { |
||||
font-size: 14px; |
||||
padding-top: 6px; |
||||
padding-left: 20px; |
||||
width: 90px; |
||||
color: #fff; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,722 +0,0 @@
|
||||
<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="问题数排名" sub-title="问题数" style="height: 370px;"> |
||||
<datav-tabs |
||||
type="bottom-button" |
||||
> |
||||
<datav-tab-item label="派出所" name="1"> |
||||
<el-scrollbar height="280px"> |
||||
<datav-chart-bar |
||||
:data="fxsjRankList" |
||||
size="large" |
||||
:color="colors" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
<datav-tab-item label="大队" name="2"> |
||||
<el-scrollbar height="280px"> |
||||
<datav-chart-bar |
||||
:data="jsdwRankList" |
||||
:max="11" |
||||
size="large" |
||||
/> |
||||
</el-scrollbar> |
||||
</datav-tab-item> |
||||
</datav-tabs> |
||||
|
||||
</datav-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<datav-date-picker v-model="time"/> |
||||
<div class="flex gap-42"> |
||||
<datav-statistic |
||||
:value="overview.discoverProblem" |
||||
title="发现问题数" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.changedProblem" |
||||
title="整改问题数" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.relativeOrg" |
||||
title="涉及单位数" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.relativePer" |
||||
title="涉及人数" |
||||
style="width: 20%" |
||||
/> |
||||
<datav-statistic |
||||
:value="overview.changedRate" |
||||
value-unit="%" |
||||
title="整改率" |
||||
style="width: 20%" |
||||
/> |
||||
</div> |
||||
<v-charts |
||||
style="height: 420px" |
||||
:option="option" |
||||
autoresize |
||||
ref="subOneVideoInspMapChart" |
||||
/> |
||||
<datav-card title="问题趋势"> |
||||
<v-charts |
||||
style="height: 250px" |
||||
:option="proTrend" |
||||
autoresize |
||||
/> |
||||
<div class="gobal-dropdown-container"> |
||||
<el-dropdown class="test" @command="handleCommand"> |
||||
<span class="el-dropdown-link my-gobal-yearselect"> |
||||
{{ selectedYear + ' 年'}} |
||||
</span> |
||||
<template #dropdown> |
||||
<el-dropdown-menu style="width: 90px"> |
||||
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }} |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> |
||||
</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="ProblemTypeRateChart" |
||||
autoresize |
||||
/> |
||||
</datav-card> |
||||
</el-col> |
||||
</el-row> |
||||
</main> |
||||
</div> |
||||
</el-scrollbar> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import changshaMap from "@/assets/data/changsha.json"; |
||||
import vCharts from "vue-echarts"; |
||||
import * as echarts from "echarts/core"; |
||||
import { |
||||
getVideoSuperviseMap |
||||
} from "@/api/screen/videoSupervise.ts"; |
||||
import moment from "moment/moment.js"; |
||||
import {getSubOneStreetMap} from "@/api/screen/sub1.ts"; |
||||
import { |
||||
getSubOneAllVideoSuperviseCount, |
||||
getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend |
||||
} from "@/api/screen/subScreen/subOneVideoSupervise.ts"; |
||||
|
||||
const time = ref([ |
||||
moment().startOf("year").format("YYYY-MM-DD"), |
||||
moment().format("YYYY-MM-DD"), |
||||
]); |
||||
|
||||
|
||||
const fxsjRankList = ref([]); |
||||
const jsdwRankList = ref([]); |
||||
|
||||
const overview = ref({ |
||||
discoverProblem: 0, |
||||
changedProblem: 0, |
||||
relativeOrg: 0, |
||||
relativePer: 0, |
||||
changedRate: 0, |
||||
}); |
||||
const mapIconList = ref([{ |
||||
originalName:"浏阳市局", |
||||
name: "浏阳市", |
||||
discoverProblem: 135, |
||||
changedProblem: 135, |
||||
relativeOrg: 89, |
||||
relativePer: 152, |
||||
changedRate: 100 |
||||
}]) |
||||
|
||||
const currentYear = new Date().getFullYear(); |
||||
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表 |
||||
const selectedYear = ref('2024'); // 当前选中的年份 |
||||
const currentMapData = ref({}) |
||||
const subOneVideoInspMapChart = ref(null); // 地图 |
||||
const route = useRoute(); |
||||
const currentDepartId = route.query.departId; |
||||
|
||||
// region 所有函数 |
||||
|
||||
const getMapJSON = async (departId) => { |
||||
const res = await getSubOneStreetMap(departId); |
||||
currentMapData.value = res; |
||||
echarts.registerMap("changsha", res); |
||||
subOneVideoInspMapChart.value.chart.setOption(option.value); |
||||
} |
||||
|
||||
const getOverview = async (departId, timeValue) => { |
||||
const res = await getSubOneAllVideoSuperviseCount(departId, timeValue); |
||||
overview.value = res.overview; |
||||
} |
||||
const getMap = async (timeValue) => { |
||||
const res = await getVideoSuperviseMap(timeValue); |
||||
// console.log(res.videoSuperviseMapIconVoList) |
||||
const mappedData = res.videoSuperviseMapIconVoList.map(item => { |
||||
let name; |
||||
switch (item.name) { |
||||
case '长沙县局': |
||||
name = '长沙县'; |
||||
break; |
||||
case '芙蓉分局': |
||||
name = '芙蓉区'; |
||||
break; |
||||
case '天心分局': |
||||
name = '天心区'; |
||||
break; |
||||
case '岳麓分局': |
||||
name = '岳麓区'; |
||||
break; |
||||
case '开福分局': |
||||
name = '开福区'; |
||||
break; |
||||
case '雨花分局': |
||||
name = '雨花区'; |
||||
break; |
||||
case '望城分局': |
||||
name = '望城区'; |
||||
break; |
||||
case '宁乡市局': |
||||
name = '宁乡市'; |
||||
break; |
||||
case '浏阳市局': |
||||
name = '浏阳市'; |
||||
break; |
||||
case '高新分局': |
||||
name = '高新区'; |
||||
break; |
||||
default: |
||||
name = item.name; |
||||
break; |
||||
} |
||||
return { |
||||
...item, |
||||
originalName: item.name, // 添加原始名称 |
||||
name: name, |
||||
value: item.discoverProblem, |
||||
}; |
||||
}); |
||||
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); |
||||
const avg = total / mappedData.length; // 计算平均值 |
||||
const range30Percent = avg*0.3 // 不用取整，小数也可以 |
||||
mapIconList.value = mappedData |
||||
option.value.series[0].data = mapIconList |
||||
option.value.visualMap.pieces = [ |
||||
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
||||
{gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
||||
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"}, |
||||
]; |
||||
} |
||||
|
||||
|
||||
const getProblemTypeRate = async (departId, timeValue) => { |
||||
const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue); |
||||
ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate |
||||
} |
||||
|
||||
|
||||
const getRankList = async (departId, timeValue) => { |
||||
const res = await getSubOneVideoSuperviseProblemRank(departId, timeValue); |
||||
fxsjRankList.value = res.policeVideoSuperviseProblemRankList |
||||
jsdwRankList.value = res.teamVideoSuperviseProblemRankList |
||||
} |
||||
const getTrend = async(departId, year)=> { |
||||
const res = await getSubOneVideoSuperviseTrend(departId, year); |
||||
const temp = res.videoSuperviseTrendList; |
||||
const categories = temp.map(item => item.name); |
||||
const values = temp.map(item => item.value); |
||||
proTrend.value.xAxis.data = categories; |
||||
proTrend.value.series[0].data = values; |
||||
} |
||||
const getData = async () => { |
||||
getOverview(currentDepartId,time.value); |
||||
getRankList(currentDepartId, time.value); |
||||
// getMap(time.value) |
||||
getTrend(currentDepartId, selectedYear.value) |
||||
getProblemTypeRate(currentDepartId, time.value) |
||||
// getProblemTypeRate(time.value); |
||||
getMapJSON(currentDepartId) |
||||
} |
||||
|
||||
// endregion |
||||
|
||||
// region 初始化数据和事件监听 |
||||
watch(time, () => { |
||||
getData() |
||||
}) |
||||
onMounted(() => { |
||||
getData() |
||||
}) |
||||
const handleCommand = (year) => { |
||||
selectedYear.value = year; // 更新当前选中的年份 |
||||
getTrend(currentDepartId, year) |
||||
}; |
||||
// endregion |
||||
|
||||
|
||||
// region 所有图表 |
||||
const proTrend = ref({ |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: true, |
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",], |
||||
axisTick: { |
||||
// 去掉X轴刻度线 |
||||
show: false |
||||
}, |
||||
}, |
||||
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: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
||||
}, |
||||
], |
||||
grid: { |
||||
left: '5%', // 图表距离容器左边的距离 |
||||
right: '2%', // 图表距离容器右边的距离 |
||||
top: '10%', // 图表距离容器上边的距离 |
||||
bottom: '20%', // 图表距离容器下边的距离 |
||||
containLabel: false // 是否包含坐标轴的标签 |
||||
}, |
||||
}); |
||||
echarts.registerMap("changsha", changshaMap); |
||||
const option = ref({ |
||||
geo: { |
||||
map: "changsha", |
||||
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: function (params) { |
||||
const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
||||
if (dataItem) { |
||||
return ` |
||||
<div class="tooltip"> |
||||
<div class="tooltip-title">${dataItem.originalName}</div> |
||||
<div class="tooltip-content"> |
||||
<ul class="tooltip-ul" > |
||||
<li>发现问题数 <span>${dataItem.discoverProblem}</span></li> |
||||
<li>整改问题数 <span>${dataItem.changedProblem}</span></li> |
||||
<li>涉及单位数 <span>${dataItem.relativeOrg}</span></li> |
||||
<li>涉及人数 <span>${dataItem.relativePer}</span></li> |
||||
<li>整改率 <span>${dataItem.changedRate}%</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>-</span></li> |
||||
<li>整改问题数 <span>-</span></li> |
||||
<li>涉及单位数 <span>-</span></li> |
||||
<li>涉及人数 <span>-</span></li> |
||||
<li>整改率 <span>-</span></li> |
||||
</ul> |
||||
</div> |
||||
</div>`; |
||||
} |
||||
}, |
||||
}, |
||||
visualMap: { |
||||
type: "piecewise", |
||||
bottom: 10, |
||||
pieces: [ |
||||
{gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"}, |
||||
{gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
||||
{gte: 400, label: "高于平均问题30%", color: "#D34343"},], |
||||
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", |
||||
borderColor: "#24D2EE", |
||||
borderWidth: 1 // 高亮时边框宽度 |
||||
}, |
||||
}, |
||||
emphasis: { |
||||
areaColor: "#FFD700", // 高亮时区域颜色 |
||||
borderColor: "#FF0000", // 高亮时边框颜色 |
||||
borderWidth: 4 // 高亮时边框宽度 |
||||
}, |
||||
data: mapIconList, |
||||
|
||||
} |
||||
], |
||||
}) |
||||
const ProblemTypeRateChart = ref({ |
||||
series: [ |
||||
{ |
||||
type: "pie", |
||||
radius: ["40%", "70%"], |
||||
label: { |
||||
color: "#fff", |
||||
}, |
||||
data: [], |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
}); // 问题类型占比 |
||||
// endregion |
||||
|
||||
|
||||
|
||||
|
||||
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; |
||||
} |
||||
} |
||||
|
||||
.message { |
||||
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(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( |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.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; /* 右边颜色，与背景颜色相同 */ |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
.gobal-dropdown-container { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 15px; |
||||
} |
||||
|
||||
.test { |
||||
width: 95px; |
||||
height: 25px; |
||||
background: #1C3472; |
||||
} |
||||
|
||||
.gobal-dropdown-container { |
||||
position: absolute; |
||||
right: 20px; |
||||
top: 15px; |
||||
} |
||||
|
||||
.my-gobal-yearselect { |
||||
font-size: 14px; |
||||
padding-top: 6px; |
||||
padding-left: 20px; |
||||
width: 90px; |
||||
color: #fff; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
Loading…
Reference in new issue