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
e22abba3cc
commit
429d2748a3
6 changed files with 201 additions and 44 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. 6
      src/components.d.ts
  2. 30
      src/views/Main/DailyPatrolCard/index.vue
  3. 1
      src/views/Main/ProjectCountCard/index.vue
  4. 29
      src/views/Main/RiskInspectionCard/index.vue
  5. 109
      src/views/Main/SafetyAppraise/index.vue
  6. 70
      src/views/Main/SafetyOverviewCard/index.vue

6
src/components.d.ts
View File

@ -10,6 +10,9 @@ declare module 'vue' {
Card: typeof import('./components/Card/index.vue')['default']
Dialog: typeof import('./components/Dialog/index.vue')['default']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElPopover: typeof import('element-plus/es')['ElPopover']
@ -27,7 +30,4 @@ declare module 'vue' {
UploadImage: typeof import('./components/Upload/UploadImage.vue')['default']
Video: typeof import('./components/Video/index.vue')['default']
}
export interface ComponentCustomProperties {
vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
}
}

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

@ -14,7 +14,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
import { useChartStore } from '@/store/modules/chart';
@ -23,6 +23,16 @@ const chartStore = useChartStore();
defineOptions({
name: 'DailyPatrolCard'
});
const props = defineProps({
timeRange: {
type: Object,
default: () => ({
startTime: '',
endTime: ''
})
}
});
let chart: echarts.ECharts | undefined;
const chartRef = ref();
const handleResize = () => {
@ -30,16 +40,16 @@ const handleResize = () => {
};
const dailyData: any = ref([]);
const dailyCount = ref(0);
const getChartData = async () => {
const getChartData = async (time: any) => {
dailyCount.value = 0
dailyData.value = [];
const pramas = {
endTime: '',
startTime: '',
// endTime: '',
// startTime: '',
...time,
group: 'K6'
};
const data: any = await chartStore.initStatisticChart(pramas);
console.log("🚀 ~ getChartData ~ data:", data)
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
@ -83,6 +93,7 @@ const getChartData = async () => {
await initChart();
};
const initChart = () => {
chart?.clear();
chart = echarts.init(chartRef.value);
// ['一般', '较大', '重大', '紧急']
const pieName = dailyData.value.map((item: any) => item.name);
@ -208,9 +219,14 @@ const initChart = () => {
// Set options and render chart
chart.setOption(option);
};
};watch(
() => props.timeRange,
(newVal) => {
getChartData(newVal);
}
);
onMounted(() => {
getChartData();
getChartData(props.timeRange);
window.addEventListener('resize', handleResize);
});

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

@ -65,6 +65,7 @@ const getChartData = async () => {
};
const initChart = () => {
if (!chartRef.value) return;
chart?.clear();
chart = echarts.init(chartRef.value);
const legendName = projectData.value.map((item: any) => item.name);

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

@ -15,7 +15,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import 'echarts-liquidfill/src/liquidFill.js';
@ -26,6 +26,15 @@ const chartStore = useChartStore();
defineOptions({
name: 'RiskInspectionCard'
});
const props = defineProps({
timeRange: {
type: Object,
default: () => ({
startTime: '',
endTime: ''
})
}
});
const problemEchartRef = ref();
const questEchartRef = ref();
let leftChart: echarts.ECharts | undefined;
@ -38,15 +47,16 @@ const problemData: any = ref([]);
const problemCount = ref(0);
const taskData: any = ref([]);
const taskCount = ref(0);
const getChartData = async () => {
const getChartData = async (time: any) => {
problemCount.value = 0;
problemData.value = [];
taskCount.value = 0;
taskData.value = [];
const pramas = {
endTime: '',
startTime: '',
// endTime: '',
// startTime: '',
...time,
group: 'K5'
};
const data: any = await chartStore.initStatisticChart(pramas);
@ -99,6 +109,7 @@ const getChartData = async () => {
initChart();
};
const initChart = () => {
leftChart?.clear()
leftChart = echarts.init(problemEchartRef.value);
const color = ['#FFBC37', '#429BF4'];
@ -258,6 +269,7 @@ const initChart = () => {
};
leftChart.setOption(leftOption);
rightChart?.clear()
rightChart = echarts.init(questEchartRef.value);
// ['任务数', '已完成']
const li_qu_legend = taskData.value.map((item: any) => item.name);
@ -425,8 +437,15 @@ const initChart = () => {
// Set options and render right chart
rightChart.setOption(rightOption);
};
watch(
() => props.timeRange,
(newVal) => {
getChartData(newVal);
}
);
onMounted(() => {
getChartData();
getChartData(props.timeRange);
window.addEventListener('resize', handleResize);
});

109
src/views/Main/SafetyAppraise/index.vue
View File

@ -2,7 +2,13 @@
<div class="safety-appraise">
<div class="sy-water-cart-second-title">安全鉴定</div>
<div class="appraise-wrapper">
<div class="appraise-item">
<div class="appraise-item" v-for="(item, index) in safetyData" :key="index">
<div class="count total" :class="[{ wait: item.name === '待鉴定' }, { ok: item.name === '已鉴定' }]">
{{ item?.value || '' }}
</div>
<div class="name">{{ item?.name || '' }}</div>
</div>
<!-- <div class="appraise-item">
<div class="count total">456</div>
<div class="name">任务数</div>
</div>
@ -13,26 +19,101 @@
<div class="appraise-item">
<div class="count ok">56</div>
<div class="name">已鉴定</div>
</div>
</div> -->
</div>
<div class="appraise-progress">
<div class="tips">
<div>已完成：<span class="ok">23%</span></div>
<div>进行中：<span class="in">23%</span></div>
<div>超期未鉴定：<span class="overdue">23%</span></div>
<div>
已完成：<span class="ok">{{ okNum }}%</span>
</div>
<div>
进行中：<span class="in">{{ 100 - okNum }}%</span>
</div>
<!-- <div>超期未鉴定：<span class="overdue">23%</span></div> -->
</div>
<div class="progress">
<div class="progress-bar ok" style="width: 23%"></div>
<div class="progress-bar in" style="width: 23%"></div>
<div class="progress-bar overdue" style="width: 23%"></div>
<div class="progress-bar ok" :style="{ width: `${okNum}%` }"></div>
<div class="progress-bar in" :style="{ width: `${100 - okNum}%` }"></div>
<!-- <div class="progress-bar overdue" style="width: 23%"></div> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { useChartStore } from '@/store/modules/chart';
const chartStore = useChartStore();
defineOptions({
name: "safety-appraise",
name: 'safety-appraise'
});
const props = defineProps({
timeRange: {
type: Object,
default: () => ({
startTime: '',
endTime: ''
})
}
});
const taskCount = ref(0);
const safetyData: any = ref([]);
const okNum = computed(() => {
const num = safetyData.value.find((item: any) => item.name === '任务数');
return taskCount.value ? (Number(num?.value || 0) / taskCount.value) * 100 : 0;
});
// const inNum = computed(() => {
// const num = safetyData.value.find((item: any) => item.name === '已完成');
// return taskCount.value ? (Number(num?.value || 0) / taskCount.value) * 100 : 0;
// });
const getChartData = async (time: any) => {
taskCount.value = 0;
safetyData.value = [];
const pramas = {
// endTime: '',
// startTime: '',
...time,
group: 'K4'
};
const data: any = await chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
safetyData.value.push({
name: item.name || '',
value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || ''
});
taskCount.value += Number(item.sum) || 0;
});
} else {
// 默认数据
safetyData.value = [
{
name: '任务数',
value: 0,
unit: ''
},
{
name: '已完成',
value: 0,
unit: ''
}
];
}
};
watch(
() => props.timeRange,
(newVal) => {
getChartData(newVal);
}
);
onMounted(() => {
getChartData(props.timeRange);
});
</script>
@ -51,7 +132,7 @@ defineOptions({
.appraise-item {
width: 104px;
height: 119px;
background: url("@/assets/card/safety-item-bg.png") no-repeat;
background: url('@/assets/card/safety-item-bg.png') no-repeat;
display: flex;
flex-direction: column;
align-items: center;
@ -65,8 +146,8 @@ defineOptions({
text-align: center;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff;
}
.count {
@ -103,7 +184,7 @@ defineOptions({
line-height: 22px;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
font-variation-settings: 'opsz' auto;
color: rgba(0, 0, 0, 0.55);
span {
font-family: DIN;
@ -112,7 +193,7 @@ defineOptions({
line-height: 22px;
letter-spacing: 0px;
font-variation-settings: "opsz" auto;
font-variation-settings: 'opsz' auto;
&.ok {
color: #28ce8e;
}

70
src/views/Main/SafetyOverviewCard/index.vue
View File

@ -2,33 +2,70 @@
<div class="safety-overview-card">
<div class="sy-water-cart-title">
安全监查情况
<el-select class="sy-water-cart-title-select" size="small" @change="timeChange">
<el-select v-model="time" class="sy-water-cart-title-select" size="small" @change="timeChange">
<el-option label="今日" value="1"></el-option>
<el-option label="近7日" value="2"></el-option>
<el-option label="近30日" value="3"></el-option>
<el-option label="近一年" value="4"></el-option>
</el-select>
</div>
<SafetyAppraise />
<RiskInspectionCard />
<DailyPatrolCard />
<SafetyAppraise :time-range="timeRange" />
<RiskInspectionCard :time-range="timeRange" />
<DailyPatrolCard :time-range="timeRange" />
</div>
</template>
<script setup lang="ts">
import SafetyAppraise from "../SafetyAppraise/index.vue";
import RiskInspectionCard from "../RiskInspectionCard/index.vue";
import DailyPatrolCard from "../DailyPatrolCard/index.vue";
import SafetyAppraise from '../SafetyAppraise/index.vue';
import RiskInspectionCard from '../RiskInspectionCard/index.vue';
import DailyPatrolCard from '../DailyPatrolCard/index.vue';
import dayjs from 'dayjs';
import { ref } from 'vue';
defineOptions({
name: "SafetyOverviewCard",
name: 'SafetyOverviewCard'
});
const timeRange: any = ref({
startTime: '',
endTime: ''
});
const time = ref('2')
const timeChange = (val: any) => {
console.log(val);
timeRange.value = getTimeRange(val);
};
// 根据系统时间获取对应的 时间范围
// const getTimeRange = () => {
// }
// 根据系统时间获取对应的 时间范围
const getTimeRange = (type: string) => {
const now = dayjs();
let startDate: dayjs.Dayjs;
let endDate: dayjs.Dayjs;
switch (type) {
case '1': // 今日
startDate = now.startOf('day');
endDate = now.endOf('day');
break;
case '2': // 近7日
startDate = now.subtract(6, 'day').startOf('day');
endDate = now.endOf('day');
break;
case '3': // 近30日
startDate = now.subtract(29, 'day').startOf('day');
endDate = now.endOf('day');
break;
case '4': // 近一年
startDate = now.subtract(1, 'year').startOf('day');
endDate = now.endOf('day');
break;
default:
startDate = now.startOf('day');
endDate = now.endOf('day');
}
return {
startTime: startDate.format('YYYY-MM-DD HH:mm:ss'),
endTime: endDate.format('YYYY-MM-DD HH:mm:ss')
};
};
</script>
<style scoped lang="less">
@ -50,6 +87,9 @@ const timeChange = (val: any) => {
color: #fff;
}
}
.sy-input__inner {
color: #fff;
}
::-webkit-input-placeholder {
color: #fff;
}
@ -62,7 +102,7 @@ const timeChange = (val: any) => {
.appraise-item {
width: 104px;
height: 119px;
background: url("@/assets/card/safety-item-bg.png") no-repeat;
background: url('@/assets/card/safety-item-bg.png') no-repeat;
display: flex;
flex-direction: column;
align-items: center;
@ -76,8 +116,8 @@ const timeChange = (val: any) => {
text-align: center;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #ffffff;
}
.count {

Write Preview
Loading…
Cancel
Save