supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11/26/17：22 首页大屏地图颜色变化

main
不爱学习的石同学 1 year ago
parent
c6eded9a33
commit
ea741f29ad
4 changed files with 139 additions and 12742 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/api/outrequest.ts
  2. 237
      src/views/datav/Gobal.vue
  3. 12638
      src/views/datav/Jwpy.vue
  4. 3
      src/views/datav/SceneInsp.vue

3
src/api/outrequest.ts
Unescape View File

@ -12,7 +12,8 @@ type Options = {
query?: Record<string, any>,
params?: Record<string, any>,
body?: string | FormData | Record<string, any>,
showErrorMsg: bool
showErrorMsg: boolean,
};
function get(options: Options) {

237
src/views/datav/Gobal.vue
Unescape View File

@ -80,8 +80,8 @@
:option="option"
autoresize
/>
<div>
<div>
<datav-card title="问题趋势">
<v-charts
style="height: 260px;"
@ -102,7 +102,6 @@
</el-dropdown>
</div>
</datav-card>
</div>
@ -154,6 +153,18 @@ const jsdwlist = ref([]); // 局属单位机构问题排名
const ywzblist = ref([]); // 业务类型占比
const wtlxlist = ref([]); // 问题类型占比
const tcwtlist = ref([]); // 突出问题排名
const overview = ref({
totalPro: 0,
supervisionPro: 0,
caseVerificationPro: 0,
complaintPro: 0,
talkPro: 0,
auditPro: 0,
}); // 中央的概况数据
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]); // 时间范围
const gobalTempMapVoList = ref([
{
"name": "天心分局",
@ -164,8 +175,12 @@ const gobalTempMapVoList = ref([
"policePro": 11,
"reviewPro": 11
}
]); // 地图临时测试数据
]); // 地图临时数据
const router = useRouter();
const years = ref(['2024', '2023', '2022']); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
// endregion
@ -228,9 +243,6 @@ const proTrend = ref({
},
],
});
const years = ref(['2024', '2023', '2022']); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const handleCommand = (year) => {
selectedYear.value = year; // 更新当前选中的年份
getGobalRecentlyTrendByMonth(year).then(res => {
@ -262,7 +274,6 @@ const zfbaPieOption = computed(() => {
color: "#fff",
},
data: ywzblist.value,
},
],
};
@ -289,19 +300,6 @@ const wtlxPieOption = computed(() => {
// endregion
// region 初始化数据
const overview = ref({
totalPro: 0,
supervisionPro: 0,
caseVerificationPro: 0,
complaintPro: 0,
talkPro: 0,
auditPro: 0,
});
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
function getData() {
getOrganizationRank(time.value).then((res) => {
fxsjlist.value = res.fxsjlist;
@ -324,7 +322,54 @@ function getData() {
wtlxlist.value = res.wtlxlist;
});
getGobalMap(time.value).then(res => {
gobalTempMapVoList.value = res.gobalTempMapVoList;
// 对返回的数据进行映射处理
const mappedData = res.gobalTempMapVoList.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.totalPro,
};
});
gobalTempMapVoList.value = mappedData;
// gobalTempMapVoList.value = res.gobalTempMapVoList;
option.value.series[0].data = mappedData;
})
}
@ -337,37 +382,22 @@ watch(time, () => {
// 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,
},
];
// region 地图相关
echarts.registerMap("changsha", changshaMap);
const option = ref({
geo: {
map: "changsha",
},
tooltip: {
trigger: 'item',
formatter: function (params) {
// console.log(gobalTempMapVoList.value)
const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
// console.log(dataItem.name)
if (dataItem) {
return `
const option = ref(
{
geo: {
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.name}</div>
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>问题总数 <span>${dataItem.totalPro}</span></li>
@ -378,9 +408,9 @@ const option = ref({
</ul>
</div>
</div>`;
} else {
return `<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
} else {
return `<div class="tooltip">
<div class="tooltip-title">${dataItem.originalName}</div>
<div class="tooltip-content">
<ul class="tooltip-ul"">
<li>问题总数 <span>0</span></li>
@ -391,59 +421,66 @@ const option = ref({
</ul>
</div>
</div>`;
}
},
},
visualMap: {
type: "piecewise",
bottom: 10,
pieces: [
{min: 0, max: 500, label: "问题数低于500", color: "#F6A149"},
{min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"},
{min: 1001, label: "问题数高于1000", color: "#D34343"},
],
right: 10,
realtime: false,
orient: "horizontal",
textStyle: {
color: "#fff",
},
calculable: true,
},
series: [
{
name: "长沙",
type: "map",
map: "changsha",
hoverAnimation: true,
label: {
show: true,
color: "white",
},
itemStyle: {
normal: {
areaColor: "#02215E",
borderColor: "#1773c3",
}
},
},
emphasis: {
areaColor: "#FFD700", // 高亮时区域颜色
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
visualMap: {
type: "piecewise",
bottom: 10,
pieces: [
{min: 0, max: 500, label: "问题数低于500", color: "#4987F6"},
{min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"},
{min: 1001, label: "问题数高于1000", color: "#D34343"},
],
right: 10,
realtime: false,
orient: "horizontal",
textStyle: {
color: "#fff",
},
calculable: true,
},
data: gobalTempMapVoList.value.map(item => {
const data = {
name: item.name,
value: item.totalPro,
};
return data;
})
}
],
})
series: [
{
name: "长沙",
type: "map",
map: "changsha",
hoverAnimation: true,
label: {
show: true,
color: "white",
},
itemStyle: {
normal: {
areaColor: "#02215E",
borderColor: "#1773c3",
},
},
emphasis: {
areaColor: "#FFD700", // 高亮时区域颜色
borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: []
}
],
})
// 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>

12638
src/views/datav/Jwpy.vue
View File

File diff suppressed because it is too large Load Diff

3
src/views/datav/SceneInsp.vue
Unescape View File

@ -549,7 +549,6 @@ const option = ref({
// region 初始化数据
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
@ -577,7 +576,6 @@ function getData() {
// option2.series[0].data = res.wtlxList;
});
getSupervisionTrend(new Date().getFullYear()).then((res) => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
@ -593,7 +591,6 @@ watch(time, () => {
getData();
});
watch(activeTabLeft, () => {
// alert(activeTabLeft.value)
getChangedRank(time.value, activeTabLeft.value).then((res) => {
rankOverview.value = res.rankOverview;
data1.value = res.changedRankList;

Write Preview
Loading…
Cancel
Save