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

Merge branch 'feature-v1.0.0' of ssh://gitlab.datameta.com:2224/project/water/data-board-2025 into feature-v1.0.0

feature-v1.0.0
邱伟洋 1 month ago
parent
d2e479a626 df535e12bb
commit
c122576a67
6 changed files with 106 additions and 80 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. 45
      src/hooks/web/useProject.tsx
  2. 10
      src/theme/element/index.scss
  3. 4
      src/theme/index.scss
  4. 24
      src/views/Main/DailyPatrolCard/index.vue
  5. 24
      src/views/Main/ProjectOperation/components/DataStatistics.vue
  6. 79
      src/views/Main/ProjectOperation/components/MonitorWarning.vue

45
src/hooks/web/useProject.tsx
View File

@ -3,7 +3,6 @@ import * as SyCim from "sy-cesium-sdk";
import { LayerTypeEnum } from "@/enums/projectEnum"; import { LayerTypeEnum } from "@/enums/projectEnum";
import { queryLayersByPos } from "@/utils/mapUtils"; import { queryLayersByPos } from "@/utils/mapUtils";
import axios from "axios"; import axios from "axios";
import { throttle } from "lodash-es";
import { useProjectStore } from "@/store/modules/project"; import { useProjectStore } from "@/store/modules/project";
const clustering = reactive({ const clustering = reactive({
enabled: true, enabled: true,
@ -275,6 +274,25 @@ const baseLayerActions: Record<string, any> = {
}; };
export function useLayer() { export function useLayer() {
const viewerClick = (e: any) => {
const projectStore = useProjectStore();
const selectedLayers: any = projectStore.selectedLayers;
queryLayersByPos(e.wgs84SurfacePosition, selectedLayers, (res: any) => {
if (res?.attributes?.showCode) {
const { showCode, showName } = res?.attributes;
window.$bus.$emit("open-water-dialog", {
code: showCode,
name: showName,
});
}
});
};
const addViewerClick = () => {
window.viewer?.on(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
};
const removeViewerClick = () => {
window.viewer?.off(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
};
const addLayer = async (layerData: any) => { const addLayer = async (layerData: any) => {
const { layerType, url, id, isNeedCluster } = layerData; const { layerType, url, id, isNeedCluster } = layerData;
let action = null; let action = null;
@ -362,7 +380,7 @@ export function useLayer() {
} }
}; };
const removeLayer = (layerData: any) => { const removeLayer = (layerData: any) => {
const { id, layerType } = layerData; const { id, layerType, isNeedCluster, nameCn } = layerData;
if (!layerType) return; if (!layerType) return;
const type: any = LayerTypeEnum[layerType as never]; const type: any = LayerTypeEnum[layerType as never];
@ -376,30 +394,15 @@ export function useLayer() {
type: SyCim.LayerType[type], type: SyCim.LayerType[type],
} as any); } as any);
} }
if (isNeedCluster === "1" && nameCn === "水库点") {
removeViewerClick();
}
}; };
const zoomToLayer = (data: any) => { const zoomToLayer = (data: any) => {
const { layerType } = data; const { layerType } = data;
zoomToLayerActions[layerType as string]?.(data); zoomToLayerActions[layerType as string]?.(data);
}; };
const viewerClick = (e: any) => {
const projectStore = useProjectStore();
const selectedLayers: any = projectStore.selectedLayers;
queryLayersByPos(e.wgs84SurfacePosition, selectedLayers, (res: any) => {
if (res?.attributes?.showCode) {
const { showCode, showName } = res?.attributes;
window.$bus.$emit("open-water-dialog", {
code: showCode,
name: showName,
});
}
});
};
const addViewerClick = () => {
window.viewer?.on(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
};
const removeViewerClick = () => {
window.viewer?.off(SyCim.MouseEventType.CLICK, viewerClick, window.viewer);
};
return { return {
addLayer, addLayer,
removeLayer, removeLayer,

10
src/theme/element/index.scss
View File

@ -38,15 +38,15 @@ $--text-color: (
'disabled': rgba(255, 255, 255, 0.5) 'disabled': rgba(255, 255, 255, 0.5)
); );
$--table: ( $--table: (
'border-color': transparent, // 'border-color': transparent,
'border': none, // 'border': none,
'text-color': rgba(255, 255, 255, 1), 'text-color': rgba(255, 255, 255, 1),
'header-text-color': rgba(255, 255, 255, 1), 'header-text-color': #515a6e,
'row-hover-bg-color': #0acccc, 'row-hover-bg-color': #0acccc,
'current-row-bg-color': rgba(20, 112, 204, 1), 'current-row-bg-color': rgba(20, 112, 204, 1),
'header-bg-color': rgba(20, 112, 204, 1), 'header-bg-color': transparent,
'bg-color': transparent, 'bg-color': transparent,
'tr-bg-color': transparent 'tr-bg-color': transparent,
); );
$--button: ( $--button: (

4
src/theme/index.scss
View File

@ -4,12 +4,12 @@
@use "element-plus/theme-chalk/src/index.scss" as *; @use "element-plus/theme-chalk/src/index.scss" as *;
@use "./overview.scss" as *; @use "./overview.scss" as *;
@use "./search.scss" as *; @use "./search.scss" as *;
@use "./date.scss" as *; // @use "./date.scss" as *;
@use "./input.scss" as *; @use "./input.scss" as *;
@use "./select.scss" as *; @use "./select.scss" as *;
@use "./dialog.scss" as *; @use "./dialog.scss" as *;
@use "./tree.scss" as *; @use "./tree.scss" as *;
@use "./table.scss" as *; // @use "./table.scss" as *;
@use "./tabs.scss" as *; @use "./tabs.scss" as *;
@use "./step.scss" as *; @use "./step.scss" as *;
@use "./upload.scss" as *; @use "./upload.scss" as *;

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

@ -4,10 +4,10 @@
<div class="echart-wrapper" ref="chartRef"></div> <div class="echart-wrapper" ref="chartRef"></div>
<div class="appraise-progress"> <div class="appraise-progress">
<div class="tips"> <div class="tips">
<div>问题处理进度：<span>23%</span></div> <div>问题处理进度：<span>{{progressCount}}%</span></div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width: 23%"></div> <div class="progress-bar" :style="{width: `${progressCount}%`}"></div>
</div> </div>
</div> </div>
</div> </div>
@ -40,6 +40,7 @@ const handleResize = () => {
}; };
const dailyData: any = ref([]); const dailyData: any = ref([]);
const dailyCount = ref(0); const dailyCount = ref(0);
const progressCount = ref(0)
const getChartData = async (time: any) => { const getChartData = async (time: any) => {
dailyCount.value = 0; dailyCount.value = 0;
dailyData.value = []; dailyData.value = [];
@ -220,10 +221,29 @@ const initChart = () => {
// Set options and render chart // Set options and render chart
chart.setOption(option); chart.setOption(option);
}; };
const getProgressData = async (time: any) => {
progressCount.value = 0;
const pramas = {
// endTime: '',
// startTime: '',
...time,
group: 'K6_1'
};
const data: any = await chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
if (item.name == '比例') {
progressCount.value = Number(item.sum) || 0;
}
});
}
};
watch( watch(
() => props.timeRange, () => props.timeRange,
(newVal) => { (newVal) => {
getChartData(newVal); getChartData(newVal);
getProgressData(newVal)
} }
); );
onMounted(() => { onMounted(() => {

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

@ -16,7 +16,7 @@
v-model="dateArr" v-model="dateArr"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
value-format="yyyy-MM-dd" value-format="YYYY-MM-DD"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
> >
@ -85,7 +85,7 @@ const props = defineProps({
const cascaderOptions = ref([]); const cascaderOptions = ref([]);
const showType = ref("1"); const showType = ref("1");
const cascaderArr = ref([]); const cascaderArr = ref([]);
const dataArr = ref([]); const dateArr = ref([]);
const cascaderProps = { const cascaderProps = {
expandTrigger: "hover", expandTrigger: "hover",
label: "stnm", label: "stnm",
@ -119,11 +119,10 @@ const echartsRef4 = ref();
function getData() { function getData() {
switch (showType.value) { switch (showType.value) {
case "1": case "1":
console.log("dataArr.value >> ", dataArr.value);
// 处理获取指标数据 // 处理获取指标数据
getReservoirMonitorIndexData({ getReservoirMonitorIndexData({
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", startTime: dateArr.value?.length ? dateArr.value[0] + " 00:00:00" : "",
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", endTime: dateArr.value?.length ? dateArr.value[1] + " 23:59:59" : "",
group: "SK", group: "SK",
resCode: props.resCode, resCode: props.resCode,
stcd: cascaderArr.value[0] || "", stcd: cascaderArr.value[0] || "",
@ -255,8 +254,8 @@ function initLineOptions(data: any) {
function getEchartsData() { function getEchartsData() {
// 水库基本情况 // 水库基本情况
getReservoirCZMonitorEchartsData({ getReservoirCZMonitorEchartsData({
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", startTime: dateArr.value?.length ? dateArr.value[0] + " 00:00:00" : "",
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", endTime: dateArr.value?.length ? dateArr.value[1] + " 23:59:59" : "",
resCode: props.resCode, resCode: props.resCode,
stcd: cascaderArr.value[0] || "", stcd: cascaderArr.value[0] || "",
mpcd: cascaderArr.value[1] || "", mpcd: cascaderArr.value[1] || "",
@ -268,8 +267,8 @@ function getEchartsData() {
}); });
// 环境情况 // 环境情况
getReservoirCZMonitorEchartsData({ getReservoirCZMonitorEchartsData({
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", startTime: dateArr.value?.length ? dateArr.value[0] + " 00:00:00" : "",
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", endTime: dateArr.value?.length ? dateArr.value[1] + " 23:59:59" : "",
resCode: props.resCode, resCode: props.resCode,
stcd: cascaderArr.value[0] || "", stcd: cascaderArr.value[0] || "",
elementType: "ENV", elementType: "ENV",
@ -280,8 +279,8 @@ function getEchartsData() {
}); });
// 应变应力 // 应变应力
getReservoirCZMonitorEchartsData({ getReservoirCZMonitorEchartsData({
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", startTime: dateArr.value?.length ? dateArr.value[0] + " 00:00:00" : "",
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", endTime: dateArr.value?.length ? dateArr.value[1] + " 23:59:59" : "",
resCode: props.resCode, resCode: props.resCode,
mpcd: cascaderArr.value[1] || "", mpcd: cascaderArr.value[1] || "",
elementType: "C_STRESS", elementType: "C_STRESS",
@ -322,6 +321,9 @@ onMounted(() => {
height: 32px !important; height: 32px !important;
line-height: 32px !important; line-height: 32px !important;
} }
:deep(.sy-range-editor--small) .sy-range-input {
color: rgba(0, 0, 0, 0.9) !important;
}
.search-box { .search-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@ -12,22 +12,21 @@
<span class="ml-10 mr-6">开始日期</span> <span class="ml-10 mr-6">开始日期</span>
<el-date-picker <el-date-picker
class="w-150" class="w-150"
size="small" popper-class="date-select-common"
type="date"
v-model="startDate" v-model="startDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期" placeholder="选择日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
></el-date-picker> ></el-date-picker>
<span class="ml-10 mr-6">结束日期</span> <span class="ml-10 mr-6">结束日期</span>
<el-date-picker <el-date-picker
class="w-150" class="w-150"
size="small"
type="date" type="date"
v-model="endDate" v-model="endDate"
placeholder="选择日期" placeholder="选择日期"
value-format="yyyy-MM-dd" value-format="YYYY-MM-DD"
format="yyyy-MM-dd" format="YYYY-MM-DD"
></el-date-picker> ></el-date-picker>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
@ -89,32 +88,32 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue"; import { ref, reactive, onMounted, watch } from 'vue';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import { getReservoirCZAlarmPageData } from "@/api/reservoir"; import { getReservoirCZAlarmPageData } from '@/api/reservoir';
const props = defineProps({ const props = defineProps({
resCode: { resCode: {
type: String, type: String,
default: "", default: ''
}, }
}); });
const dateRange: any = ref("0"); const dateRange: any = ref('0');
const startDate: any = ref(dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss")); const startDate: any = ref(dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'));
const endDate: any = ref(dayjs().format("YYYY-MM-DD HH:mm:ss")); const endDate: any = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
const tableData: any = ref([]); const tableData: any = ref([]);
const paramsData: any = ref({ const paramsData: any = ref({
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0, total: 0
}); });
const emit = defineEmits(["node-click"]); const emit = defineEmits(['node-click']);
watch( watch(
() => props.resCode, () => props.resCode,
(val) => { (val) => {
getTableData(val); getTableData(val);
}, },
{ immediate: true }, { immediate: true }
); );
// onMounted(() => { // onMounted(() => {
@ -123,37 +122,37 @@ watch(
function getTableData() { function getTableData() {
getReservoirCZAlarmPageData({ getReservoirCZAlarmPageData({
startDate: startDate.value, startDate: startDate.value + ' 00:00:00',
endDate: endDate.value, endDate: endDate.value + ' 23:59:59',
pageSize: paramsData.value.pageSize, pageSize: paramsData.value.pageSize,
pageNum: paramsData.value.pageNum, pageNum: paramsData.value.pageNum
}).then((res) => { }).then((res: any) => {
console.log("res >>>>> ", res); console.log('res >>>>> ', res);
tableData.value = res.records || []; tableData.value = res.records || [];
paramsData.value.total = res.total; paramsData.value.total = res.total;
}); });
} }
function handleChangeDate(value) { function handleChangeDate(value) {
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');
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); endDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
break; break;
case "1": case '1':
startDate.value = dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"); startDate.value = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); endDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
break; break;
case "2": case '2':
startDate.value = dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"); startDate.value = dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss');
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); endDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
break; break;
case "3": case '3':
startDate.value = dayjs().subtract(3, "month").format("YYYY-MM-DD HH:mm:ss"); startDate.value = dayjs().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss');
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); endDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
break; break;
case "4": case '4':
startDate.value = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"); startDate.value = dayjs().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss');
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); endDate.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
break; break;
default: default:
break; break;
@ -174,11 +173,13 @@ function handleReset() {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.monitor-warning { .monitor-warning {
width: 100%;
padding: 12px;
.search-box { .search-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 12px; // padding: 0 12px;
font-size: 14px; font-size: 14px;
color: #262626; color: #262626;
padding-bottom: 12px; padding-bottom: 12px;

Write Preview
Loading…
Cancel
Save