You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
883 lines
26 KiB
883 lines
26 KiB
<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" |
|
v-model="caseVerifRankTab" |
|
ref="caseVerifRankTabs" |
|
> |
|
<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" |
|
:color="colors" |
|
/> |
|
</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 |
|
ref="zfbaProProperty" |
|
/> |
|
</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%" |
|
@click="open('/data/ajhc?open=caseVerify')" |
|
/> |
|
<datav-statistic |
|
:value="overview.confirmed" |
|
title="查实案件数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.dealCasePro" |
|
title="查处问题（个）" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.punishOrg" |
|
title="问责单位数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.punishPre" |
|
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 |
|
@click="handleClick" |
|
ref="caseVerifMap" |
|
/> |
|
<datav-card title="查处问题趋势"> |
|
<v-charts |
|
style="height: 250px" |
|
:option="proTrend" |
|
autoresize |
|
ref="caseVerifProTrend" |
|
/> |
|
<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 |
|
ref="caseSourceRate" |
|
/> |
|
</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 |
|
ref="jbclSituation" |
|
/> |
|
</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 { |
|
getCaseVerificationRank, |
|
getCaseVerificationTrend, |
|
getCaseSourceRateAndDealSituation, |
|
getCaseVerificationMap, |
|
getCaseProblemProperty, |
|
getConfinementAndPause, |
|
getCaseVerificationCount, |
|
getCaseType, |
|
getConfinementBar |
|
} from "@/api/screen/caseVerif.ts"; |
|
import {circularChart} from "@/views/datav/simulateData/AnimationTestData.js"; |
|
import {mapOrgNameMapping} from "@/enums/orgMapping.js"; |
|
|
|
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 fxsjBarList = ref([]); |
|
const jsdwBarList = ref([]); |
|
const router = useRouter(); |
|
const overview = ref({ |
|
total: 0, |
|
confirmed: 0, // 查实案件数 |
|
dealCasePro: 0, // 查处问题（个） |
|
punishPre: 0, // 涉及人数 |
|
punishOrg: 0, // 问责单位数、 |
|
Rate: 0, // 查实率 |
|
}); |
|
let globalTempMapVoList = ref([]); |
|
|
|
const caseVerifRankTab = ref('1'); |
|
const caseVerifRankTabs = ref(null); |
|
const zfbaProProperty = ref(null); |
|
const caseVerifMap = ref(null); |
|
const caseVerifProTrend = ref(null); |
|
const caseSourceRate = ref(null); |
|
const jbclSituation = ref(null); |
|
let caseVerifRankIntervalId; |
|
let caseVerifProPropertyIntervalId; |
|
let caseVerifMapIntervalId; |
|
let caseVerifTrendIntervalId; |
|
let caseVerifCaseSourceIntervalId; |
|
let caseVerifJbclSituationIntervalId; |
|
const colors = [ |
|
{ |
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
percentage: 80, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
percentage: 60, |
|
} |
|
]; |
|
|
|
// region 所有图表 |
|
echarts.registerMap("changsha", changshaMap); |
|
const option = ref({ |
|
geo: { |
|
// 是上面注册时的名字哦，registerMap（'名字保持一致'） |
|
map: "changsha", |
|
itemStyle: { |
|
normal: { |
|
opacity: 0 // 设置透明度 |
|
}, |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
position: 'bottom', |
|
formatter: function (params) { |
|
console.log(params) |
|
const dataItem = globalTempMapVoList.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", |
|
roam: true, |
|
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", |
|
position: 'bottom', |
|
}, |
|
}); |
|
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", |
|
position: 'bottom', |
|
}, |
|
}); |
|
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", |
|
position: 'bottom', |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [], |
|
}, |
|
], |
|
}); |
|
const tzcloption = ref({ |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: [], |
|
}, |
|
], |
|
}); |
|
// endregion |
|
|
|
|
|
// region 所有函数 |
|
const getCaseTypeFun = async(timeValue)=>{ |
|
const res = await getCaseType(timeValue); |
|
console.log(res); |
|
zfbaPieOption.value.series[0].data = res.enforceList; |
|
fwglPieOption.value.series[0].data=res.interiorList; |
|
jgjjPieOption.value.series[0].data=res.disciplineList |
|
} |
|
|
|
const getConfinementBarFun = async(timeValue) =>{ |
|
const res = await getConfinementBar(timeValue); |
|
jbcloption.value.series[0].data=res.confinementList; |
|
} |
|
|
|
|
|
const getCaseVerificationRankData = async (timeValue) => { |
|
const res = await getCaseVerificationRank(timeValue); |
|
fxsjBarList.value = res.fxsjRankList |
|
jsdwBarList.value = res.jsdwRankList |
|
} |
|
// const getCaseProblemPropertyData = async (timeValue) => { |
|
// const res = await getCaseProblemProperty(timeValue); |
|
// zfbaPieOption.value.series[0].data = res.zfbaPieList; |
|
// // zfbaPieOption.value.series[0].data = circularChart |
|
// fwglPieOption.value.series[0].data = res.fwglPieList; |
|
// } |
|
const getCaseVerificationCountData = async (timeValue) => { |
|
const res = await getCaseVerificationCount(timeValue) |
|
overview.value = res.overview |
|
} |
|
const getCaseVerificationMapData = async (timeValue) => { |
|
const res = await getCaseVerificationMap(timeValue); |
|
const mappedData = mapOrgNameMapping(res.caseVerificationMapList, "total"); |
|
|
|
const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]); |
|
const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以 |
|
const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以 |
|
globalTempMapVoList.value = mappedData |
|
option.value.series[0].data = mappedData; |
|
option.value.visualMap.pieces = [ |
|
{gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"}, |
|
{gte: range60Percent, lte: range80Percent, label: "介于最大问题的60%~80%", color: "#F6A149"}, |
|
{gte: range80Percent, label: "高于最大问题80%", color: "#D34343"}, |
|
]; |
|
console.log('option.value',option.value) |
|
} |
|
const getCaseVerificationTrendData = async (year) => { |
|
const res = await getCaseVerificationTrend(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 getCaseSourceRateAndDealSituationData = async (timeValue) => { |
|
const res = await getCaseSourceRateAndDealSituation(timeValue); |
|
ajlyPieOption.value.series[0].data = res.caseSourceRateList |
|
// ajlyPieOption.value.series[0].data = circularChart |
|
wzclPieOption.value.series[0].data = res.dealSituationPieList |
|
} |
|
// //停职和禁闭处理之前的接口 |
|
// const getConfinementAndPauseData = async (timeValue) => { |
|
// const res = await getConfinementAndPause(timeValue); |
|
// // jbcloption.value.series[0].data = res.jbclList; |
|
// // jbcloption.value.series[0].data = circularChart |
|
// tzcloption.value.series[0].data = res.dzclList; |
|
// } |
|
|
|
async function getData() { |
|
getCaseVerificationRankData(time.value), |
|
// getCaseProblemPropertyData(time.value) |
|
getCaseVerificationCountData(time.value), |
|
getCaseVerificationTrendData(selectedYear.value), |
|
getCaseSourceRateAndDealSituationData(time.value), |
|
// getConfinementAndPauseData(time.value); |
|
getCaseTypeFun(time.value), |
|
getConfinementBarFun(time.value), |
|
getCaseVerificationMapData(time.value) |
|
|
|
} |
|
|
|
// endregion |
|
|
|
// region动画 |
|
// 分县市局排名动画 |
|
const caseVerifRankAnimation = () => { |
|
caseVerifRankTab.value = (parseInt(caseVerifRankTab.value) % 2 + 1).toString(); |
|
}; |
|
caseVerifRankIntervalId = setInterval(caseVerifRankAnimation, 2000); |
|
const caseVerifProPropertyAnimation = () => { |
|
const temp = zfbaProProperty?.value?.chart; |
|
if (!temp) return; |
|
const length = zfbaPieOption.value.series[0].data.length; |
|
const randomNum = Math.floor(Math.random() * length); |
|
temp?.dispatchAction({type: 'downplay', seriesIndex: 0}); |
|
temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 |
|
temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); |
|
} |
|
caseVerifProPropertyIntervalId = setInterval(caseVerifProPropertyAnimation, 2000); |
|
// 地图动画 |
|
const caseVerifMapAnimation = () => { |
|
const mapTemp = caseVerifMap?.value?.chart; |
|
if (!mapTemp) return; |
|
// 来个随机数，9个图 0~8的整数就ok |
|
const randomNum = Math.floor(Math.random() * 9); |
|
mapTemp.dispatchAction({ |
|
type: "downplay", //downplay 取消高亮 |
|
seriesIndex: 0, |
|
}); |
|
mapTemp.dispatchAction({ |
|
type: "highlight", //highLight 高亮指定的数据图形 |
|
seriesIndex: 0, //系列index |
|
dataIndex: randomNum, //数据index |
|
}); |
|
mapTemp.dispatchAction({ |
|
type: "showTip", //showTip 显示提示框 |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); |
|
} |
|
caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000); |
|
// 问题趋势动画 |
|
const caseVerifTrendAnimation = () => { |
|
const proTrendTemp = caseVerifProTrend?.value?.chart; |
|
if (!proTrendTemp) return; |
|
const randomNum = Math.floor(Math.random() * 12); |
|
proTrendTemp.dispatchAction({ |
|
type: 'showTip', |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); |
|
} |
|
caseVerifTrendIntervalId = setInterval(caseVerifTrendAnimation, 2000); |
|
// 案件来源占比 |
|
const caseVerifCaseSourceRateAnimation = () => { |
|
const temp = caseSourceRate?.value?.chart; |
|
if (!temp) return; |
|
const length = ajlyPieOption.value.series[0].data.length; |
|
const randomNum = Math.floor(Math.random() * length); |
|
temp?.dispatchAction({type: 'downplay', seriesIndex: 0}); |
|
temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 |
|
temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); |
|
} |
|
caseVerifCaseSourceIntervalId = setInterval(caseVerifCaseSourceRateAnimation, 2000); |
|
// 禁闭处理情况 |
|
const caseVerifJbclSituationAnimation = () => { |
|
const temp = jbclSituation?.value?.chart; |
|
if (!temp) return; |
|
const length = jbcloption.value.series[0].data.length; |
|
const randomNum = Math.floor(Math.random() * length); |
|
temp?.dispatchAction({type: 'downplay', seriesIndex: 0}); |
|
temp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 |
|
temp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); |
|
} |
|
caseVerifJbclSituationIntervalId = setInterval(caseVerifJbclSituationAnimation, 2000); |
|
// endregion动画 |
|
|
|
|
|
// region 事件||监听 |
|
watch(time, () => { |
|
getData(); |
|
}); |
|
onMounted(() => { |
|
getData(); |
|
setupEventListeners(); |
|
}); |
|
const handleCommand = (year) => { |
|
selectedYear.value = year; // 更新当前选中的年份 |
|
getCaseVerificationTrendData(selectedYear.value); |
|
}; |
|
const handleClick = (params) => { |
|
const departId = params.data.departId; |
|
const url = router.resolve({ |
|
path: "/datav/subOneCaseVerif", |
|
query: {departId: departId}, |
|
}).href; |
|
window.open(url, "_blank"); |
|
} |
|
function open(path) { |
|
window.open(router.resolve(path).href); |
|
} |
|
const setupEventListeners = () => { |
|
caseVerifRankAnimationStop(); |
|
caseVerifMapAnimationStop(); |
|
caseVerifProPropertyAnimationStop(); |
|
caseVerifTrendAnimationStop(); |
|
caseVerifCaseSourceRateAnimationStop(); |
|
caseVerifJbclSituationAnimationStop(); |
|
}; |
|
const caseVerifRankAnimationStop = () => { |
|
const temp = caseVerifRankTabs.value.$el; |
|
temp?.addEventListener('mouseenter', () => { |
|
clearInterval(caseVerifRankIntervalId) |
|
}); |
|
temp?.addEventListener('mouseleave', () => { |
|
clearInterval(caseVerifRankIntervalId); // 确保没有多个定时器同时运行 |
|
caseVerifRankIntervalId = setInterval(caseVerifRankAnimation, 3000); |
|
}); |
|
} |
|
const caseVerifProPropertyAnimationStop = () => { |
|
const temp = zfbaProProperty?.value?.chart; |
|
temp?.on('mousemove', (e) => { |
|
clearInterval(caseVerifProPropertyIntervalId); |
|
temp.dispatchAction({type: "downplay", seriesIndex: 0,}); |
|
temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
}) |
|
temp?.on('mouseout', () => { |
|
clearInterval(caseVerifProPropertyIntervalId); |
|
caseVerifProPropertyIntervalId = setInterval(caseVerifProPropertyAnimation, 2000); |
|
}) |
|
} |
|
const caseVerifMapAnimationStop = () => { |
|
const mapTemp = caseVerifMap?.value?.chart; |
|
// 鼠标移入 |
|
mapTemp?.on('mousemove', (e) => { |
|
clearInterval(caseVerifMapIntervalId); |
|
mapTemp.dispatchAction({type: "downplay", seriesIndex: 0,}); |
|
mapTemp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
mapTemp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
}); |
|
// 鼠标移出 |
|
mapTemp?.on('mouseout', () => { |
|
clearInterval(caseVerifMapIntervalId); // 确保没有多个定时器同时运行 |
|
caseVerifMapIntervalId = setInterval(caseVerifMapAnimation, 2000); |
|
}); |
|
} |
|
const caseVerifTrendAnimationStop = () => { |
|
const temp = caseVerifProTrend?.value.getDom(); |
|
temp?.addEventListener('mouseenter', () => { |
|
clearInterval(caseVerifTrendIntervalId); |
|
}); |
|
temp?.addEventListener('mouseleave', () => { |
|
clearInterval(caseVerifTrendIntervalId); |
|
caseVerifTrendIntervalId = setInterval(caseVerifTrendAnimation, 1000); |
|
}); |
|
} |
|
const caseVerifCaseSourceRateAnimationStop = () => { |
|
const temp = caseSourceRate?.value?.chart; |
|
temp?.on('mousemove', (e) => { |
|
clearInterval(caseVerifCaseSourceIntervalId); |
|
temp.dispatchAction({type: "downplay", seriesIndex: 0,}); |
|
temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
}) |
|
temp?.on('mouseout', () => { |
|
clearInterval(caseVerifCaseSourceIntervalId); |
|
caseVerifCaseSourceIntervalId = setInterval(caseVerifCaseSourceRateAnimation, 2000); |
|
}) |
|
} |
|
const caseVerifJbclSituationAnimationStop = () => { |
|
const temp = jbclSituation?.value?.chart; |
|
temp?.on('mousemove', (e) => { |
|
clearInterval(caseVerifJbclSituationIntervalId); |
|
temp.dispatchAction({type: "downplay", seriesIndex: 0,}); |
|
temp.dispatchAction({type: "highlight", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
temp.dispatchAction({type: "showTip", seriesIndex: 0, dataIndex: e.dataIndex,}); |
|
}) |
|
temp?.on('mouseout', () => { |
|
clearInterval(caseVerifJbclSituationIntervalId); |
|
caseVerifJbclSituationIntervalId = setInterval(caseVerifJbclSituationAnimation, 2000); |
|
}) |
|
} |
|
// endregion |
|
|
|
</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> |
|
|
|
|
|
|