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
df535e12bb
commit
34e9069b56
9 changed files with 111 additions and 71 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/App.vue
  2. 2
      src/views/Main/DailyPatrolCard/index.vue
  3. 47
      src/views/Main/MonitoringCard/index.vue
  4. 9
      src/views/Main/ProjectCountCard/index.vue
  5. 41
      src/views/Main/ProjectOperation/components/DataStatistics.vue
  6. 40
      src/views/Main/ProjectOperation/components/MonitorWarning.vue
  7. 4
      src/views/Main/ProjectOperation/index.vue
  8. 2
      src/views/Main/RiskInspectionCard/index.vue
  9. 35
      src/views/Main/SafetyAppraise/index.vue

2
src/App.vue
View File

@ -21,7 +21,7 @@ body {
font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei",
sans-serif; sans-serif;
font-size: 14px; font-size: 14px;
color: #ffffff; /* color: #ffffff; */
background: #000; background: #000;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

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

@ -50,7 +50,7 @@ const getChartData = async (time: any) => {
...time, ...time,
group: 'K6' group: 'K6'
}; };
const data: any = await chartStore.initStatisticChart(pramas); const data: any = chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) { if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series); let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => { newArr?.forEach((item: any) => {

47
src/views/Main/MonitoringCard/index.vue
View File

@ -7,48 +7,63 @@
</div> </div>
<div class="right"> <div class="right">
<div class="name">测报设施建设</div> <div class="name">测报设施建设</div>
<div class="count">{{ chartData.syq + chartData.dbaq }}</div> <div class="count">{{ chartData.cz + chartData.cd + chartData.yx || 0 }}</div>
</div> </div>
</div> </div>
<div class="cart-item-row"> <div class="cart-item-row">
<div class="left"> <div class="left">
<div class="count">{{ chartData.syq }}</div> <div class="count">{{ chartData.cz || 0 }}</div>
<div class="name">水雨情监测设施</div> <div class="name">测站数量</div>
<!-- <div class="name">水雨情监测设施</div> -->
</div> </div>
<div class="right"> <div class="right">
<div class="count">{{ chartData.dbaq }}</div> <div class="count">{{ chartData.cd || 0 }}</div>
<div class="name">水库大坝安全监测设施</div> <div class="name">测点数量</div>
<!-- <div class="name">水库大坝安全监测设施</div> -->
</div>
<div class="right">
<div class="count">{{ chartData.yx || 0 }}</div>
<div class="name">影像监视</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted } from "vue"; import { reactive, onMounted } from 'vue';
import { getlStatisticChart } from "@/api/safety/index"; import { getlStatisticChart } from '@/api/safety/index';
defineOptions({ defineOptions({
name: "MonitoringCard", name: 'MonitoringCard'
}); });
const chartData = reactive<any>({ const chartData = reactive<any>({
syq: 0, syq: 0,
dbaq: 0, dbaq: 0
}); });
onMounted(() => { onMounted(() => {
getlStatisticChart({ getlStatisticChart({
endTime: "", endTime: '',
startTime: "", startTime: '',
adcd: "", adcd: '',
group: "K2", group: 'K2'
}).then((res: any) => { }).then((res: any) => {
const series = res?.data?.data?.yaxis?.[0]?.series; const series = res?.data?.data?.yaxis?.[0]?.series;
if (!series) return; if (!series) return;
series.forEach((item: any) => { series.forEach((item: any) => {
if (item.code === "YZT_CONSTRUCT_SYQ_SUM") { if (item.code === 'YZT_CONSTRUCT_SYQ_SUM') {
chartData.syq = +(+item.sum).toFixed(0); chartData.syq = +(+item.sum).toFixed(0);
} }
if (item.code === "YZT_CONSTRUCT_DBAQ_SUM") { if (item.code === 'YZT_CONSTRUCT_DBAQ_SUM') {
chartData.dbaq = +(+item.sum).toFixed(0); chartData.dbaq = +(+item.sum).toFixed(0);
} }
if (item.code === 'ATT_ST_BASE') {
chartData.cz = +(+item.sum).toFixed(0);
}
if (item.code === 'ATT_ST_MP') {
chartData.cd = +(+item.sum).toFixed(0);
}
if (item.code === 'ATT_WMST_BASE') {
chartData.yx = +(+item.sum).toFixed(0);
}
}); });
}); });
}); });
@ -123,7 +138,7 @@ onMounted(() => {
line-height: 40px; line-height: 40px;
letter-spacing: 0em; letter-spacing: 0em;
font-variation-settings: "opsz" auto; font-variation-settings: 'opsz' auto;
color: #36b29e; color: #36b29e;
} }
} }

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

@ -24,16 +24,21 @@ const projectCount = ref(0);
const projectData: any = ref([]); const projectData: any = ref([]);
const getChartData = async () => { const getChartData = async () => {
projectCount.value = 0; projectCount.value = 0;
projectData.value = []; // projectData.value = [];
const pramas = { const pramas = {
endTime: '', endTime: '',
startTime: '', startTime: '',
group: 'K1' group: 'K1'
}; };
const data: any = await chartStore.initStatisticChart(pramas);
const data: any = chartStore.initStatisticChart(pramas)
if (data?.yaxis?.length) { if (data?.yaxis?.length) {
projectData.value = [];
let newArr = data.yaxis.flatMap((v: any) => v.series); let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => { newArr?.forEach((item: any) => {
// if (item.code === 'YZT_TOUR_CHECK_RWS_SUM') {
// projectData.value.rws = +(+item.sum).toFixed(0);
// }
projectData.value.push({ projectData.value.push({
name: item.name || '', name: item.name || '',
value: Number(item.sum)?.toFixed(0) || 0, value: Number(item.sum)?.toFixed(0) || 0,

41
src/views/Main/ProjectOperation/components/DataStatistics.vue
View File

@ -68,7 +68,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from "vue"; import { onMounted, ref } from "vue";
import { import {
getReservoirCZListData, getReservoirCZListData,
getReservoirCDListData, getReservoirCDListData,
@ -93,7 +93,7 @@ const cascaderProps = {
children: "children", children: "children",
checkStrictly: true, checkStrictly: true,
lazy: true, lazy: true,
lazyLoad(node, resolve) { lazyLoad(node: any, resolve: any) {
console.log("lazyLoad-node >>>>> ", node); console.log("lazyLoad-node >>>>> ", node);
if (node && node.data && node.data.prjcd) { if (node && node.data && node.data.prjcd) {
getReservoirCDListData({ getReservoirCDListData({
@ -106,11 +106,11 @@ const cascaderProps = {
} }
}, },
}; };
const attributesList = ref([]); const attributesList: any = ref([]);
let echart1 = null; let echart1: any = null;
let echart2 = null; let echart2: any = null;
let echart3 = null; let echart3: any = null;
let echart4 = null; let echart4: any = null;
const echartsRef1 = ref(); const echartsRef1 = ref();
const echartsRef2 = ref(); const echartsRef2 = ref();
const echartsRef3 = ref(); const echartsRef3 = ref();
@ -128,7 +128,7 @@ function getData() {
stcd: cascaderArr.value[0] || "", stcd: cascaderArr.value[0] || "",
mpcd: cascaderArr.value[1] || "", mpcd: cascaderArr.value[1] || "",
}).then((res) => { }).then((res) => {
attributesList.value = res.data; attributesList.value = res;
}); });
break; break;
case "2": case "2":
@ -137,7 +137,7 @@ function getData() {
break; break;
} }
} }
function initChart(data, chartInstance, echartRes) { function initChart(data: any, chartInstance: any, echartRes: any) {
// 渲染echarts // 渲染echarts
if (!echartRes) { if (!echartRes) {
return; return;
@ -154,7 +154,7 @@ function initChart(data, chartInstance, echartRes) {
function initLineOptions(data: any) { function initLineOptions(data: any) {
const { markLine, xaxis, yaxis } = data; const { markLine, xaxis, yaxis } = data;
if (!xaxis || !yaxis || !yaxis.length) return {}; if (!xaxis || !yaxis || !yaxis.length) return {};
let yAxis = yaxis.map((v) => { let yAxis = yaxis.map((v: any) => {
return { return {
type: "value", type: "value",
name: `${v.name}(${v.unit})`, name: `${v.name}(${v.unit})`,
@ -162,10 +162,10 @@ function initLineOptions(data: any) {
}; };
}); });
let series = []; let series: any = [];
yaxis.forEach((v, i) => { yaxis.forEach((v: any, i: any) => {
if (v.series?.length) { if (v.series?.length) {
v.series.forEach((v2) => { v.series.forEach((v2: any) => {
series.push({ series.push({
type: "line", type: "line",
smooth: true, smooth: true,
@ -178,9 +178,9 @@ function initLineOptions(data: any) {
}); });
if (markLine && markLine.length && series.length) { if (markLine && markLine.length && series.length) {
let seriesItem = series.find((v) => v.yAxisIndex === 1) || series[0]; let seriesItem = series.find((v: any) => v.yAxisIndex === 1) || series[0];
let colors = ["#f8afaf", "#bae4dd"]; let colors = ["#f8afaf", "#bae4dd"];
let markLineData = markLine.map((v, i) => { let markLineData = markLine.map((v: any, i: any) => {
return { return {
name: v.name, name: v.name,
yAxis: v.value, yAxis: v.value,
@ -337,6 +337,9 @@ onMounted(() => {
} }
.attributes-box { .attributes-box {
margin-bottom: 16px; margin-bottom: 16px;
width: 100%;
height: 100%;
padding: 24px 12px;
.title { .title {
padding-left: 10px; padding-left: 10px;
font-size: 14px; font-size: 14px;
@ -395,6 +398,9 @@ onMounted(() => {
.echarts-box { .echarts-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 24px 12px;
.echarts-dom-box { .echarts-dom-box {
margin-bottom: 24px; margin-bottom: 24px;
&:nth-child(2n) { &:nth-child(2n) {
@ -426,4 +432,9 @@ onMounted(() => {
} }
} }
} }
.text-center {
padding-top: 30px;
text-align: center;
color: rgba(0, 0, 0, 0.9);
}
</style> </style>

40
src/views/Main/ProjectOperation/components/MonitorWarning.vue
View File

@ -38,47 +38,47 @@
<div class="mt-10"> <div class="mt-10">
<el-table :data="tableData" border> <el-table :data="tableData" border>
<el-table-column label="测站名称"> <el-table-column label="测站名称">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.stnm }}</span> <span>{{ row.stnm }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="测站编码"> <el-table-column label="测站编码">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.stcd }}</span> <span>{{ row.stcd }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="测站类型"> <el-table-column label="测站类型">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.sttp }}</span> <span>{{ row.sttp }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预警类型"> <el-table-column label="预警类型">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.alarmType }}</span> <span>{{ row.alarmType }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="监测数据"> <el-table-column label="监测数据">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.monitorData }}</span> <span>{{ row.monitorData }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="监测时间"> <el-table-column label="监测时间">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.monitorTime }}</span> <span>{{ row.monitorTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预警值" width="100"> <el-table-column label="预警值" width="100">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.alarmValue }}</span> <span>{{ row.alarmValue }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预警时间"> <el-table-column label="预警时间">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ scope.row.alarmTime }}</span> <span>{{ row.alarmTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="操作" width="120"> <!-- <el-table-column label="操作" width="120">
<template slot-scope="scope"> <template #default="{ row }">
<el-button type="text" size="small">告警处置</el-button> <el-button type="text" size="small">告警处置</el-button>
<el-button type="text" size="small">解除本次预警</el-button> <el-button type="text" size="small">解除本次预警</el-button>
</template> </template>
@ -88,7 +88,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'; import { ref, watch } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getReservoirCZAlarmPageData } from '@/api/reservoir'; import { getReservoirCZAlarmPageData } from '@/api/reservoir';
@ -120,7 +120,7 @@ watch(
// getTableData(); // getTableData();
// }); // });
function getTableData() { function getTableData(code = '') {
getReservoirCZAlarmPageData({ getReservoirCZAlarmPageData({
startDate: startDate.value + ' 00:00:00', startDate: startDate.value + ' 00:00:00',
endDate: endDate.value + ' 23:59:59', endDate: endDate.value + ' 23:59:59',
@ -132,7 +132,7 @@ function getTableData() {
paramsData.value.total = res.total; paramsData.value.total = res.total;
}); });
} }
function handleChangeDate(value) { function handleChangeDate(value: any) {
switch (value) { switch (value) {
case '0': case '0':
startDate.value = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'); startDate.value = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss');

4
src/views/Main/ProjectOperation/index.vue
View File

@ -35,8 +35,8 @@ import { Close } from "@element-plus/icons-vue";
// import VideoAnalysis from "./components/VideoAnalysis.vue"; // import VideoAnalysis from "./components/VideoAnalysis.vue";
const props = defineProps({ const props = defineProps({
data: { data: {
type: String, type: Object,
default: "", default: {},
}, },
}); });
const resCode = ref(""); const resCode = ref("");

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

@ -59,7 +59,7 @@ const getChartData = async (time: any) => {
...time, ...time,
group: 'K5' group: 'K5'
}; };
const data: any = await chartStore.initStatisticChart(pramas); const data: any = chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) { if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series); let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => { newArr?.forEach((item: any) => {

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

@ -2,24 +2,24 @@
<div class="safety-appraise"> <div class="safety-appraise">
<div class="sy-water-cart-second-title">安全鉴定</div> <div class="sy-water-cart-second-title">安全鉴定</div>
<div class="appraise-wrapper"> <div class="appraise-wrapper">
<div class="appraise-item" v-for="(item, index) in safetyData" :key="index"> <!-- <div class="appraise-item" v-for="(item, index) in safetyData" :key="index">
<div class="count total" :class="[{ wait: item.name === '待鉴定' }, { ok: item.name === '已鉴定' }]"> <div class="count total" :class="[{ wait: item.name === '待鉴定' }, { ok: item.name === '已鉴定' }]">
{{ item?.value || '' }} {{ item?.value || '' }}
</div> </div>
<div class="name">{{ item?.name || '' }}</div> <div class="name">{{ item?.name || '' }}</div>
</div> </div> -->
<!-- <div class="appraise-item"> <div class="appraise-item">
<div class="count total">456</div> <div class="count total">{{ safetyData.rws || 0 }}</div>
<div class="name">任务数</div> <div class="name">任务数</div>
</div> </div>
<div class="appraise-item"> <div class="appraise-item">
<div class="count wait">400</div> <div class="count wait">{{ safetyData.djd || 0 }}</div>
<div class="name">待鉴定</div> <div class="name">待鉴定</div>
</div> </div>
<div class="appraise-item"> <div class="appraise-item">
<div class="count ok">56</div> <div class="count ok">{{ safetyData.yjd || 0 }}</div>
<div class="name">已鉴定</div> <div class="name">已鉴定</div>
</div> --> </div>
</div> </div>
<div class="appraise-progress"> <div class="appraise-progress">
<div class="tips"> <div class="tips">
@ -27,7 +27,7 @@
已完成：<span class="ok">{{ okNum }}%</span> 已完成：<span class="ok">{{ okNum }}%</span>
</div> </div>
<div> <div>
进行中：<span class="in">{{ 100 - okNum }}%</span> 进行中：<span class="in">{{ okNum ? 100 - okNum : 0 }}%</span>
</div> </div>
<!-- <div>超期未鉴定：<span class="overdue">23%</span></div> --> <!-- <div>超期未鉴定：<span class="overdue">23%</span></div> -->
</div> </div>
@ -82,11 +82,20 @@ const getChartData = async (time: any) => {
if (data?.yaxis?.length) { if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series); let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => { newArr?.forEach((item: any) => {
safetyData.value.push({ if (item.code === 'YZT_TOUR_CHECK_RWS_SUM') {
name: item.name || '', safetyData.rws = +(+item.sum).toFixed(0);
value: Number(item.sum)?.toFixed(0) || 0, }
unit: item.unit || '' if (item.code === 'YZT_TOUR_CHECK_DJD_SUM') {
}); safetyData.dyd = +(+item.sum).toFixed(0);
}
if (item.code === 'YZT_TOUR_CHECK_YJD_SUM') {
safetyData.yjd = +(+item.sum).toFixed(0);
}
// safetyData.value.push({
// name: item.name || '',
// value: Number(item.sum)?.toFixed(0) || 0,
// unit: item.unit || ''
// });
taskCount.value += Number(item.sum) || 0; taskCount.value += Number(item.sum) || 0;
}); });
} else { } else {

Write Preview
Loading…
Cancel
Save