1340 lines
40 KiB
Vue
1340 lines
40 KiB
Vue
<template>
|
||
<div class="backgroundbox">
|
||
<!-- 关闭按钮 -->
|
||
<router-link to="/navigation" style="z-index: 100;" class="card1">
|
||
<div class="card-icon1">❌</div>
|
||
</router-link>
|
||
<header>
|
||
<h1>上海市食品安全风险预警</h1>
|
||
<div v-show="suducepingShow" class="color-white flex justify-center items-center" style="color: #81E7ED;">
|
||
数据加载耗时:{{ suducepingValue }}秒</div>
|
||
<!-- <div class="showTime"><span>2023-12-23 15:35:43</span></div> -->
|
||
</header>
|
||
<div class="left">
|
||
<div class='box1'>
|
||
<div class="boxall">
|
||
<div class="alltitle">{{ currentMonth }} 后各区各维度分构成比</div>
|
||
<div ref="echart2" class="navboxall" style=" height: 100%; width: 100%;"></div>
|
||
</div>
|
||
<div class="boxall-footer"></div>
|
||
</div>
|
||
<div class='box2'>
|
||
<div class="boxall">
|
||
<div class="alltitle">{{ currentMonth }} 后各区食品安全综合指数</div>
|
||
<div ref="echart1" class="navboxall" style=" height: 100%; width: 100%;"></div>
|
||
</div>
|
||
<div class="boxall-footer"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class='box3'>
|
||
<div class="boxall" style="padding: 0px;">
|
||
<!-- <div class="alltitle">标题样式333</div> -->
|
||
<div id='echart3box' ref="echart3" class="navboxall" style=" height: 100%;
|
||
width: 100%;
|
||
position: absolute;">
|
||
</div>
|
||
</div>
|
||
<div class="boxall-footer"></div>
|
||
</div>
|
||
<div class='box4'>
|
||
<div class="boxall">
|
||
<div class="alltitle">食品安全综合指数重点指标风险贡献构成比
|
||
<el-select class="selectBox" v-model="selectBoxValue" placeholder="Select" size="small"
|
||
@change="handleSelectChange">
|
||
<el-option class="optionBox" v-for="item in areaNameList" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</div>
|
||
<!-- <div class="selectBox"> -->
|
||
<!-- </div> -->
|
||
<div ref="echart4" class="navboxall" style=" height: 90%; width: 100%;"></div>
|
||
</div>
|
||
<div class="boxall-footer"></div>
|
||
</div>
|
||
</div>
|
||
<div class="shanghaimap">
|
||
<div ref="echartMap" class="w-full h-screen"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '../assets/css/compositelndex.css';
|
||
</style>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, onBeforeUnmount, reactive, computed } from "vue";
|
||
import shanghaishiJson from "../mapjson/shanghaishi.json";
|
||
import shanghaishiJieDaoJson from "../mapjson/shangHaiJieDao.json";
|
||
import echarts3json from "../mapjson/echarts3.json";
|
||
import type { GeoJSONSourceInput } from "echarts/types/src/coord/geo/geoTypes";
|
||
import * as echarts from "echarts";
|
||
import $ from 'jquery';
|
||
import { getcompositeIndexData, getAllData, getRelationshipNetwork, getPredictedScores, getTertiaryImportance } from "../api/compositeIndex";
|
||
import { index, link } from "d3";
|
||
import { da } from "element-plus/es/locale";
|
||
|
||
// import '../css/compositelndex.css';
|
||
|
||
const selectBoxValue = ref('浦东新区')
|
||
|
||
interface AllScoreVO {
|
||
primary_name: string;
|
||
now_score: number;
|
||
yuce_score: number;
|
||
month_percentage_change: number;
|
||
}
|
||
|
||
interface AreaYujingScore {
|
||
area: string;
|
||
all_score_vo: AllScoreVO;
|
||
xzcf_vo: AllScoreVO;
|
||
xxzs_vo: AllScoreVO;
|
||
tsjb_vo: AllScoreVO;
|
||
zfjc_vo: AllScoreVO;
|
||
cckh_vo: AllScoreVO;
|
||
cjjc_vo: AllScoreVO;
|
||
zhx_vo: AllScoreVO;
|
||
}
|
||
|
||
interface AreaYujingScoreList {
|
||
year: number;
|
||
month: number;
|
||
area_yujing_score_list: AreaYujingScore[];
|
||
}
|
||
|
||
// 定义 Field 类型
|
||
type Field = typeof weiduMapping[number]['field'];
|
||
|
||
interface echart2AreaYujingScore {
|
||
name: string;
|
||
xzcf: number;
|
||
xxzs: number;
|
||
tsjb: number;
|
||
zfjc: number;
|
||
cckh: number;
|
||
cjjc: number;
|
||
zhx: number;
|
||
}
|
||
|
||
|
||
interface DataTertiaryImportance {
|
||
month: number;
|
||
year: number;
|
||
area_tertiary_importance_list: AreaTertiaryImportance[];
|
||
}
|
||
|
||
interface AreaTertiaryImportance {
|
||
area_name: string;
|
||
primary_importance_groups_list: PrimaryImportanceGroup[];
|
||
}
|
||
|
||
interface PrimaryImportanceGroup {
|
||
primary_name: string;
|
||
tertiary_importance_list: TertiaryImportance[];
|
||
}
|
||
|
||
interface TertiaryImportance {
|
||
tertiary_name: string;
|
||
importance_percentage: number;
|
||
importance: number;
|
||
}
|
||
|
||
|
||
interface ZSYujingAreaMapVO {
|
||
area: string;
|
||
all_score_vo: YujingItemVo
|
||
xzcf_vo: YujingItemVo;
|
||
xxzs_vo: YujingItemVo;
|
||
tsjb_vo: YujingItemVo;
|
||
zfjc_vo: YujingItemVo;
|
||
cckh_vo: YujingItemVo;
|
||
cjjc_vo: YujingItemVo;
|
||
zhx_vo: YujingItemVo;
|
||
}
|
||
|
||
interface YujingItemVo {
|
||
primary_name: string;
|
||
now_score: number;
|
||
last_score: number;
|
||
yuce_score: number;
|
||
month_percentage_change: number;
|
||
}
|
||
|
||
const echartMap = ref(null);
|
||
let chartMap: echarts.ECharts | null = null;
|
||
var optionXyMap01: EChartsOption;
|
||
|
||
const echart1 = ref(null);
|
||
let chart1: echarts.ECharts | null = null;
|
||
var option1: EChartsOption;
|
||
|
||
const echart2 = ref(null);
|
||
let chart2: echarts.ECharts | null = null;
|
||
var option2: EChartsOption;
|
||
|
||
const echart3 = ref(null);
|
||
let chart3: echarts.ECharts | null = null;
|
||
var option3: EChartsOption;
|
||
|
||
const echart4 = ref(null);
|
||
let chart4: echarts.ECharts | null = null;
|
||
var option4: EChartsOption;
|
||
|
||
// const chart = ref();
|
||
|
||
const geoCoordMap: Record<string, [number, number]> = {
|
||
黄浦区: [121.480317, 31.213771],
|
||
徐汇区: [121.43752, 31.159973],
|
||
长宁区: [121.3822, 31.203123],
|
||
静安区: [121.457224, 31.255003],
|
||
普陀区: [121.399499, 31.241701],
|
||
虹口区: [121.484832, 31.26997],
|
||
杨浦区: [121.523797, 31.290755],
|
||
闵行区: [121.429972, 31.051658],
|
||
宝山区: [121.409934, 31.396896],
|
||
嘉定区: [121.250333, 31.350524],
|
||
浦东新区: [121.7395171, 31.11317039],
|
||
金山区: [121.220736, 30.814697],
|
||
松江区: [121.223543, 31.03047],
|
||
青浦区: [121.113021, 31.151209],
|
||
奉贤区: [121.568472, 30.902345],
|
||
崇明区: [121.597516, 31.596946],
|
||
};
|
||
const month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",];
|
||
|
||
// const dateStr: String[] = [];
|
||
let dateStr: string[] = ["2023-01-01", "2023-02-01", "2023-03-01"]; // 示例数据
|
||
|
||
|
||
// 定义一个响应式的字符串数组
|
||
const months = ref<string[]>(['一个月', '二个月', '三个月', '四个月', '五个月', '六个月',
|
||
'七个月', '八个月', '九个月', '十个月', '十一个月', '十二个月']);
|
||
|
||
// 假设currentIndex是由某个事件触发后设置的值
|
||
const currentIndex = ref<number>(0); // 初始值假设为0，即当前月份
|
||
|
||
// const currentMonth = ref('六个月')
|
||
const currentMonth = ref('')
|
||
|
||
const mapData = reactive<any>([[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []]);
|
||
|
||
const barData: number[][] = [];
|
||
|
||
const legend = [
|
||
"rgb(245, 166, 10)",
|
||
"rgb(197, 190, 36)",
|
||
"rgb(81, 184, 198)",
|
||
// "rgba(5, 27, 74)",
|
||
"rgba(30, 80, 179)",
|
||
];
|
||
const legend2 = [
|
||
["rgba(245, 166, 10, 1)", "rgba(245, 166, 10, 0.2)"],
|
||
["rgba(197, 190, 36, 1)", "rgba(197, 190, 36, 0.2)"],
|
||
["rgba(81, 184, 198, 1)", "rgba(81, 184, 198, 0.2)"],
|
||
["rgba(30, 80, 179, 1)", "rgba(30, 80, 179, 0.2)"],
|
||
// ["rgba(147, 235, 248, 0)", "rgba(147, 235, 248, 0.2)"],
|
||
];
|
||
|
||
//角标配置
|
||
let legendValue: number[][] = [[90, 92, 93]];
|
||
const scatterLegend = [
|
||
"rgb(254, 69, 0)",
|
||
"rgb(255, 200, 9)",
|
||
"rgb(143, 237, 143)",
|
||
"rgb(133, 204, 253)",
|
||
|
||
// "rgb(133, 204, 253)",
|
||
// "rgb(133, 204, 253)",
|
||
// "rgb(133, 204, 253)",
|
||
// "rgb(133, 204, 253)",
|
||
];
|
||
|
||
//接口速度测评
|
||
const suducepingShow = ref(true);
|
||
//接口速度测评单位：秒
|
||
const suducepingValue = ref(0);
|
||
const startValue = ref(0);
|
||
|
||
|
||
let scatterLegendValue: number[] = [-3, -1, 0];
|
||
|
||
for (let i = 0; i < mapData.length; i++) {
|
||
barData.push(mapData[i].map((data: any) => data.value));
|
||
// console.log(barData);
|
||
};
|
||
|
||
let yuceYearScore: { area_yujing_score_list: any; month: any; year: any; all_score_interval: any; month_percentage_change_interval: any }[] = [];
|
||
|
||
onMounted(() => {
|
||
|
||
chartMap = echarts.init(echartMap.value!);
|
||
chart1 = echarts.init(echart1.value!);
|
||
chart2 = echarts.init(echart2.value!);
|
||
chart3 = echarts.init(echart3.value!);
|
||
chart4 = echarts.init(echart4.value!);
|
||
|
||
areaNameList.forEach((area, index) => {
|
||
areaIndexMap.set(area, index);
|
||
});
|
||
|
||
startValue.value = performance.now(); // 记录开始时间
|
||
getPredictedScores().then((res) => {
|
||
const endCheckMonitoringValue = performance.now(); // 记录结束时间
|
||
const executionTime = endCheckMonitoringValue - startValue.value; // 计算执行时间
|
||
// 假设 executionTime 是毫秒数，将其转换为秒
|
||
const executionTimeInSeconds = parseFloat((executionTime / 1000).toFixed(2));
|
||
if (executionTimeInSeconds > suducepingValue.value) {
|
||
suducepingValue.value = executionTimeInSeconds;
|
||
}
|
||
dateStr = [];
|
||
yuceYearScore = res.data;
|
||
yuceYearScore.forEach((nowYuceYearScore: any, index: number) => {
|
||
// const nowYuceYearScore = yuceYearScore[index]
|
||
legendValue[index] = nowYuceYearScore.all_score_interval;
|
||
scatterLegendValue = nowYuceYearScore.month_percentage_change_interval;
|
||
const dataString = yuceYearScore[index].year + '年' + yuceYearScore[index].month + '月'
|
||
dateStr.push(dataString);
|
||
// debugger;
|
||
nowYuceYearScore.area_yujing_score_list.map((area_yujing_score_list: ZSYujingAreaMapVO) => {
|
||
return mapData[index].push({
|
||
month: nowYuceYearScore.month,
|
||
year: nowYuceYearScore.year,
|
||
name: area_yujing_score_list.area,
|
||
value: area_yujing_score_list.all_score_vo.now_score,
|
||
yuce_score: area_yujing_score_list.all_score_vo.yuce_score,
|
||
all_score_vo: area_yujing_score_list.all_score_vo,
|
||
xzcf_vo: area_yujing_score_list.xzcf_vo,
|
||
xxzs_vo: area_yujing_score_list.xxzs_vo,
|
||
tsjb_vo: area_yujing_score_list.tsjb_vo,
|
||
zfjc_vo: area_yujing_score_list.zfjc_vo,
|
||
cckh_vo: area_yujing_score_list.cckh_vo,
|
||
cjjc_vo: area_yujing_score_list.cjjc_vo,
|
||
zhx_vo: area_yujing_score_list.zhx_vo,
|
||
});
|
||
})
|
||
});
|
||
|
||
initChart();
|
||
initChart1();
|
||
initChart2();
|
||
})
|
||
|
||
initChart3();
|
||
initChart4();
|
||
// 监听窗口大小变化，以适应图表
|
||
// window.addEventListener('resize', resizeChart);
|
||
});
|
||
|
||
const initChart = () => {
|
||
optionXyMap01 = {
|
||
// 时间滚动轴
|
||
timeline: {
|
||
// data: month,
|
||
data: dateStr,
|
||
axisType: "category",
|
||
autoPlay: true,
|
||
currentIndex: 0,
|
||
playInterval: 3000,
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: "3%",
|
||
width: "80%",
|
||
// label: {
|
||
// textStyle: { color: "#ddd" }, // 修改这里
|
||
// emphasis: { textStyle: { color: "#fff" } },
|
||
// },
|
||
symbolSize: 10,
|
||
lineStyle: { color: "#555" },
|
||
checkpointStyle: { borderColor: "#777", borderWidth: 2 },
|
||
controlStyle: {
|
||
showNextBtn: true,
|
||
showPrevBtn: true,
|
||
color: '#666',
|
||
borderColor: '#666',
|
||
// normal: {
|
||
// color: '#666',
|
||
// borderColor: '#666'
|
||
// },
|
||
// emphasis: {
|
||
// color: '#aaa',
|
||
// borderColor: '#aaa'
|
||
// },
|
||
// showNextBtn: true,
|
||
// showPrevBtn: true,
|
||
// normal: { color: "#666", borderColor: "#666" },
|
||
// emphasis: { color: "#aaa", borderColor: "#aaa" },
|
||
},
|
||
},
|
||
baseOption: {
|
||
animation: true,
|
||
animationDuration: 1000,
|
||
animationEasing: "cubicInOut",
|
||
animationDurationUpdate: 1000,
|
||
animationEasingUpdate: "cubicInOut",
|
||
grid: {
|
||
right: "1%",
|
||
top: "15%",
|
||
bottom: "10%",
|
||
width: "20%",
|
||
},
|
||
// toolbox: {
|
||
// show: true,
|
||
// feature: {
|
||
// restore: { show: true, title: "重置地图大小" },
|
||
// saveAsImage: { show: true, title: "保存为图片" },
|
||
// },
|
||
// },
|
||
// 四个区间
|
||
visualMap: [
|
||
{
|
||
id: 'vm1',
|
||
type: "piecewise",
|
||
show: true,
|
||
splitNumber: 4,
|
||
pieces: [
|
||
{ gte: legendValue[currentIndex.value][2], color: legend[3] },
|
||
{ lt: legendValue[currentIndex.value][2], gte: legendValue[currentIndex.value][1], color: legend[2] },
|
||
{ lt: legendValue[currentIndex.value][1], gte: legendValue[currentIndex.value][0], color: legend[1] },
|
||
{ lt: legendValue[currentIndex.value][0], color: legend[0] },
|
||
],
|
||
selectedMode: false,
|
||
// inRange: ['red','blue'],
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
//定位区间
|
||
left: '60%', // 距离容器左侧 10%
|
||
top: '13%', // 垂直居中
|
||
},
|
||
{
|
||
id: 'vm2',
|
||
type: "piecewise",
|
||
itemWidth: 15,
|
||
itemHeight: 19,
|
||
show: true, // 不显示视觉映射控件
|
||
splitNumber: 4,
|
||
// itemSymbol: 'circle', // 强制设置为圆形
|
||
itemSymbol: 'path://M760.516923 78.769231l-7.483077-5.12-3.544615-3.544616a89.009231 89.009231 0 0 0-10.24-6.301538l-5.513846-3.544615a435.593846 435.593846 0 0 0-86.252308-39.384616h-4.332308l-27.175384-7.876923h-4.332308l-29.932308-7.483077h-1.969231c-10.24 0-21.267692-2.756923-31.901538-3.544615h-53.169231L477.735385 0H473.796923l-24.418461 4.726154c-14.572308 1.969231-27.569231 4.726154-39.384616 7.483077h-5.513846A407.630769 407.630769 0 0 0 351.704615 31.113846a426.929231 426.929231 0 0 0-105.550769 60.652308l-4.332308 3.150769a433.230769 433.230769 0 0 0-58.28923 617.550769c2.756923 3.150769 27.569231 29.538462 42.535384 42.929231l255.212308 255.212308a41.747692 41.747692 0 0 0 59.076923 0l255.212308-255.212308c14.966154-13.390769 39.384615-39.384615 42.535384-42.929231a433.230769 433.230769 0 0 0-78.76923-634.092307z',
|
||
pieces: [
|
||
{ gte: scatterLegendValue[2], color: scatterLegend[3] },
|
||
{ lt: scatterLegendValue[2], gte: scatterLegendValue[1], color: scatterLegend[2] },
|
||
{ lt: scatterLegendValue[1], gte: scatterLegendValue[0], color: scatterLegend[1] },
|
||
{ lt: scatterLegendValue[0], color: scatterLegend[0] }
|
||
],
|
||
selectedMode: false,
|
||
// inRange: ['red','blue'],
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
//定位区间
|
||
left: '55%', // 距离容器左侧 10%
|
||
top: '12.9%', // 垂直居中
|
||
itemGap: 5, // 新增图例项间距
|
||
inRange: {
|
||
// symbolSize: [30, 10]
|
||
},
|
||
}
|
||
],
|
||
geo: {
|
||
show: true,
|
||
map: "shanghaishi",
|
||
roam: false,
|
||
left: "32%",
|
||
zoom: 0.9,
|
||
label: {
|
||
//@ts-ignore
|
||
emphasis: { show: false }
|
||
},
|
||
// label: {
|
||
// show: false,
|
||
// },
|
||
// label: {
|
||
// normal: { show: false, },
|
||
// emphasis: { show: false },
|
||
// },
|
||
select: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: "",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
borderColor: "rgba(147, 235, 248, 1)",
|
||
borderWidth: 1,
|
||
shadowColor: "rgba(128, 217, 248, 1)",
|
||
shadowOffsetX: -2,
|
||
shadowOffsetY: 2,
|
||
shadowBlur: 10,
|
||
// normal: {
|
||
// borderColor: "rgba(147, 235, 248, 1)",
|
||
// borderWidth: 1,
|
||
// shadowColor: "rgba(128, 217, 248, 1)",
|
||
// shadowOffsetX: -2,
|
||
// shadowOffsetY: 2,
|
||
// shadowBlur: 10,
|
||
// },
|
||
emphasis: {
|
||
areaColor: "#389BB7",
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
// options: month.map((_, n) => ({
|
||
options: dateStr.map((_, n) => ({
|
||
backgroundColor: "#051b4a",
|
||
graphic: {
|
||
type: 'image',
|
||
id: 'backgroundImage',
|
||
style: {
|
||
image: 'src/image/1731056619440.jpg', // 替换为你的图片路径
|
||
width: '100%', // 或者设置为具体的宽度
|
||
height: '100%', // 或者设置为具体的高度
|
||
},
|
||
z: -1 // 确保背景图片在最底层
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "item",
|
||
formatter: (params: any) => {
|
||
// console.log(params);
|
||
if (params.componentType === "series") {
|
||
return getTooltipContent(params);
|
||
} else if (params.componentType === "timeline") {
|
||
return params.name;
|
||
}
|
||
// return params.name + ": " + params.value; // 根据实际的数据格式调整formatter
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "map",
|
||
map: "shanghaishi",
|
||
geoIndex: 0,
|
||
// aspectScale: 0.75, //设置地图长宽比
|
||
showLegendSymbol: false,
|
||
label: {
|
||
normal: { show: false },
|
||
emphasis: { show: false, textStyle: { color: "#fff" } },
|
||
},
|
||
roam: true,
|
||
itemStyle: {
|
||
normal: { areaColor: "#031525", borderColor: "#FFFFFF" },
|
||
emphasis: { areaColor: "#2B91B7" },
|
||
},
|
||
animation: false,
|
||
data: convertMapData(mapData[n], n),
|
||
},
|
||
// 定义一个 ECharts 系列，类型为散点图（scatter），用于在地图上展示散点数据
|
||
{
|
||
// 指定图表类型为散点图
|
||
type: "scatter",
|
||
// 指定使用地理坐标系，意味着散点将基于地图进行定位
|
||
coordinateSystem: "geo",
|
||
// 新增图例配置
|
||
legendHoverLink: true,
|
||
// 配置散点的标签
|
||
label: {
|
||
// 配置标签的常规状态
|
||
normal: {
|
||
// 显示标签
|
||
show: true,
|
||
// 标签的格式化字符串，{b} 表示数据项的名称
|
||
formatter: "{b}",
|
||
// 标签的位置，设置在散点的底部
|
||
position: "bottom",
|
||
},
|
||
},
|
||
// 涟漪特效配置，此处被注释掉了，若启用可实现点击散点时的涟漪动画效果
|
||
// rippleEffect: { period: 15, scale: 4, brushType: "fill" },
|
||
// 散点的图标形状，设置为图钉形状
|
||
symbol: "pin",
|
||
// 散点图标的大小
|
||
symbolSize: 30,
|
||
// 启用鼠标悬停时的动画效果
|
||
hoverAnimation: true,
|
||
// 关联视觉映射
|
||
visualMapId: 'vm2', // 关联第二个visualMap组件
|
||
// 散点图的数据，通过 converScatterData 函数将 mapData 数组中的第 n 项数据转换为适合散点图展示的格式
|
||
data: converScatterData(mapData[n]),
|
||
},
|
||
],
|
||
})) as echarts.EChartsOption[],
|
||
};
|
||
|
||
chartMap = echarts.init(echartMap.value!);
|
||
echarts.registerMap("shanghaishi", shanghaishiJson as GeoJSONSourceInput);
|
||
chartMap.setOption(optionXyMap01);
|
||
// onTimelineChanged(chartMap)
|
||
// 绑定时间轴变更事件
|
||
chartMap.on('timelinechanged', handleTimelineChange);
|
||
};
|
||
|
||
const handleTimelineChange = (event: any) => {
|
||
currentIndex.value = event.currentIndex;
|
||
currentMonth.value = yuceYearScore[currentIndex.value].year + '年' + yuceYearScore[currentIndex.value].month + '月'
|
||
// currentMonth.value = months.value[currentIndex.value];
|
||
|
||
// 更新第二个图表的数据
|
||
chart1?.setOption(updateEchart1Option(currentIndex.value));
|
||
chart2?.setOption(updateEchart2Option(currentIndex.value));
|
||
chart4?.setOption(updateEchart4Option(currentIndex.value));
|
||
};
|
||
|
||
// 创建一个映射表，用于排序
|
||
const areaIndexMap = new Map<string, number>();
|
||
|
||
const areaNameList = [
|
||
"上海市",
|
||
"浦东新区",
|
||
"闵行区",
|
||
"宝山区",
|
||
"松江区",
|
||
"嘉定区",
|
||
"杨浦区",
|
||
"普陀区",
|
||
"青浦区",
|
||
"奉贤区",
|
||
"徐汇区",
|
||
"静安区",
|
||
"金山区",
|
||
"虹口区",
|
||
"崇明区",
|
||
"长宁区",
|
||
"黄浦区"]
|
||
|
||
|
||
|
||
|
||
// 初始化方格
|
||
const initChart1 = () => {
|
||
const option = updateEchart1Option(0);
|
||
if (echart1.value) {
|
||
var chart1 = echarts.init(echart1.value);
|
||
chart1.setOption(option);
|
||
}
|
||
}
|
||
|
||
const updateEchart1Option = (index: number) => {
|
||
|
||
// 按指定顺序对一月排序
|
||
const sortedData = yuceYearScore[index].area_yujing_score_list.sort((a: AreaYujingScore, b: AreaYujingScore) => {
|
||
return areaIndexMap.get(a.area)! - areaIndexMap.get(b.area)!;
|
||
});
|
||
let nowScores = null;
|
||
if (index < 5) {
|
||
// 提取 now_score 成绩
|
||
nowScores = sortedData.map((item: AreaYujingScore) => item.all_score_vo.now_score);
|
||
}
|
||
|
||
// 提取 一月 成绩
|
||
const yuceYiScores = sortedData.map((item: AreaYujingScore) => item.all_score_vo.yuce_score);
|
||
|
||
// 方格1配置
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
textStyle: {
|
||
fontSize: 10
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
extraCssText: 'max-width: 200px; max-height: 150px; overflow-y: auto;'
|
||
},
|
||
legend: {
|
||
data: ['真实分', currentMonth.value],
|
||
top: '0',
|
||
textStyle: {
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
},
|
||
itemGap: 20,
|
||
},
|
||
grid: {
|
||
left: '5',
|
||
right: '10',
|
||
top: '10',
|
||
bottom: '20',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
interval: 0, // 显示所有标签
|
||
rotate: 45, // 旋转标签以避免拥挤
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 10,
|
||
color: 'rgba(255,255,255,.6)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
data: areaNameList
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
max: 100, // 设定折线图变化区间
|
||
min: 70,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.6)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '真实分',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#cdba00',
|
||
borderColor: 'rgba(137,189,2,0.27)',
|
||
borderWidth: 12
|
||
},
|
||
data: nowScores
|
||
},
|
||
{
|
||
name: currentMonth.value,
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#d87c7c',
|
||
borderColor: 'rgba(0,136,212,0.2)',
|
||
borderWidth: 12
|
||
},
|
||
data: yuceYiScores
|
||
}
|
||
]
|
||
};
|
||
|
||
return option
|
||
}
|
||
|
||
interface GraphNode {
|
||
symbolSize: number;
|
||
label?: {
|
||
show?: boolean;
|
||
};
|
||
}
|
||
|
||
type EChartsOption = echarts.EChartsOption;
|
||
|
||
const initChart2 = () => {
|
||
const option = updateEchart2Option(0);
|
||
chart2 = echarts.init(echart2.value!);
|
||
if (echart2.value) {
|
||
var chart2 = echarts.init(echart2.value);
|
||
chart2.setOption(option);
|
||
}
|
||
}
|
||
|
||
|
||
const updateEchart2Option = (index: number) => {
|
||
|
||
const allData: echart2AreaYujingScore[] = yuceYearScore[index].area_yujing_score_list.map((yujingCountyData: AreaYujingScore) => {
|
||
return {
|
||
name: yujingCountyData.area,
|
||
xzcf: yujingCountyData.xzcf_vo.yuce_score,
|
||
xxzs: yujingCountyData.xxzs_vo.yuce_score,
|
||
tsjb: yujingCountyData.tsjb_vo.yuce_score,
|
||
zfjc: yujingCountyData.zfjc_vo.yuce_score,
|
||
cckh: yujingCountyData.cckh_vo.yuce_score,
|
||
cjjc: yujingCountyData.cjjc_vo.yuce_score,
|
||
zhx: yujingCountyData.zhx_vo.yuce_score,
|
||
}
|
||
})
|
||
|
||
//计算各区总分
|
||
// const countyScore: number[] = [];
|
||
const countyScoreAdd = reactive<{ [key: string]: number }>({});
|
||
// const countyScoreAdd
|
||
allData.map((countyData: echart2AreaYujingScore) => {
|
||
countyScoreAdd[countyData.name] = 0;
|
||
weiduMapping.map(({ field }) => {
|
||
countyScoreAdd[countyData.name] = countyScoreAdd[countyData.name] + countyData[field as Field];
|
||
|
||
})
|
||
})
|
||
|
||
option2.series = weiduMapping.map(({ name, color, field }, sid) => {
|
||
return {
|
||
color: color,
|
||
name: name,
|
||
type: 'bar',
|
||
stack: 'total',
|
||
barWidth: '90%',
|
||
data: allData.map(countyData => {
|
||
const result = countyData[field as Field] / countyScoreAdd[countyData.name] * 100;
|
||
return parseFloat(result.toFixed(2));
|
||
}),
|
||
};
|
||
});
|
||
|
||
return option2
|
||
}
|
||
|
||
const rawData = [
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410],
|
||
[150, 212, 201, 154, 190, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 410]
|
||
];
|
||
const totalData: number[] = [];
|
||
for (let i = 0; i < rawData[0].length; ++i) {
|
||
let sum = 0;
|
||
for (let j = 0; j < rawData.length; ++j) {
|
||
sum += rawData[j][i];
|
||
}
|
||
totalData.push(sum);
|
||
}
|
||
|
||
const weiduMapping = [
|
||
{ name: '行政处罚', color: '#4b67e5', field: 'xzcf' as const },
|
||
{ name: '信息追溯', color: '#5dc7e3', field: 'xxzs' as const },
|
||
{ name: '投诉举报', color: '#59c78d', field: 'tsjb' as const },
|
||
{ name: '执法检查', color: '#98c998', field: 'zfjc' as const },
|
||
{ name: '抽查考核', color: '#d7b57f', field: 'cckh' as const },
|
||
{ name: '抽检监测', color: '#9264dd', field: 'cjjc' as const },
|
||
{ name: '综合性', color: '#c13b5d', field: 'zhx' as const },
|
||
// 可以继续添加其他类型
|
||
];
|
||
|
||
const series: echarts.BarSeriesOption[] = [];
|
||
|
||
option2 = {
|
||
legend: {
|
||
top: '0',
|
||
// orient: 'vertical', // 设置图例为垂直布局
|
||
align: 'left', // 对齐方式，可选值有 'left', 'right'
|
||
itemWidth: 10, // 图例项的宽度
|
||
itemGap: 5, // 图例项之间的间距
|
||
// 可以设置图例的最大高度，超过后滚动显示
|
||
height: 70, // 图例的最大高度
|
||
// 如果需要固定宽度，可以设置
|
||
// width: 200 // 图例的最大宽度
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
textStyle: {
|
||
fontSize: 10
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
extraCssText: 'max-width: 200px; max-height: 200px; overflow-y: auto;'
|
||
},
|
||
grid: {
|
||
left: 30,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 50
|
||
},
|
||
yAxis: {
|
||
max: 100,
|
||
type: 'value'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLabel: {
|
||
interval: 0, // 显示所有标签
|
||
rotate: 45, // 旋转标签以避免拥挤
|
||
show: true,
|
||
color: 'rgba(255,255,255,.6)', // 直接设置文本颜色
|
||
fontSize: 10, // 直接设置字体大小
|
||
// textStyle: {
|
||
// fontSize: 10,
|
||
// color: 'rgba(255,255,255,.6)'
|
||
// }
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
data: areaNameList
|
||
},
|
||
series
|
||
};
|
||
|
||
const chart3data = [
|
||
{
|
||
"name": "三国演义",
|
||
// "x": 0,
|
||
// y: 0,
|
||
"symbolSize": 150,
|
||
"draggable": "true",
|
||
"value": 27
|
||
}]
|
||
|
||
chart3data.map(data => {
|
||
data.symbolSize = 10
|
||
})
|
||
|
||
const initChart3 = () => {
|
||
|
||
getRelationshipNetwork().then((res) => {
|
||
const endCheckMonitoringValue = performance.now(); // 记录结束时间
|
||
const executionTime = endCheckMonitoringValue - startValue.value; // 计算执行时间
|
||
// 假设 executionTime 是毫秒数，将其转换为秒
|
||
const executionTimeInSeconds = parseFloat((executionTime / 1000).toFixed(2));
|
||
if (executionTimeInSeconds > suducepingValue.value) {
|
||
suducepingValue.value = executionTimeInSeconds;
|
||
}
|
||
const nodes = res.data.nodes;
|
||
const links = res.data.links;
|
||
const categories = res.data.categories;
|
||
|
||
// 步骤1: 提取所有 name 属性值
|
||
// const names = nodes.map((node: { category: any; }) => node.category);
|
||
|
||
// // 步骤2: 使用 Set 去重
|
||
// const uniqueNames = new Set(names);
|
||
|
||
// // 步骤3: 将去重后的 name 值重新构造成新的对象数组
|
||
// const categories = Array.from(uniqueNames).map(name => ({ name }));
|
||
|
||
// // 使用 Set 来存储唯一的名称
|
||
// const categories = Array.from(new Set(nodes.map((node: { category: any; }) => node.category)))
|
||
// .map((name: any) => { (name) });
|
||
|
||
nodes.map((data: { draggable: boolean; value: number; symbolSize: number; }) => {
|
||
data.symbolSize = 10
|
||
data.value = 15
|
||
data.draggable = false
|
||
})
|
||
|
||
if (echart3.value) {
|
||
chart3 = echarts.init(echart3.value);
|
||
chart3.hideLoading();
|
||
option3 = {
|
||
title: {
|
||
text: '食品安全综合指数重点指标关联网络',
|
||
// subtext: 'Default layout',
|
||
top: '8',
|
||
left: '11',
|
||
textStyle: {
|
||
color: '#81E7ED',
|
||
fontSize: 15, // 设置字体大小
|
||
fontWeight: 'bold', // 设置字体加粗
|
||
}
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
trigger: 'item',
|
||
textStyle: {
|
||
fontSize: 10
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
extraCssText: 'max-width: 200px; max-height: 150px; overflow-y: auto;'
|
||
},
|
||
legend: [
|
||
{
|
||
// selectedMode: 'single',
|
||
data: echarts3json.categories.map(function (a: { name: string }) {
|
||
return a.name;
|
||
})
|
||
}
|
||
],
|
||
animationDuration: 1500,
|
||
animationEasingUpdate: 'quinticInOut',
|
||
series: [{
|
||
name: '食品安全综合指数重点指标关联网络',
|
||
type: 'graph',
|
||
layout: 'force',
|
||
top: '13%',
|
||
force: {
|
||
repulsion: 1000,
|
||
edgeLength: 1000, // 调整边长
|
||
gravity: 10, // 吸引力，可以增加图的整体形状
|
||
layoutAnimation: true, // 启用布局动画
|
||
},
|
||
data: nodes,
|
||
links: links,
|
||
categories: categories,
|
||
focusNodeAdjacency: true,
|
||
roam: true, label: {
|
||
show: true,
|
||
position: 'top',
|
||
textBorderColor: '#fff',
|
||
color: '#fff'
|
||
},
|
||
lineStyle: {
|
||
color: 'source',
|
||
curveness: 0,
|
||
type: "solid"
|
||
}
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// textBorderColor: '#fff',
|
||
// color: '#fff'
|
||
// }
|
||
// },
|
||
// lineStyle: {
|
||
// normal: {
|
||
// color: 'source',
|
||
// curveness: 0,
|
||
// type: "solid"
|
||
// }
|
||
// }
|
||
}]
|
||
};
|
||
|
||
console.log(option3.series);
|
||
|
||
|
||
chart3.setOption(option3);
|
||
}
|
||
})
|
||
};
|
||
|
||
|
||
const groupedItems = new Map<number, DataTertiaryImportance>();
|
||
|
||
const initChart4 = () => {
|
||
|
||
|
||
if (echart4.value) {
|
||
|
||
getTertiaryImportance().then((res) => {
|
||
const endCheckMonitoringValue = performance.now(); // 记录结束时间
|
||
const executionTime = endCheckMonitoringValue - startValue.value; // 计算执行时间
|
||
// 假设 executionTime 是毫秒数，将其转换为秒
|
||
const executionTimeInSeconds = parseFloat((executionTime / 1000).toFixed(2));
|
||
if (executionTimeInSeconds > suducepingValue.value) {
|
||
suducepingValue.value = executionTimeInSeconds;
|
||
}
|
||
|
||
// res.data.group
|
||
|
||
res.data.forEach((dataTertiaryImportance: DataTertiaryImportance, index: number) => {
|
||
groupedItems.set(index, dataTertiaryImportance);
|
||
});
|
||
|
||
const option4 = updateEchart4Option(0)
|
||
chart4 = echarts.init(echart4.value!);
|
||
chart4.setOption(option4)
|
||
})
|
||
}
|
||
}
|
||
|
||
const handleSelectChange = (value: string) => {
|
||
updateEchart4Option(currentIndex.value)
|
||
};
|
||
|
||
const updateEchart4Option = (index: number) => {
|
||
|
||
const findPrimaryImportance = (Primary: String, PrimaryImportanceGroup: PrimaryImportanceGroup[]) => {
|
||
const foundImportanceGroup = PrimaryImportanceGroup?.find(item => item.primary_name === Primary)?.tertiary_importance_list!;
|
||
return foundImportanceGroup.map((TertiaryImportance) => {
|
||
return {
|
||
value: TertiaryImportance.importance_percentage,
|
||
name: TertiaryImportance.tertiary_name
|
||
}
|
||
})
|
||
}
|
||
//当前月的全部数据
|
||
const dataTertiaryImportance = groupedItems.get(index)!;
|
||
|
||
//当前区的全部数据
|
||
const foundTertiaryImportance = dataTertiaryImportance?.area_tertiary_importance_list.find(item => item.area_name === selectBoxValue.value)!;
|
||
const PrimaryImportanceGroup = foundTertiaryImportance.primary_importance_groups_list;
|
||
|
||
return option4 = {
|
||
color: ['#4b67e5', '#5dc7e3', '#59c78d', '#98c998', '#d7b57f', '#9264dd', '#c13b5d',],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
textStyle: {
|
||
fontSize: 10
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
extraCssText: 'max-width: 200px; max-height: 150px; overflow-y: auto;'
|
||
},
|
||
graphic: zhongyaoxingMapping.map(({ name, field }, index) => {
|
||
return {
|
||
type: 'text',
|
||
left: (index * 25 + 7) + '%',
|
||
top: '5%',
|
||
style: {
|
||
text: name, // 标题文本
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
fill: '#ffffff' // 文字颜色
|
||
}
|
||
}
|
||
}),
|
||
series: zhongyaoxingMapping.map(({ name, field }, index) => {
|
||
return {
|
||
name: name,
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: [12.5 + index * 25 + '%', '57%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
borderColor: '#293441',
|
||
borderWidth: 1
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 10,
|
||
fontWeight: 'bold',
|
||
color: '#6581a1'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: findPrimaryImportance(name, PrimaryImportanceGroup)
|
||
}
|
||
})
|
||
};
|
||
}
|
||
|
||
const zhongyaoxingMapping = [
|
||
{ name: '抽检监测', field: 'cjjc' },
|
||
{ name: '信息追溯', field: 'xxzs' },
|
||
{ name: '投诉举报', field: 'tsjb' },
|
||
{ name: '执法检查', field: 'zfjc' },
|
||
// 可以继续添加其他类型
|
||
];
|
||
|
||
function resizeChart() {
|
||
if (chart1) {
|
||
chart1.resize();
|
||
}
|
||
if (chart2) {
|
||
chart2.resize();
|
||
}
|
||
if (chart3) {
|
||
chart3.resize();
|
||
}
|
||
if (chart4) {
|
||
chart4.resize();
|
||
}
|
||
}
|
||
|
||
|
||
const convertMapData = (data: any[], index1: number) => {
|
||
console.log(data, "2222222222222")
|
||
const legendValueMax = legendValue[index1][2]
|
||
return data.map((item) => {
|
||
const index =
|
||
legendValue[index1].findIndex((legend) => item.yuce_score <= legend) + (item.yuce_score > legendValueMax ? 4 : 0);
|
||
|
||
// debugger;
|
||
console.log(legendValue[index1]);
|
||
console.log(index1);
|
||
item.itemStyle = {
|
||
color: {
|
||
type: "radial",
|
||
x: 0.5,
|
||
y: 0.5,
|
||
r: 0.8,
|
||
colorStops: [
|
||
{ offset: 0, color: legend2[index][0] },
|
||
{ offset: 1, color: legend2[index][1] },
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
};
|
||
// console.log(item);
|
||
|
||
return item;
|
||
});
|
||
};
|
||
/**
|
||
* 该函数用于将输入的数据转换为适合 ECharts 散点图使用的数据格式。
|
||
* @param {any[]} data - 输入的数据数组，每个元素包含地区相关的信息。
|
||
* @returns {Array<Object|null>} - 转换后的数组，每个元素是一个对象，包含散点图所需的信息，过滤掉无效的元素。
|
||
*/
|
||
function converScatterData(data: any[]) {
|
||
// 打印输入的数据，方便调试，"111" 可能是用于标识该日志的辅助信息
|
||
console.log(data, "111");
|
||
// 对输入的数据数组进行遍历，将每个元素转换为适合散点图的数据格式
|
||
return data.map((item) => {
|
||
// 从 geoCoordMap 中获取当前地区的地理坐标
|
||
const geoCoord = geoCoordMap[item.name];
|
||
// 根据地区的月度百分比变化计算对应的颜色索引
|
||
// console.log(scatterLegendValue, "-------------")
|
||
// console.log('当前月度百分比变化值:', item.all_score_vo.month_percentage_change);
|
||
|
||
const index =
|
||
scatterLegendValue.findIndex(
|
||
// 查找第一个满足月度百分比变化小于等于当前阈值的索引
|
||
(scatter) => {
|
||
// console.log(`比较: 当前阈值=${scatter}, 变化值=${item.all_score_vo.month_percentage_change}`);
|
||
return item.all_score_vo.month_percentage_change <= scatter
|
||
}
|
||
) + (item.all_score_vo.month_percentage_change > 0 ? 4 : 0);
|
||
// const index =
|
||
// scatterLegendValue.findIndex(
|
||
// // 查找第一个满足月度百分比变化小于等于当前阈值的索引
|
||
// (scatter) => item.all_score_vo.month_percentage_change <= scatter
|
||
// ) + (item.all_score_vo.month_percentage_change > 0 ? 4 : 0);
|
||
// 打印计算得到的颜色索引，方便调试
|
||
// console.log(index);
|
||
//设置气泡大小的值
|
||
const bubbleSize = Math.abs(item.yuce_score - item.value) * 10;
|
||
console.log(bubbleSize, "333333333333333");
|
||
// 如果存在地理坐标，则返回一个包含散点图所需信息的对象，否则返回 null
|
||
return geoCoord
|
||
? {
|
||
// 地区名称
|
||
name: item.name,
|
||
// 地理坐标和数值的组合
|
||
value: geoCoord.concat(item.value),
|
||
// 月份信息
|
||
month: item.month,
|
||
// 散点的样式，主要设置颜色
|
||
itemStyle: {
|
||
color: scatterLegend[index],
|
||
},
|
||
// 设置气泡大小（新增）
|
||
// symbolSize: bubbleSize, // 根据数值动态调整大小
|
||
// symbolSize: Math.max(10, Math.min(50, bubbleSize)), // 限制在20-50区间
|
||
symbolSize: Math.abs(item.all_score_vo.month_percentage_change) * 10,
|
||
}
|
||
: null;
|
||
})
|
||
// 过滤掉数组中的 null 元素，确保返回的数组只包含有效的数据对象
|
||
.filter(Boolean);
|
||
}
|
||
|
||
const getTooltipContent = (item: any) => {
|
||
// debugger;
|
||
const areaData = mapData[item.data.month - 1].find((d: any) => d.name === item.name);
|
||
if (!areaData) return "";
|
||
|
||
let content = `${item.name}<br/>`;
|
||
// 添加预测分
|
||
content += `${'预测分'}：${areaData.yuce_score}<br/>`;
|
||
|
||
if (currentIndex.value < 5) {
|
||
// 添加真实分
|
||
content += formatScore(areaData.all_score_vo, "真实分");
|
||
}
|
||
//先留着，将来可能用
|
||
// 添加行政处罚
|
||
// content += formatScore(areaData.xzcf_vo, "行政处罚");
|
||
|
||
// // 添加信息追溯
|
||
// content += formatScore(areaData.xxzs_vo, "信息追溯");
|
||
|
||
// // 添加投诉举报
|
||
// content += formatScore(areaData.tsjb_vo, "投诉举报");
|
||
|
||
// // 添加执法检查
|
||
// content += formatScore(areaData.zfjc_vo, "执法检查");
|
||
|
||
// // 添加抽查考核
|
||
// content += formatScore(areaData.cckh_vo, "抽查考核");
|
||
|
||
// // 添加抽检监测
|
||
// content += formatScore(areaData.cjjc_vo, "抽检监测");
|
||
|
||
// // 添加综合性
|
||
// content += formatScore(areaData.zhx_vo, "综合性");
|
||
return content;
|
||
};
|
||
const formatScore = (scoreVo: any, primaryName: any) => {
|
||
const change = scoreVo.month_percentage_change;
|
||
const arrow = change > 0 ? "↑" : change < 0 ? "↓" : "";
|
||
const color = change > 0 ? "green" : change < 0 ? "red" : "";
|
||
let changeValue = Math.abs(change).toFixed(2);
|
||
changeValue = Number(changeValue) == 0 ? "" : changeValue;
|
||
|
||
return `${primaryName}：${scoreVo.now_score.toFixed(
|
||
1
|
||
)} <span style="color:${color}">${arrow}${changeValue}</span><br/>`;
|
||
};
|
||
|
||
// onBeforeUnmount(() => {
|
||
// const myChart: any = echarts.init(chart.value as unknown as HTMLElement);
|
||
// window.removeEventListener("resize", myChart.resize);
|
||
// });
|
||
</script>
|
||
|
||
<style>
|
||
.card1 {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: transparent;
|
||
border: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-icon1 {
|
||
font-size: 16px;
|
||
color: white;
|
||
}
|
||
</style>
|