|
|
|
|
@ -10,7 +10,7 @@
|
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div class="descriptions_cell text-center"> |
|
|
|
|
<div class="descriptions_content"> |
|
|
|
|
{{ currentOverview.firstMail }} |
|
|
|
|
{{ currentLeftOverview.firstMail }} |
|
|
|
|
</div> |
|
|
|
|
<div class="descriptions_label"> |
|
|
|
|
初信初访 |
|
|
|
|
@ -20,7 +20,7 @@
|
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div class="descriptions_cell text-center"> |
|
|
|
|
<div class="descriptions_content"> |
|
|
|
|
{{ currentOverview.repeatMail }} |
|
|
|
|
{{ currentLeftOverview.repeatMail }} |
|
|
|
|
</div> |
|
|
|
|
<div class="descriptions_label"> |
|
|
|
|
重复信访 |
|
|
|
|
@ -30,7 +30,7 @@
|
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div class="descriptions_cell text-center"> |
|
|
|
|
<div class="descriptions_content"> |
|
|
|
|
{{ currentOverview.leaderMail }} |
|
|
|
|
{{ currentLeftOverview.leaderMail }} |
|
|
|
|
</div> |
|
|
|
|
<div class="descriptions_label"> |
|
|
|
|
领导接访数 |
|
|
|
|
@ -39,10 +39,10 @@
|
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<datav-card> |
|
|
|
|
<datav-tabs v-model="activeTab"> |
|
|
|
|
<datav-tabs v-model="activeTab" ref="firstAndRepeat"> |
|
|
|
|
<datav-tab-item label="分县市局" name="1"> |
|
|
|
|
<datav-tabs |
|
|
|
|
v-model="activeMailTab" |
|
|
|
|
v-model="fxsjFirstAndRepeatTab" |
|
|
|
|
type="bottom-button" |
|
|
|
|
> |
|
|
|
|
<datav-tab-item label="初信初访" name="1"> |
|
|
|
|
@ -169,10 +169,11 @@
|
|
|
|
|
:option="option" |
|
|
|
|
autoresize |
|
|
|
|
@click="handleClick" |
|
|
|
|
ref="mailMap" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<datav-card title="信访趋势"> |
|
|
|
|
<datav-tabs v-model="activeMailTrend" @change="handleTabChange"> |
|
|
|
|
<datav-card title="信访趋势" ref="mailTrendCard"> |
|
|
|
|
<datav-tabs v-model="mailTrendTabs" @change="handleTabChange"> |
|
|
|
|
<datav-tab-item label="国家信访" name="1"> |
|
|
|
|
<v-charts |
|
|
|
|
style="width: 105%; height: 300px;" |
|
|
|
|
@ -254,10 +255,11 @@
|
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<datav-card> |
|
|
|
|
<datav-tabs v-model="activeTabRight"> |
|
|
|
|
<datav-tabs v-model="activeTabRight" ref="entanglement"> |
|
|
|
|
<datav-tab-item label="分县市局" name="1"> |
|
|
|
|
<datav-tabs |
|
|
|
|
type="bottom-button" |
|
|
|
|
v-model="fxsjEntanglementTab" |
|
|
|
|
> |
|
|
|
|
<datav-tab-item label="领导督办" name="1"> |
|
|
|
|
<el-scrollbar height="300px"> |
|
|
|
|
@ -364,12 +366,12 @@ import {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//region 所有变量 |
|
|
|
|
let timer; |
|
|
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
|
const activeTab = ref("1"); |
|
|
|
|
const bwzdActiveTab = ref("1"); // 部委支队初重信tab |
|
|
|
|
const activeMailTrend = ref("1"); // 信访趋势tab |
|
|
|
|
const activeMailTab = ref("1"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const activeTabRight = ref("1"); |
|
|
|
|
const overview = ref({ |
|
|
|
|
totalMail: 0, |
|
|
|
|
@ -447,141 +449,19 @@ const leaderViewColors = [
|
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
//endregion |
|
|
|
|
|
|
|
|
|
// region 所有函数 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getFirstAndRepeatMailRank = async (timeValue = time.value) => { |
|
|
|
|
const res = await getFirstAndRepeatMail(timeValue) |
|
|
|
|
fxjsFirstAndRepeatOverview.value = res.fxjsFirstAndRepeatOverview; |
|
|
|
|
bwzdFirstAndRepeatOverview.value = res.bwzdFirstAndRepeatOverview |
|
|
|
|
fxsjFirstMailList.value = res.fxsjFirstRankList; |
|
|
|
|
fxsjRepeatMailList.value = res.fxsjRepeatRankList; |
|
|
|
|
fxsjLeaderViewMailList.value = res.fxsjLeaderViewRankList; |
|
|
|
|
|
|
|
|
|
bwzdFirstMailList.value = res.bwzdFirstRankList; |
|
|
|
|
bwzdRepeatMailList.value = res.bwzdRepeatRankList; |
|
|
|
|
bwzdLeaderViewMailList.value = res.bwzdLeaderViewRankList; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const getOverview = async (timeValue = time.value) => { |
|
|
|
|
const res = await getAllMailCount(timeValue) |
|
|
|
|
overview.value = res.overview; |
|
|
|
|
} |
|
|
|
|
const getTrend = async (year = selectedYear.value) => { |
|
|
|
|
const res = await getMailTrend(year); |
|
|
|
|
const policeList = res.policeList; |
|
|
|
|
const commissionerList = res.commissionerList; |
|
|
|
|
const numberList = res.numberList; |
|
|
|
|
const countryList = res.countryList; |
|
|
|
|
const policecategories = policeList.map(item => item.name); |
|
|
|
|
const policevalues = policeList.map(item => item.value); |
|
|
|
|
const managecategories = commissionerList.map(item => item.name); |
|
|
|
|
const managevalues = commissionerList.map(item => item.value); |
|
|
|
|
const numbercategories = numberList.map(item => item.name); |
|
|
|
|
const numbervalues = numberList.map(item => item.value); |
|
|
|
|
const countrycategories = countryList.map(item => item.name); |
|
|
|
|
const countryvalues = countryList.map(item => item.value); |
|
|
|
|
// 更新图表数据 |
|
|
|
|
policeTrend.value.xAxis.data = policecategories; |
|
|
|
|
policeTrend.value.series[0].data = policevalues; |
|
|
|
|
manageTrend.value.xAxis.data = managecategories; |
|
|
|
|
manageTrend.value.series[0].data = managevalues; |
|
|
|
|
numberTrend.value.xAxis.data = numbercategories; |
|
|
|
|
numberTrend.value.series[0].data = numbervalues; |
|
|
|
|
countryTrend.value.xAxis.data = countrycategories; |
|
|
|
|
countryTrend.value.series[0].data = countryvalues; |
|
|
|
|
} |
|
|
|
|
const getEntangleMassRank = async (timeValue = time.value) => { |
|
|
|
|
const res = await getEntanglementAndMassMail(timeValue) |
|
|
|
|
fxsjMailEntanglementMassOverview.value = res.fxsjMailEntanglementMassOverview; |
|
|
|
|
bwzdMailEntanglementMassOverview.value = res.bwzdMailEntanglementMassOverview; |
|
|
|
|
fxsjEntanglementMailList.value = res.fxsjEntanglementList; |
|
|
|
|
fxsjMassMailList.value = res.fxsjMassList; |
|
|
|
|
fxsjLeaderReviewMailList.value = res.fxsjLeaderReviewList; |
|
|
|
|
|
|
|
|
|
bwzdLeaderReviewMailList.value = res.bwzdLeaderReviewList; |
|
|
|
|
bwzdEntanglementMailList.value = res.bwzdEntanglementList; |
|
|
|
|
bwzdMassMailList.value = res.bwzdMassList; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const mailMapIconList = ref([]); |
|
|
|
|
const getMailMapIconList = async (timeValue = time.value) => { |
|
|
|
|
const res = await getMailMapIcon(timeValue); |
|
|
|
|
const mappedData = res.mailMapIconList.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, |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
mailMapIconList.value = mappedData; |
|
|
|
|
console.log(mailMapIconList) |
|
|
|
|
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 getData = () => { |
|
|
|
|
getFirstAndRepeatMailRank(); |
|
|
|
|
getOverview(); |
|
|
|
|
getMailMapIconList() |
|
|
|
|
getTrend(); |
|
|
|
|
getEntangleMassRank(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const currentOverview = computed(() => { |
|
|
|
|
return activeTab.value === '1' ? fxjsFirstAndRepeatOverview.value : bwzdFirstAndRepeatOverview.value; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const currentRightOverview = computed(() => { |
|
|
|
|
return activeTabRight.value === '1' ? fxsjMailEntanglementMassOverview.value : bwzdMailEntanglementMassOverview.value; |
|
|
|
|
}); |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
const fxsjFirstAndRepeatTab = ref("1"); |
|
|
|
|
const firstAndRepeat = ref(null) |
|
|
|
|
const mailMap = ref(null); |
|
|
|
|
const mailTrendTabs = ref("1"); |
|
|
|
|
const mailTrendCard = ref(null) |
|
|
|
|
const fxsjEntanglementTab = ref("1"); |
|
|
|
|
const entanglement = ref(null) |
|
|
|
|
let fxsjFirstAndRepeatIntervalId; |
|
|
|
|
let fxsjEntanglementIntervalId; |
|
|
|
|
let mailTrendIntervalId; |
|
|
|
|
let mailMapIntervalId; |
|
|
|
|
//endregion |
|
|
|
|
|
|
|
|
|
// region 所有图 |
|
|
|
|
echarts.registerMap("changsha", changshaMap); |
|
|
|
|
@ -591,7 +471,7 @@ const gobalTempMapVoList = [
|
|
|
|
|
"total": 0, |
|
|
|
|
"countryTotal": 0, |
|
|
|
|
"policeTotal": 0, |
|
|
|
|
"commissionerTotal":0, |
|
|
|
|
"commissionerTotal": 0, |
|
|
|
|
"numTotal": 0, |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
@ -603,6 +483,7 @@ const option = ref({
|
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
position: 'bottom', |
|
|
|
|
formatter: function (params) { |
|
|
|
|
console.log(params) |
|
|
|
|
const dataItem = mailMapIconList.value.find(item => item.name.includes(params.name.substring(0, 2))); |
|
|
|
|
@ -947,7 +828,6 @@ const option2 = {
|
|
|
|
|
{value: 72, name: "慢作为"}, |
|
|
|
|
{value: 24, name: "意见建议"}, |
|
|
|
|
{value: 5, name: "纪律作风"}, |
|
|
|
|
|
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
@ -977,23 +857,217 @@ const option3 = {
|
|
|
|
|
}; |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region 所有函数 |
|
|
|
|
|
|
|
|
|
// region 监听|事件 |
|
|
|
|
const handleCommand = (year) => { |
|
|
|
|
selectedYear.value = year; |
|
|
|
|
getTrend() |
|
|
|
|
|
|
|
|
|
const getFirstAndRepeatMailRank = async (timeValue = time.value) => { |
|
|
|
|
const res = await getFirstAndRepeatMail(timeValue) |
|
|
|
|
fxjsFirstAndRepeatOverview.value = res.fxjsFirstAndRepeatOverview; |
|
|
|
|
bwzdFirstAndRepeatOverview.value = res.bwzdFirstAndRepeatOverview |
|
|
|
|
fxsjFirstMailList.value = res.fxsjFirstRankList; |
|
|
|
|
fxsjRepeatMailList.value = res.fxsjRepeatRankList; |
|
|
|
|
fxsjLeaderViewMailList.value = res.fxsjLeaderViewRankList; |
|
|
|
|
|
|
|
|
|
bwzdFirstMailList.value = res.bwzdFirstRankList; |
|
|
|
|
bwzdRepeatMailList.value = res.bwzdRepeatRankList; |
|
|
|
|
bwzdLeaderViewMailList.value = res.bwzdLeaderViewRankList; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const getOverview = async (timeValue = time.value) => { |
|
|
|
|
const res = await getAllMailCount(timeValue) |
|
|
|
|
overview.value = res.overview; |
|
|
|
|
} |
|
|
|
|
const getTrend = async (year = selectedYear.value) => { |
|
|
|
|
const res = await getMailTrend(year); |
|
|
|
|
const policeList = res.policeList; |
|
|
|
|
const commissionerList = res.commissionerList; |
|
|
|
|
const numberList = res.numberList; |
|
|
|
|
const countryList = res.countryList; |
|
|
|
|
const policecategories = policeList.map(item => item.name); |
|
|
|
|
const policevalues = policeList.map(item => item.value); |
|
|
|
|
const managecategories = commissionerList.map(item => item.name); |
|
|
|
|
const managevalues = commissionerList.map(item => item.value); |
|
|
|
|
const numbercategories = numberList.map(item => item.name); |
|
|
|
|
const numbervalues = numberList.map(item => item.value); |
|
|
|
|
const countrycategories = countryList.map(item => item.name); |
|
|
|
|
const countryvalues = countryList.map(item => item.value); |
|
|
|
|
// 更新图表数据 |
|
|
|
|
policeTrend.value.xAxis.data = policecategories; |
|
|
|
|
policeTrend.value.series[0].data = policevalues; |
|
|
|
|
manageTrend.value.xAxis.data = managecategories; |
|
|
|
|
manageTrend.value.series[0].data = managevalues; |
|
|
|
|
numberTrend.value.xAxis.data = numbercategories; |
|
|
|
|
numberTrend.value.series[0].data = numbervalues; |
|
|
|
|
countryTrend.value.xAxis.data = countrycategories; |
|
|
|
|
countryTrend.value.series[0].data = countryvalues; |
|
|
|
|
} |
|
|
|
|
const getEntangleMassRank = async (timeValue = time.value) => { |
|
|
|
|
const res = await getEntanglementAndMassMail(timeValue) |
|
|
|
|
fxsjMailEntanglementMassOverview.value = res.fxsjMailEntanglementMassOverview; |
|
|
|
|
bwzdMailEntanglementMassOverview.value = res.bwzdMailEntanglementMassOverview; |
|
|
|
|
fxsjEntanglementMailList.value = res.fxsjEntanglementList; |
|
|
|
|
fxsjMassMailList.value = res.fxsjMassList; |
|
|
|
|
fxsjLeaderReviewMailList.value = res.fxsjLeaderReviewList; |
|
|
|
|
|
|
|
|
|
bwzdLeaderReviewMailList.value = res.bwzdLeaderReviewList; |
|
|
|
|
bwzdEntanglementMailList.value = res.bwzdEntanglementList; |
|
|
|
|
bwzdMassMailList.value = res.bwzdMassList; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const mailMapIconList = ref([]); |
|
|
|
|
const getMailMapIconList = async (timeValue = time.value) => { |
|
|
|
|
const res = await getMailMapIcon(timeValue); |
|
|
|
|
const mappedData = res.mailMapIconList.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, |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
mailMapIconList.value = mappedData; |
|
|
|
|
console.log(mailMapIconList) |
|
|
|
|
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 getData = () => { |
|
|
|
|
getFirstAndRepeatMailRank(); |
|
|
|
|
getOverview(); |
|
|
|
|
getMailMapIconList() |
|
|
|
|
getTrend(); |
|
|
|
|
getEntangleMassRank(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const currentLeftOverview = computed(() => { |
|
|
|
|
return activeTab.value === '1' ? fxjsFirstAndRepeatOverview.value : bwzdFirstAndRepeatOverview.value; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const currentRightOverview = computed(() => { |
|
|
|
|
return activeTabRight.value === '1' ? fxsjMailEntanglementMassOverview.value : bwzdMailEntanglementMassOverview.value; |
|
|
|
|
}); |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// region 动画 |
|
|
|
|
const fxsjFirstAndRepeatAnimation = () => { |
|
|
|
|
fxsjFirstAndRepeatTab.value = (parseInt(fxsjFirstAndRepeatTab.value) % 3 + 1).toString(); |
|
|
|
|
}; |
|
|
|
|
fxsjFirstAndRepeatIntervalId = setInterval(fxsjFirstAndRepeatAnimation, 3000); |
|
|
|
|
// 业务类型占比环形图 |
|
|
|
|
// const ywlxzbCircularAnimation = () => { |
|
|
|
|
// const ywlxzbOptionTemp = ywlxzbOption?.value?.chart; |
|
|
|
|
// if (!ywlxzbOptionTemp) return; |
|
|
|
|
// const length = ywlxPieOption.value.series[0].data.length; |
|
|
|
|
// const randomNum = Math.floor(Math.random() * length); |
|
|
|
|
// ywlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0}); |
|
|
|
|
// ywlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 |
|
|
|
|
// ywlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); |
|
|
|
|
// }; |
|
|
|
|
// ywlxPieCircularIntervalId = setInterval(ywlxzbCircularAnimation, 2000); |
|
|
|
|
|
|
|
|
|
// 地图动画 |
|
|
|
|
const mailMapAnimation = () => { |
|
|
|
|
const mapTemp = mailMap?.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, |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
mailMapIntervalId = setInterval(mailMapAnimation, 2000); |
|
|
|
|
|
|
|
|
|
// 趋势动画 |
|
|
|
|
const mailTrendAnimation = () => { |
|
|
|
|
mailTrendTabs.value = (parseInt(mailTrendTabs.value) % 4 + 1).toString(); |
|
|
|
|
} |
|
|
|
|
mailTrendIntervalId = setInterval(mailTrendAnimation, 2000); |
|
|
|
|
// 缠访集访情况动画 |
|
|
|
|
const fxsjEntanglementAnimation = () => { |
|
|
|
|
fxsjEntanglementTab.value = (parseInt(fxsjEntanglementTab.value) % 3 + 1).toString(); |
|
|
|
|
}; |
|
|
|
|
fxsjEntanglementIntervalId = setInterval(fxsjEntanglementAnimation, 3000); |
|
|
|
|
// // 问题类型占比环形图 |
|
|
|
|
// const wtlxzbCircularAnimation = () => { |
|
|
|
|
// const wtlxzbOptionTemp = wtlxzbOption?.value?.chart; |
|
|
|
|
// if (!wtlxzbOptionTemp) return; |
|
|
|
|
// const length = ywlxPieOption.value.series[0].data.length; |
|
|
|
|
// const randomNum = Math.floor(Math.random() * length); |
|
|
|
|
// wtlxzbOptionTemp?.dispatchAction({type: 'downplay', seriesIndex: 0}); |
|
|
|
|
// wtlxzbOptionTemp?.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: randomNum}); // 显示 |
|
|
|
|
// wtlxzbOptionTemp?.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: randomNum}); |
|
|
|
|
// }; |
|
|
|
|
// wtlxPieCircularIntervalId = setInterval(wtlxzbCircularAnimation, 2000); |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region 监听|事件 |
|
|
|
|
|
|
|
|
|
// 监听信访趋势tab切换 |
|
|
|
|
watch(time, () => { |
|
|
|
|
getData(); |
|
|
|
|
}) |
|
|
|
|
onMounted(() => { |
|
|
|
|
getData(); |
|
|
|
|
timer = setInterval(() => { |
|
|
|
|
activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString(); |
|
|
|
|
console.log("Active Tab: ", activeMailTab.value); |
|
|
|
|
}, 3000); // 每3秒切换一次 |
|
|
|
|
setupEventListeners(); |
|
|
|
|
}); |
|
|
|
|
const handleCommand = (year) => { |
|
|
|
|
selectedYear.value = year; |
|
|
|
|
getTrend() |
|
|
|
|
}; |
|
|
|
|
const handleClick = (params) => { |
|
|
|
|
const departId = params.data.departId; |
|
|
|
|
const url = router.resolve({ |
|
|
|
|
@ -1002,6 +1076,53 @@ const handleClick = (params) => {
|
|
|
|
|
}).href; |
|
|
|
|
window.open(url, "_blank"); |
|
|
|
|
} |
|
|
|
|
const setupEventListeners = () => { |
|
|
|
|
firstAndRepeatAnimationStop(); |
|
|
|
|
mailMapAnimationStop(); |
|
|
|
|
mailTrendAnimationStop(); |
|
|
|
|
fxsjEntanglementAnimationStop(); |
|
|
|
|
}; |
|
|
|
|
const firstAndRepeatAnimationStop = () => { |
|
|
|
|
const temp = firstAndRepeat.value.$el; |
|
|
|
|
temp.addEventListener('mouseenter', () => { |
|
|
|
|
clearInterval(fxsjFirstAndRepeatIntervalId) |
|
|
|
|
}); |
|
|
|
|
temp.addEventListener('mouseleave', () => { |
|
|
|
|
fxsjFirstAndRepeatIntervalId = setInterval(fxsjFirstAndRepeatAnimation, 3000); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
const mailMapAnimationStop = () => { |
|
|
|
|
const mapTemp = mailMap?.value?.chart; |
|
|
|
|
mapTemp.on('mousemove', (e) => { |
|
|
|
|
clearInterval(mailMapIntervalId); |
|
|
|
|
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(mailMapIntervalId); // 确保没有多个定时器同时运行 |
|
|
|
|
mailMapIntervalId = setInterval(mailMapAnimation, 2000); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
const mailTrendAnimationStop = () => { |
|
|
|
|
const temp = mailTrendCard?.value.$el; |
|
|
|
|
temp.addEventListener('mouseenter', () => { |
|
|
|
|
clearInterval(mailTrendIntervalId); |
|
|
|
|
}); |
|
|
|
|
temp.addEventListener('mouseleave', () => { |
|
|
|
|
clearInterval(mailTrendIntervalId); |
|
|
|
|
mailTrendIntervalId = setInterval(mailTrendAnimation, 2000); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
const fxsjEntanglementAnimationStop = () => { |
|
|
|
|
const temp = entanglement.value.$el; |
|
|
|
|
temp.addEventListener('mouseenter', () => { |
|
|
|
|
clearInterval(fxsjEntanglementIntervalId) |
|
|
|
|
}); |
|
|
|
|
temp.addEventListener('mouseleave', () => { |
|
|
|
|
fxsjEntanglementIntervalId = setInterval(fxsjEntanglementAnimation, 3000); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
