Niko
/
sy-water-data-board-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 图表对接

feature-v1.0.0
ruancuihong 1 month ago
parent
8ec8987043
commit
466843c041
7 changed files with 232 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/api/axios/axiosCancel.ts
  2. 20
      src/api/safety/index.ts
  3. 39
      src/store/modules/chart.ts
  4. 63
      src/views/Main/DailyPatrolCard/index.vue
  5. 100
      src/views/Main/ProjectCountCard/index.vue
  6. 99
      src/views/Main/RiskInspectionCard/index.vue
  7. 6
      vite.config.ts

2
src/api/axios/axiosCancel.ts
View File

@ -21,6 +21,8 @@ export class AxiosCanceler {
if (url.indexOf('cameras/previewURLs') > 0) return; // 忽略 重复请求获取预览取流地址 if (url.indexOf('cameras/previewURLs') > 0) return; // 忽略 重复请求获取预览取流地址
if (url.indexOf('preview/capture') > 0) return; // 忽略 重复请求获取预览取流地址 if (url.indexOf('preview/capture') > 0) return; // 忽略 重复请求获取预览取流地址
if (url.indexOf('/sy-engine-backer/cameraInfo/') > 0) return; // 忽略 重复请求获取预览取流地址 if (url.indexOf('/sy-engine-backer/cameraInfo/') > 0) return; // 忽略 重复请求获取预览取流地址
if (url.indexOf('/run/statistic/chart') > 0) return;
// 上传接口忽略重复请求 // 上传接口忽略重复请求
if (!url.includes('oss')) { if (!url.includes('oss')) {
config.cancelToken = config.cancelToken =

20
src/api/safety/index.ts
View File

@ -1,4 +1,5 @@
// import axios from 'axios'; // import axios from 'axios';
import { he } from 'element-plus/es/locale';
import { request } from '../axios'; import { request } from '../axios';
// 预警统计 // 预警统计
@ -85,3 +86,22 @@ export const getObjectStatistic = (params: any) => {
params params
}); });
}; };
function getCookie(name: string): string | null {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
return null;
}
export function getlStatisticChart(data: any) {
// 获取cookie
const shuili = getCookie('Admin-Token');
return request({
url: `/run/statistic/chart`,
method: 'post',
data,
headers: {
// 'Admin-Token': shuili,
shuili: 'water ' + shuili
}
});
}

39
src/store/modules/chart.ts
View File

@ -0,0 +1,39 @@
import { defineStore } from 'pinia';
import { store } from '../index';
import { getlStatisticChart } from '@/api/safety';
export interface ChartState {
chartObject: any;
}
export const useChartStore = defineStore('chart', {
state: (): ChartState => ({
chartObject: {
endTime: '',
startTime: '',
adcd: '',
group: ''
}
}),
getters: {
getChartObject(): object {
return this.chartObject;
}
},
actions: {
resetChart() {
this.chartObject = {};
},
async initStatisticChart(data: any) {
const pramas = {
...this.chartObject,
...data
};
const res = await getlStatisticChart(pramas);
return res;
}
}
});
export const useChartStoreWithOut = () => {
return useChartStore(store);
};

63
src/views/Main/DailyPatrolCard/index.vue
View File

@ -16,6 +16,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { useChartStore } from '@/store/modules/chart';
const chartStore = useChartStore();
defineOptions({ defineOptions({
name: 'DailyPatrolCard' name: 'DailyPatrolCard'
}); });
@ -24,20 +28,40 @@ const chartRef = ref();
const handleResize = () => { const handleResize = () => {
chart?.resize(); chart?.resize();
}; };
onMounted(() => { const dailyData: any = ref([]);
chart = echarts.init(chartRef.value); const dailyCount = ref(0);
const pieName = ['一般', '重大', '较大', '紧急']; const getChartData = async () => {
const pieValue = [545, 21, 300, 64]; dailyCount.value = 0
let count: any = 0; dailyData.value = [];
const pramas = {
const pieData: any = []; endTime: '',
for (var i = 0; i < pieName.length; i++) { startTime: '',
pieData.push({ group: 'K6'
name: pieName[i], };
value: pieValue[i] const data = await chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
dailyData.value.push({
name: item.name || '',
value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || ''
});
dailyCount.value += Number(item.sum) || 0;
}); });
count += pieValue[i]; // dailyCount.value = newArr
// .map((v: any) => Number(v.sum ?? null))
// .reduce((acc: any, cur: any) => {
// return acc + cur;
// }, 0);
} }
await initChart();
};
const initChart = () => {
chart = echarts.init(chartRef.value);
// ['一般', '较大', '重大', '紧急']
const pieName = dailyData.value.map((item: any) => item.name);
const legendStyle = { const legendStyle = {
type: 'scroll', type: 'scroll',
// orient: 'vertical', // orient: 'vertical',
@ -52,8 +76,8 @@ onMounted(() => {
itemGap: 44, // 44 itemGap: 44, // 44
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < pieName.length; i++) { for (var i = 0; i < pieName.length; i++) {
if (name == pieData[i].name) { if (name == dailyData.value[i].name) {
return '{name|' + name + '}{rate|' + pieValue[i] + '}'; return '{name|' + name + '}{rate|' + dailyData.value[i].value + '}';
} }
} }
}, },
@ -82,7 +106,7 @@ onMounted(() => {
// Chart options // Chart options
const option = { const option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item'
// formatter: '{a} <br/>{b}: {c} ({d}%)' // formatter: '{a} <br/>{b}: {c} ({d}%)'
}, },
color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'], color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
@ -118,7 +142,7 @@ onMounted(() => {
labelLine: { labelLine: {
show: false show: false
}, },
data: pieData data: dailyData.value
}, },
{ {
name: '待处理问题', name: '待处理问题',
@ -134,7 +158,7 @@ onMounted(() => {
label: { label: {
position: 'center', position: 'center',
formatter: function () { formatter: function () {
return ['{total|' + count + '}', '{label|待处理问题}'].join('\n'); return ['{total|' + dailyCount.value + '}', '{label|待处理问题}'].join('\n');
}, },
rich: { rich: {
total: { total: {
@ -152,13 +176,16 @@ onMounted(() => {
} }
} }
}, },
data: [{ value: 1, name: '', tooltip: { show: false} }] data: [{ value: 1, name: '', tooltip: { show: false } }]
} }
] ]
}; };
// Set options and render chart // Set options and render chart
chart.setOption(option); chart.setOption(option);
};
onMounted(() => {
getChartData();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}); });

100
src/views/Main/ProjectCountCard/index.vue
View File

@ -8,6 +8,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'; import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { useChartStore } from '@/store/modules/chart';
const chartStore = useChartStore();
defineOptions({ defineOptions({
name: 'ProjectCountCard' name: 'ProjectCountCard'
}); });
@ -16,28 +20,34 @@ let chart: echarts.ECharts | undefined;
const handleResize = () => { const handleResize = () => {
chart?.resize(); chart?.resize();
}; };
onMounted(() => { const projectCount = ref(0);
if (!chartRef.value) return; const projectData: any = ref([]);
chart = echarts.init(chartRef.value); const getChartData = async () => {
projectCount.value = 0
// Total count calculation projectData.value = [];
const reservoirCount = 544; const pramas = {
const sluiceCount = 454; endTime: '',
const damCount = 154; startTime: '',
const totalCount = 406; // Hard-coded total value shown in the center group: 'K1'
};
const legendName = ['水库', '水闸', '堤防']; const data = await chartStore.initStatisticChart(pramas);
const legendValue = [reservoirCount, sluiceCount, damCount]; if (data?.yaxis?.length) {
const unit = ['座', '座', '段']; let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
const pieData: any = []; projectData.value.push({
for (var i = 0; i < legendName.length; i++) { name: item.name || '',
pieData.push({ value: Number(item.sum)?.toFixed(0) || 0,
name: legendName[i], unit: item.unit || ''
value: legendValue[i], });
unit: unit[i] projectCount.value += Number(item.sum || 0);
}); });
} }
await initChart()
};
const initChart = () => {
if (!chartRef.value) return;
chart = echarts.init(chartRef.value);
const legendName = projectData.value.map((item: any) => item.name);
// Chart options // Chart options
const option = { const option = {
@ -58,8 +68,10 @@ onMounted(() => {
data: legendName, data: legendName,
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < legendName.length; i++) { for (var i = 0; i < legendName.length; i++) {
if (name == pieData[i].name) { if (name == projectData.value[i].name) {
return '{name|' + name + '}{rate|' + legendValue[i] + '}{unit|' + unit[i] + '}'; return (
'{name|' + name + '}{rate|' + projectData.value[i].value + '}{unit|' + projectData.value[i].unit + '}'
);
} }
} }
}, },
@ -111,23 +123,25 @@ onMounted(() => {
label: { label: {
show: false show: false
}, },
data: [ color: ['#4293F4', '#30DFBA', '#FF755B', '#FFF03B', '#FFF03B'],
{ data: projectData.value
value: reservoirCount, // [
name: '水库', // {
itemStyle: { color: '#4293F4' } // value: reservoirCount,
}, // name: '水库',
{ // itemStyle: { color: '#4293F4' }
value: sluiceCount, // },
name: '水闸', // {
itemStyle: { color: '#30DFBA' } // value: sluiceCount,
}, // name: '水闸',
{ // itemStyle: { color: '#30DFBA' }
value: damCount, // },
name: '堤防', // {
itemStyle: { color: '#FF755B' } // value: damCount,
} // name: '堤防',
] // itemStyle: { color: '#FF755B' }
// }
// ]
}, },
{ {
name: '总数', name: '总数',
@ -143,7 +157,7 @@ onMounted(() => {
label: { label: {
position: 'center', position: 'center',
formatter: function () { formatter: function () {
return ['{total|' + totalCount + '}', '{label|总数}'].join('\n'); return ['{total|' + projectCount.value + '}', '{label|总数}'].join('\n');
}, },
rich: { rich: {
total: { total: {
@ -161,14 +175,16 @@ onMounted(() => {
} }
} }
}, },
data: [{ value: 1, name: '总数', tooltip: { show: false} }] data: [{ value: 1, name: '总数', tooltip: { show: false } }]
} }
] ]
}; };
// Set options and render chart // Set options and render chart
chart.setOption(option); chart.setOption(option);
};
onMounted(() => {
getChartData();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {

99
src/views/Main/RiskInspectionCard/index.vue
View File

@ -19,6 +19,10 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import 'echarts-liquidfill'; import 'echarts-liquidfill';
import 'echarts-liquidfill/src/liquidFill.js'; import 'echarts-liquidfill/src/liquidFill.js';
import { useChartStore } from '@/store/modules/chart';
const chartStore = useChartStore();
defineOptions({ defineOptions({
name: 'RiskInspectionCard' name: 'RiskInspectionCard'
}); });
@ -30,7 +34,45 @@ const handleResize = () => {
leftChart?.resize(); leftChart?.resize();
rightChart?.resize(); rightChart?.resize();
}; };
onMounted(() => { const problemData: any = ref([]);
const problemCount = ref(0);
const taskData: any = ref([]);
const taskCount = ref(0);
const getChartData = async () => {
problemCount.value = 0;
problemData.value = [];
taskCount.value = 0;
taskData.value = [];
const pramas = {
endTime: '',
startTime: '',
group: 'K5'
};
const data = await chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
if (['问题数', '数量'].includes(item.name)) {
problemData.value.push({
name: item.name || '',
value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || ''
});
problemCount.value += Number(item.sum) || 0;
} else {
taskData.value.push({
name: item.name || '',
value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || ''
});
taskCount.value += Number(item.sum) || 0;
}
});
}
initChart();
};
const initChart = () => {
leftChart = echarts.init(problemEchartRef.value); leftChart = echarts.init(problemEchartRef.value);
const color = ['#FFBC37', '#429BF4']; const color = ['#FFBC37', '#429BF4'];
@ -64,18 +106,10 @@ onMounted(() => {
show: false show: false
} }
}; };
const legendName = ['数量', '问题数']; const legendName = problemData.value.map((item: any) => item.name);
const pieValue = [98, 56]; const pieValue = problemData.value.map((item: any) => item.value);
var pieData: any = []; const leftCenterValue = ['50%', '37%'];
for (var i = 0; i < legendName.length; i++) { //核查问题
pieData.push({
name: legendName[i],
value: pieValue[i]
});
}
const leftCenterValue = ['50%', '37%']
// Chart options for the left side (nested pie)
const leftOption = { const leftOption = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -83,7 +117,7 @@ onMounted(() => {
}, },
color: ['#FFBC37', '#FFBC37'], color: ['#FFBC37', '#FFBC37'],
title: { title: {
text: pieValue[0], text: problemCount.value,
subtext: '工程总数', subtext: '工程总数',
x: 'center', x: 'center',
y: '20%', y: '20%',
@ -134,8 +168,8 @@ onMounted(() => {
data: legendName, data: legendName,
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < legendName.length; i++) { for (var i = 0; i < legendName.length; i++) {
if (name == pieData[i].name) { if (name == problemData.value[i].name) {
return '{name|' + name + '}{rate|' + pieValue[i] + '}'; return '{name|' + name + '}{rate|' + problemData.value[i].value + '}';
} }
} }
} }
@ -196,27 +230,15 @@ onMounted(() => {
} }
] ]
}; };
// Set options and render left chart
leftChart.setOption(leftOption); leftChart.setOption(leftOption);
rightChart = echarts.init(questEchartRef.value); rightChart = echarts.init(questEchartRef.value);
const li_qu_legend = ['任务数', '已完成']; // ['任务数', '已完成']
const taskNum = 98; const li_qu_legend = taskData.value.map((item: any) => item.name);
const accomplishNum = 30; const taskNum = taskData.value.find((item: any) => item.name === '任务数')?.value;
const li_qu_data = [ const accomplishNum = taskData.value.find((item: any) => item.name === '已完成')?.value;
{
name: li_qu_legend[0],
value: taskNum
},
{
name: li_qu_legend[1],
value: accomplishNum
}
];
// 占比率 // 占比率
const li_qu_count: any = accomplishNum / taskNum; const li_qu_count: any = Number(accomplishNum) / Number(taskNum);
const titleStyle = { const titleStyle = {
fontSize: 32, fontSize: 32,
@ -227,8 +249,8 @@ onMounted(() => {
textShadowOffsetX: 0, textShadowOffsetX: 0,
textShadowOffsetY: 1 textShadowOffsetY: 1
}; };
const centerValue = ['50%', '37%'] const centerValue = ['50%', '37%'];
// Chart options for the right side (liquidFill) // 核查任务
const rightOption = { const rightOption = {
title: [ title: [
{ {
@ -280,8 +302,8 @@ onMounted(() => {
data: li_qu_legend, data: li_qu_legend,
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < li_qu_legend.length; i++) { for (var i = 0; i < li_qu_legend.length; i++) {
if (name == li_qu_data[i].name) { if (name == taskData.value[i].name) {
return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}'; return '{name|' + name + '}{rate|' + taskData.value[i].value + '}';
} }
} }
} }
@ -376,6 +398,9 @@ onMounted(() => {
// Set options and render right chart // Set options and render right chart
rightChart.setOption(rightOption); rightChart.setOption(rightOption);
};
onMounted(() => {
getChartData();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}); });

6
vite.config.ts
View File

@ -85,6 +85,12 @@ export default defineConfig(({ mode }) => {
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api\/iserver/, '/iserver') rewrite: (path) => path.replace(/^\/api\/iserver/, '/iserver')
}, },
'/api/run': {
// target: "http://shuili.product.dev.com:30115/",
target: 'http://172.16.34.80:18082',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/tianhui-admin-web')
},
'/api': { '/api': {
target: 'http://shuili.product.dev.com:30115', // 'http://172.16.34.59:18083' target: 'http://shuili.product.dev.com:30115', // 'http://172.16.34.59:18083'
changeOrigin: true, changeOrigin: true,

Write Preview
Loading…
Cancel
Save