|
|
|
@ -10,7 +10,7 @@ |
|
|
|
v-model="activeOrgTab" |
|
|
|
v-model="activeOrgTab" |
|
|
|
type="bottom-button" |
|
|
|
type="bottom-button" |
|
|
|
> |
|
|
|
> |
|
|
|
<datav-tab-item label="分县市局" name="1"> |
|
|
|
<datav-tab-item label="派出所" name="1"> |
|
|
|
<el-scrollbar height="340px"> |
|
|
|
<el-scrollbar height="340px"> |
|
|
|
<datav-chart-bar |
|
|
|
<datav-chart-bar |
|
|
|
:data="fxsjlist" |
|
|
|
:data="fxsjlist" |
|
|
|
@ -20,7 +20,7 @@ |
|
|
|
/> |
|
|
|
/> |
|
|
|
</el-scrollbar> |
|
|
|
</el-scrollbar> |
|
|
|
</datav-tab-item> |
|
|
|
</datav-tab-item> |
|
|
|
<datav-tab-item label="局属单位" name="2"> |
|
|
|
<datav-tab-item label="大队" name="2"> |
|
|
|
<el-scrollbar height="340px"> |
|
|
|
<el-scrollbar height="340px"> |
|
|
|
<datav-chart-bar |
|
|
|
<datav-chart-bar |
|
|
|
:data="jsdwlist" |
|
|
|
:data="jsdwlist" |
|
|
|
@ -75,6 +75,7 @@ |
|
|
|
style="width: 13.66%; margin-left: 10px" |
|
|
|
style="width: 13.66%; margin-left: 10px" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="map"> |
|
|
|
<v-charts |
|
|
|
<v-charts |
|
|
|
style="height: 360px" |
|
|
|
style="height: 360px" |
|
|
|
:option="option" |
|
|
|
:option="option" |
|
|
|
@ -82,7 +83,7 @@ |
|
|
|
ref="subOneGlobalMap" |
|
|
|
ref="subOneGlobalMap" |
|
|
|
@click="handleClick" |
|
|
|
@click="handleClick" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<datav-card title="问题趋势"> |
|
|
|
<datav-card title="问题趋势"> |
|
|
|
<v-charts |
|
|
|
<v-charts |
|
|
|
@ -130,7 +131,7 @@ |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
</main> |
|
|
|
</main> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<negative-info-depart-dialog v-model="show" :departId="tempDepartId" /> |
|
|
|
<negative-info-depart-dialog v-model="showDialog" :departId="tempDepartId"/> |
|
|
|
|
|
|
|
|
|
|
|
</el-scrollbar> |
|
|
|
</el-scrollbar> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -151,7 +152,7 @@ import { |
|
|
|
} from "@/api/screen/subScreen/subOneGlobal.ts"; |
|
|
|
} from "@/api/screen/subScreen/subOneGlobal.ts"; |
|
|
|
|
|
|
|
|
|
|
|
// region 各种变量 |
|
|
|
// region 各种变量 |
|
|
|
const show = ref(false); // 负面信息弹窗显示 |
|
|
|
const showDialog = ref(false); // 负面信息弹窗显示 |
|
|
|
const tempDepartId = ref(0); // 临时部门id |
|
|
|
const tempDepartId = ref(0); // 临时部门id |
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
const router = useRouter(); |
|
|
|
@ -196,7 +197,7 @@ const colors = [ |
|
|
|
percentage: 40, |
|
|
|
percentage: 40, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
let subOneGlobalMapIntervalId ; |
|
|
|
let subOneGlobalMapIntervalId; |
|
|
|
// endregion |
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -428,15 +429,15 @@ const getSubOneGlobalMapIcon = async (departId = currentDepartId, timeValue = ti |
|
|
|
value: item.totalPro, |
|
|
|
value: item.totalPro, |
|
|
|
}; |
|
|
|
}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); |
|
|
|
const maxItem = mappedData.reduce((max, item) => (Number(item.value) > Number(max.value) ? item : max), mappedData[0]); |
|
|
|
const avg = total / mappedData.length; // 计算平均值 |
|
|
|
const range60Percent = maxItem.value * 0.6 // 不用取整，小数也可以 |
|
|
|
const range30Percent = avg * 0.3 // 不用取整，小数也可以 |
|
|
|
const range80Percent = maxItem.value * 0.8 // 不用取整，小数也可以 |
|
|
|
globalTempMapVoList.value = mappedData; |
|
|
|
globalTempMapVoList.value = mappedData; |
|
|
|
option.value.series[0].data = globalTempMapVoList; |
|
|
|
option.value.series[0].data = globalTempMapVoList; |
|
|
|
option.value.visualMap.pieces = [ |
|
|
|
option.value.visualMap.pieces = [ |
|
|
|
{gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"}, |
|
|
|
{gte: 0, lte: range60Percent, label: "低于最大问题的60%", color: "#4987F6"}, |
|
|
|
{gte: avg - range30Percent, lte: avg + range30Percent + 0.1, label: "平均问题上下浮动30%内", color: "#F6A149"}, |
|
|
|
{gte: range60Percent, lte: range80Percent, label: "介于最大问题的60%~80%", color: "#F6A149"}, |
|
|
|
{gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"}, |
|
|
|
{gte: range80Percent, label: "高于最大问题80%", color: "#D34343"}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
} |
|
|
|
} |
|
|
|
const getSubOneGlobalTrendData = async (departId = currentDepartId, year) => { |
|
|
|
const getSubOneGlobalTrendData = async (departId = currentDepartId, year) => { |
|
|
|
@ -515,6 +516,8 @@ watch(time, () => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
const setupEventListeners = () => { |
|
|
|
const setupEventListeners = () => { |
|
|
|
const mySubOneGlobalMap = subOneGlobalMap?.value?.chart; |
|
|
|
const mySubOneGlobalMap = subOneGlobalMap?.value?.chart; |
|
|
|
|
|
|
|
const map = document.getElementById("map"); |
|
|
|
|
|
|
|
console.log(map) |
|
|
|
// 鼠标移入 |
|
|
|
// 鼠标移入 |
|
|
|
mySubOneGlobalMap.on('mousemove', (e) => { |
|
|
|
mySubOneGlobalMap.on('mousemove', (e) => { |
|
|
|
// console.log(e.dataIndex); |
|
|
|
// console.log(e.dataIndex); |
|
|
|
@ -525,15 +528,20 @@ const setupEventListeners = () => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 鼠标移出 |
|
|
|
// 鼠标移出 |
|
|
|
mySubOneGlobalMap.on('mouseout', () => { |
|
|
|
mySubOneGlobalMap.on('mouseout', () => { |
|
|
|
|
|
|
|
// 如果有弹窗 |
|
|
|
|
|
|
|
if (showDialog.value) { |
|
|
|
|
|
|
|
clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行 |
|
|
|
|
|
|
|
} else { |
|
|
|
clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行 |
|
|
|
clearInterval(subOneGlobalMapIntervalId); // 确保没有多个定时器同时运行 |
|
|
|
subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000); |
|
|
|
subOneGlobalMapIntervalId = setInterval(mapAnimation, 2000); |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleClick = (params) => { |
|
|
|
const handleClick = (params) => { |
|
|
|
const departId = params.data.departId; |
|
|
|
const departId = params.data.departId; |
|
|
|
show.value = true; |
|
|
|
showDialog.value = true; |
|
|
|
tempDepartId.value=2661 |
|
|
|
tempDepartId.value = departId |
|
|
|
clearInterval(subOneGlobalMapIntervalId); |
|
|
|
clearInterval(subOneGlobalMapIntervalId); |
|
|
|
// alert(departId) |
|
|
|
// alert(departId) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -556,6 +564,7 @@ const handleClick = (params) => { |
|
|
|
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; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
////浏阳市局 |
|
|
|
////浏阳市局 |
|
|
|
|
wxc
1 year ago