From 5e059c9c17a6d63b6c017d2d2beb25ae227071d1 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 11 四月 2025 17:33:59 +0800
Subject: [PATCH] 走航融合优化中
---
src/components/MessageBox.vue | 2
src/components/mission/MissionEdit.vue | 106 ++++++---
src/views/underwaymix/component/ItemGridStyleCtrl.vue | 114 +++++++++++
src/model/SatelliteGrid.js | 140 ++-----------
src/views/underwaymix/UnderwayMixMode.vue | 56 ----
src/components/mission/MissionManage.vue | 56 ++++-
src/views/underwaymix/component/GridStyleTool.vue | 19 +
src/components/CardDialog.vue | 15
src/components/CardDialog copy.vue | 70 +++++++
9 files changed, 354 insertions(+), 224 deletions(-)
diff --git a/src/components/CardDialog copy.vue b/src/components/CardDialog copy.vue
new file mode 100644
index 0000000..7d601c7
--- /dev/null
+++ b/src/components/CardDialog copy.vue
@@ -0,0 +1,70 @@
+<template>
+ <el-dialog
+ :model-value="modelValue"
+ @opened="handleChange(true)"
+ @closed="handleChange(false)"
+ :show-close="false"
+ :destroy-on-close="true"
+ :width="width"
+ :draggable="draggable"
+ :modal="modal"
+ :close-on-click-modal="modal"
+ :modal-class="modal ? 'p-events-auto' : ''"
+ >
+ <template #header="{ close, titleId, titleClass }">
+ <BaseCard direction="top-left" borderless="t">
+ <template #content>
+ <el-row justify="space-between" align="middle">
+ <el-row align="middle">
+ <font-awesome-icon icon="fa fa-list" class="m-r-4" />
+ <span :id="titleId" :class="titleClass">{{ title }}</span>
+ </el-row>
+ <font-awesome-icon
+ icon="fa fa-times"
+ class="cursor-p m-r-4"
+ @click="close"
+ />
+ </el-row>
+ </template>
+ </BaseCard>
+ </template>
+ <BaseCard size="medium">
+ <template #content>
+ <slot></slot>
+ </template>
+ <template #footer>
+ <slot name="footer"></slot>
+ </template>
+ </BaseCard>
+ </el-dialog>
+</template>
+<script>
+export default {
+ props: {
+ // 鏄鹃殣鎺у埗
+ modelValue: Boolean,
+ // 鏍囬
+ title: String,
+ // 瀹藉害
+ width: {
+ type: [String, Number],
+ default: '50%'
+ },
+ // 鍙嫋鎷�
+ draggable: Boolean,
+ // 閬僵灞�
+ modal: {
+ type: Boolean,
+ default: true
+ }
+ },
+ emits: ['update:modelValue', 'changed'],
+ methods: {
+ handleChange(value) {
+ this.$emit('update:modelValue', value);
+ this.$emit('changed', value);
+ }
+ }
+};
+</script>
+<style></style>
diff --git a/src/components/CardDialog.vue b/src/components/CardDialog.vue
index 7d601c7..0d9a0d8 100644
--- a/src/components/CardDialog.vue
+++ b/src/components/CardDialog.vue
@@ -1,8 +1,5 @@
<template>
<el-dialog
- :model-value="modelValue"
- @opened="handleChange(true)"
- @closed="handleChange(false)"
:show-close="false"
:destroy-on-close="true"
:width="width"
@@ -42,7 +39,7 @@
export default {
props: {
// 鏄鹃殣鎺у埗
- modelValue: Boolean,
+ // modelValue: Boolean,
// 鏍囬
title: String,
// 瀹藉害
@@ -58,12 +55,12 @@
default: true
}
},
- emits: ['update:modelValue', 'changed'],
+ // emits: ['update:modelValue', 'changed'],
methods: {
- handleChange(value) {
- this.$emit('update:modelValue', value);
- this.$emit('changed', value);
- }
+ // handleChange(value) {
+ // this.$emit('update:modelValue', value);
+ // this.$emit('changed', value);
+ // }
}
};
</script>
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index ce075f9..bdde446 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -2,8 +2,8 @@
<CardDialog
:title="title"
:model-value="modelValue"
+ @update:modelValue="handleChange"
:width="400"
- @handleChange="handleChange"
>
<el-row justify="center">
<div class="m-v-16">{{ msg }}</div>
diff --git a/src/components/mission/MissionEdit.vue b/src/components/mission/MissionEdit.vue
index c8695b7..902b77a 100644
--- a/src/components/mission/MissionEdit.vue
+++ b/src/components/mission/MissionEdit.vue
@@ -1,5 +1,9 @@
<template>
- <CardDialog v-model="visible" title="鏂板缓璧拌埅浠诲姟">
+ <CardDialog
+ :title="dialogTitle"
+ :model-value="modelValue"
+ @update:modelValue="(e) => $emit('update:modelValue', e)"
+ >
<el-form
:inline="false"
:model="formObj"
@@ -43,26 +47,10 @@
</el-form-item>
</el-form>
</CardDialog>
- <el-button
- v-if="mode == 'create'"
- type="primary"
- class="el-button-custom"
- @click="visible = !visible"
- >
- 鏂板缓浠诲姟
- </el-button>
- <el-button
- v-else
- type="primary"
- size="small"
- icon="EditPen"
- class="el-button-custom"
- @click="visible = !visible"
- ></el-button>
</template>
<script setup>
import moment from 'moment';
-import { ref, reactive, computed } from 'vue';
+import { ref, onMounted, reactive, computed, watch } from 'vue';
import missionApi from '@/api/missionApi';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
import { useFormConfirm } from '@/composables/formConfirm';
@@ -74,15 +62,19 @@
mode: {
type: String,
default: 'create'
+ },
+ modelValue: Boolean,
+ mission: {
+ type: Object
}
- // visible: {
- // type: String,
- // default: 'create'
- // }
+});
+const dialogTitle = computed(() => {
+ return `${props.mode == 'create' ? '鏂板缓' : '淇敼'}璧拌埅浠诲姟`;
});
+const emits = defineEmits(['update:modelValue']);
+
const missionStore = useMissionStore();
-const visible = ref(false);
const { loading, fetchData } = useFetchData();
const rules = reactive({
location: [
@@ -130,15 +122,22 @@
endTime: formObj.value.timeArray[1]
};
});
+
+function submitMission() {
+ const newMission = { ...param.value };
+}
+
// 鍒涘缓浠诲姟
function createMission() {
fetchData((page, pageSize) => {
- return missionApi.putNewMission(param.value).then((res) => {
- visible.value = false;
- missionStore.fetchMission();
- // 閫氱煡鏈嶅姟绔惎鍔ㄤ换鍔¤寖鍥村唴鐨勭涓夋柟鏁版嵁鑾峰彇浠诲姟
- thirdPartyDataApi.fetchMissionData(param.value.missionCode);
- });
+ return missionApi
+ .putNewMission(param.value)
+ .then((res) => {
+ missionStore.fetchMission();
+ // 閫氱煡鏈嶅姟绔惎鍔ㄤ换鍔¤寖鍥村唴鐨勭涓夋柟鏁版嵁鑾峰彇浠诲姟
+ thirdPartyDataApi.fetchMissionData(param.value.missionCode);
+ })
+ .finally(() => emits('update:modelValue', false));
});
}
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
@@ -147,20 +146,49 @@
},
cancel: {
do: () => {
- visible.value = false;
+ emits('update:modelValue', false);
}
}
});
-if (import.meta.env.VITE_DATA_MODE == 'jingan') {
- formObj.value.location = {
- pCode: '31',
- pName: '涓婃捣甯�',
- cCode: '3100',
- cName: '涓婃捣甯�',
- dCode: '310106',
- dName: '闈欏畨鍖�'
- };
+// 鐩戝惉浼犲叆鐨勪换鍔′俊鎭紝鍦ㄦ洿鏂版ā寮忎笅锛屽皢浠诲姟淇℃伅鏄犲皠鍒拌〃鍗曚笂
+watch(
+ () => [props.modelValue, props.mission],
+ (nV, oV) => {
+ if (nV != oV) {
+ const [v, m] = nV;
+ if (v) {
+ initFormObj();
+ }
+ if (m && props.mode == 'update') {
+ formObj.value.location = { dName: m.districtName };
+ formObj.value.missionCode = m.missionCode;
+ formObj.value.deviceType = m.deviceType;
+ formObj.value.deviceCode = m.deviceCode;
+ formObj.value.timeArray = [m.startTime, m.endTime];
+ }
+ }
+ },
+ { immediate: true }
+);
+
+onMounted(() => {
+ initFormObj();
+});
+
+function initFormObj() {
+ if (import.meta.env.VITE_DATA_MODE == 'jingan') {
+ formObj.value.location = {
+ pCode: '31',
+ pName: '涓婃捣甯�',
+ cCode: '3100',
+ cName: '涓婃捣甯�',
+ dCode: '310106',
+ dName: '闈欏畨鍖�'
+ };
+ } else {
+ formObj.value = {};
+ }
}
</script>
<style scoped>
diff --git a/src/components/mission/MissionManage.vue b/src/components/mission/MissionManage.vue
index 5695155..92fda9d 100644
--- a/src/components/mission/MissionManage.vue
+++ b/src/components/mission/MissionManage.vue
@@ -7,11 +7,7 @@
>
浠诲姟绠＄悊
</el-button> -->
- <CardDialog
- :model-value="modelValue"
- @changed="handleChange"
- title="璧拌埅浠诲姟绠＄悊"
- >
+ <CardDialog v-bind="$attrs" title="璧拌埅浠诲姟绠＄悊">
<el-row class="mission-table">
<el-col :span="20">
<el-table
@@ -49,7 +45,14 @@
/>
<el-table-column label="绠＄悊" width="160" align="center">
<template #default="{ row }">
- <MissionEdit mode="update"></MissionEdit>
+ <!-- <MissionEdit mode="update"></MissionEdit> -->
+ <!-- <el-button
+ type="primary"
+ size="small"
+ icon="EditPen"
+ class="el-button-custom"
+ @click="updateMission(row)"
+ ></el-button> -->
<el-button
type="primary"
size="small"
@@ -57,14 +60,14 @@
class="el-button-custom"
@click="deleteMission(row)"
></el-button>
- <el-button
+ <!-- <el-button
:loading="row.downloadLoading"
type="primary"
size="small"
icon="Document"
class="el-button-custom"
@click="downloadReport(row)"
- ></el-button>
+ ></el-button> -->
</template>
</el-table-column>
</el-table>
@@ -74,7 +77,13 @@
<!-- <el-button type="primary" class="el-button-custom">
鏂板缓浠诲姟
</el-button> -->
- <MissionEdit></MissionEdit>
+ <el-button
+ type="primary"
+ class="el-button-custom"
+ @click="createMission"
+ >
+ 鏂板缓浠诲姟
+ </el-button>
<!-- </div> -->
<!-- <div>
<el-button type="primary" class="el-button-custom">
@@ -96,6 +105,12 @@
msg="纭鏄惁鍒犻櫎璇ヨ蛋鑸换鍔�"
confirmText="鍒犻櫎"
></MessageBox>
+ <MissionEdit
+ v-model="dialogVisible"
+ width="30%"
+ :mode="editMode"
+ :mission="selectedMission"
+ ></MissionEdit>
</template>
<script>
import moment from 'moment';
@@ -110,22 +125,35 @@
return { loading, fetchData };
},
props: {
- modelValue: Boolean
+ // modelValue: Boolean
},
- emits: ['update:modelValue'],
+ // emits: ['update:modelValue'],
data() {
return {
dialogVisible: false,
msgBoxVisible: false,
- onConfirm: undefined
+ onConfirm: undefined,
+ // 浠诲姟缂栬緫妯″紡锛宑reate锛氬垱寤烘柊浠诲姟锛寀pdate锛氱紪杈戝凡鏈変换鍔�
+ editMode: 'create',
+ // 閫変腑鐨勫緟缂栬緫浠诲姟
+ selectedMission: undefined
};
},
computed: {
...mapStores(useMissionStore)
},
methods: {
- handleChange(value) {
- this.$emit('update:modelValue', value);
+ // handleChange(value) {
+ // this.$emit('update:modelValue', value);
+ // },
+ createMission() {
+ this.editMode = 'create';
+ this.dialogVisible = true;
+ },
+ updateMission(row) {
+ this.editMode = 'update';
+ this.selectedMission = row;
+ this.dialogVisible = true;
},
deleteMission(row) {
this.onConfirm = () => {
diff --git a/src/model/SatelliteGrid.js b/src/model/SatelliteGrid.js
index 2ca4d43..e2ef06d 100644
--- a/src/model/SatelliteGrid.js
+++ b/src/model/SatelliteGrid.js
@@ -15,16 +15,16 @@
}
gridGroupId;
-
+
// 榛樿鍦板浘缃戞牸鐩稿叧瀵硅薄
mapViews;
gridDataDetail;
- infoMap = new Map();
-
// 鍦板浘缃戞牸瀵硅薄Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸瀵硅薄銆佺綉鏍煎潗鏍囦俊鎭�
mapViewsMap = new Map();
+
+ gridStateMap = new Map();
// 缃戞牸鏁版嵁Map缁撴瀯锛屽瓨鍌ㄥ搴攌ey涓嬬殑缃戞牸鐩戞祴鏁版嵁淇℃伅
gridDataDetailMap = new Map();
@@ -349,7 +349,8 @@
drawTagGrid({ tag, data, grid, dataTxt, rankTxt, extData }) {
if (!this.mapViewsMap.has(tag)) {
const newMapViews = this._createNewMapViews({ extData });
- this.infoMap.set(tag, extData);
+ const newGridState = this._createNewGridState({ extData });
+ this.gridStateMap.set(tag, newGridState);
this.mapViewsMap.set(tag, newMapViews);
this.gridDataDetailMap.set(tag, data);
}
@@ -373,6 +374,7 @@
tags.forEach((t) => {
this.mapViewsMap.delete(t);
this.gridDataDetailMap.delete(t);
+ this.gridStateMap.delete(t);
});
}
@@ -405,7 +407,7 @@
_mapViewsList.forEach((v) => {
if (v.dataTxt) {
map.add(v.dataTxt);
- v.show = true;
+ v.showData = true;
}
});
} else {
@@ -413,7 +415,7 @@
_mapViewsList.forEach((v) => {
if (v.dataTxt) {
map.remove(v.dataTxt);
- v.show = false;
+ v.showData = false;
}
});
}
@@ -424,7 +426,7 @@
_mapViewsList.forEach((v) => {
if (v.rankTxt) {
map.add(v.rankTxt);
- v.show = true;
+ v.showRank = true;
}
});
} else {
@@ -432,7 +434,7 @@
_mapViewsList.forEach((v) => {
if (v.rankTxt) {
map.remove(v.rankTxt);
- v.show = false;
+ v.showRank = false;
}
});
}
@@ -470,9 +472,9 @@
if (_mapViewsList.length == _gridDataDetailList.length) {
_mapViewsList.forEach((v, i) => {
if (v.lastGridViews) {
- if (useCustomColor != undefined) v.useCustomColor = useCustomColor;
+ if (useCustomColor != undefined) v.showCustomColor = useCustomColor;
const lastGridDataDetail = _gridDataDetailList[i];
- if (v.useCustomColor) {
+ if (v.showCustomColor) {
gridMapUtil.drawGridColorCustom(
v.lastGridViews,
lastGridDataDetail,
@@ -588,7 +590,6 @@
});
this.changeGridColor({ tags: [mixTag], isMixGridHighlight });
} else {
- // const mixMapViews = this._createNewMapViews();
// 鏍规嵁鏍囩tag锛岃幏鍙栧搴斿缁勭綉鏍兼暟鎹�
let { _gridDataDetailList } = this._getMapViews(...tags);
const _dataMap = new Map();
@@ -691,108 +692,6 @@
}
return mixTag;
- }
-
- /**
- * 缁樺埗鐑姏鍥剧綉鏍�
- * @param {string} tag
- */
- drawHeatGrid(tag) {
- if (!this.mapViewsMap.has(tag) || !this.gridDataDetailMap.has(tag)) {
- return;
- }
-
- const heatTag = `heat-${tag}`;
- if (this.mapViewsMap.has(heatTag)) {
- this.changeVisibility({
- tags: [heatTag],
- showGridViews: true
- });
- } else {
- const _mapViews = this.mapViewsMap.get(tag);
- const _gridDataDetail = this.gridDataDetailMap.get(tag);
- // const groupId = _gridDataDetail[0].groupId;
- // const cellId = _gridDataDetail.cellId;
-
- const originCellIdList = _gridDataDetail.map((v) => v.cellId);
- let headGridDataDetailList = [];
-
- const width = 120;
- const height = 90;
- const eachwidth = 10;
- const eachheight = 10;
-
- const searchLength = 3;
-
- const _dataMap = new Map();
-
- _gridDataDetail.forEach((gdd) => {
- const searchRes = this.search(
- gdd,
- width,
- height,
- eachwidth,
- eachheight,
- searchLength
- );
- if (searchRes.find((v) => v.cellId == 1670)) {
- console.log();
- }
- searchRes.forEach((e) => {
- if (originCellIdList.indexOf(e.cellId) == -1) {
- if (!_dataMap.has(e.cellId)) {
- _dataMap.set(e.cellId, {
- source: [],
- res: {}
- });
- }
- _dataMap.get(e.cellId).source.push(e);
- }
- });
- });
-
- _dataMap.forEach((v, k) => {
- let total = 0,
- count = v.source.length;
- v.source.forEach((s) => {
- total += s.pm25;
- });
- v.res = {
- isHeatData: true,
- groupId: v.source[0].groupId,
- cellId: v.source[0].cellId,
- pm25: count == 0 ? null : Math.round((total / count) * 10) / 10,
- originData: v.source
- };
- headGridDataDetailList.push(v.res);
- });
- headGridDataDetailList = headGridDataDetailList.concat(_gridDataDetail);
-
- // 閲嶆柊鎸夌収鐩戞祴鏁版嵁鎺掑簭骞舵爣璁版帓鍚�
- headGridDataDetailList.sort((a, b) => {
- return b.pm25 - a.pm25;
- });
- headGridDataDetailList.forEach((gdd, i) => {
- gdd.rank = i + 1;
- });
-
- this.drawTagGrid({
- tag: heatTag,
- data: headGridDataDetailList,
- // grid: {
- // style: {
- // isMixGridHighlight:
- // isMixGridHighlight == undefined ? true : isMixGridHighlight
- // }
- // },
- extData: {
- name: `璧拌埅鐑姏鍥� - ${heatTag}`,
- type: 2
- }
- });
- }
-
- return heatTag;
}
drawHeatGrid2(tag, headGridDataDetailList) {
@@ -971,4 +870,19 @@
show: true
};
}
+
+ _createNewGridState({ extData }) {
+ return {
+ type: undefined,
+ name: '',
+ showGrid: true,
+ showRank: false,
+ showData: false,
+ showCustomColor: false,
+ showHeatMap: false,
+ highlightFusionGrid: false,
+ showUnderway: false,
+ opacityValue: 1
+ };
+ }
}
diff --git a/src/views/underwaymix/UnderwayMixMode.vue b/src/views/underwaymix/UnderwayMixMode.vue
index 8c82db3..fed5590 100644
--- a/src/views/underwaymix/UnderwayMixMode.vue
+++ b/src/views/underwaymix/UnderwayMixMode.vue
@@ -57,7 +57,7 @@
v-model="selectedPollutionDegree"
multiple
clearable
- placeholder="閫夋嫨鑳屾櫙"
+ placeholder="閫夋嫨姹℃煋鑳屾櫙"
size="small"
style="width: 300px"
>
@@ -154,6 +154,7 @@
class="el-button-custom"
size="small"
@click="handleMixClick"
+ :disabled="selectedfusionData.length < 2"
>
{{ '铻嶅悎鍒嗘瀽' }}
</el-button>
@@ -484,59 +485,17 @@
let mixTag;
function handleMixClick() {
- // mixActive.value = !mixActive.value;
const tags = selectedfusionData.value.map((v) => v.id);
satelliteGrid.changeVisibility({
showGridViews: false,
showDataTxt: false,
showRankTxt: false
});
- // if (mixActive.value) {
gridApi.mixUnderwayGridData(props.groupId, tags).then((res) => {
mixTag = satelliteGrid.mixGrid2({ tags, gridDataDetailList: res.data });
satelliteGrid.setDefaultGridClickEvent([mixTag]);
gridCtrls.value = [satelliteGrid];
});
-
- // satelliteGrid.setGridEvent([mixTag], 'click', (gridCell, gridDataDetail) => {
- // gridStore.selectedGridCellAndDataDetail = {
- // gridCell,
- // gridDataDetail
- // };
- // });
- // gridCtrls.value = [satelliteGrid];
- // } else {
- // satelliteGrid.changeVisibility({
- // tags,
- // showGridViews: true
- // });
- // }
-}
-
-let heatTag;
-const heatMapSearchLength = 4;
-function handleHeatMapClick() {
- heatActive.value = !heatActive.value;
- satelliteGrid.changeVisibility({
- showGridViews: false,
- showDataTxt: false,
- showRankTxt: false
- });
- if (heatActive.value) {
- const data = satelliteGrid.gridDataDetailMap.get(mixTag);
- gridApi
- .buildUnderwayHeatmap(props.groupId, data, heatMapSearchLength)
- .then((res) => {
- heatTag = satelliteGrid.drawHeatGrid2(mixTag, res.data);
- satelliteGrid.setDefaultGridClickEvent([heatTag]);
- gridCtrls.value = [satelliteGrid];
- });
- } else {
- satelliteGrid.changeVisibility({
- tags: [mixTag],
- showGridViews: true
- });
- }
}
function handleHeatMapSearchClick() {
@@ -573,14 +532,17 @@
function handleFusionDelete(index, tag) {
const f = selectedfusionData.value.find((v) => v.id == tag);
if (f) {
- // const i = selectedfusionData.value.indexOf(f);
- // selectedfusionData.value.splice(i, 1);
+ const i = selectedfusionData.value.indexOf(f);
+ selectedfusionData.value.splice(i, 1);
+ lastSelectedfusionData.value = useCloned(
+ selectedfusionData.value
+ ).cloned.value;
tableRef.value.toggleRowSelection(f, false);
}
}
function handleSelectionChange(val) {
- console.log(val);
+ // console.log(val);
const deleted = lastSelectedfusionData.value.filter((v) => {
return !val.find((t) => t.id == v.id);
@@ -660,7 +622,7 @@
}
});
- lastSelectedfusionData.value = useCloned(val).cloned.value
+ lastSelectedfusionData.value = useCloned(val).cloned.value;
selectedfusionData.value = val;
}
diff --git a/src/views/underwaymix/component/GridStyleTool.vue b/src/views/underwaymix/component/GridStyleTool.vue
index 7429e04..0c5b79d 100644
--- a/src/views/underwaymix/component/GridStyleTool.vue
+++ b/src/views/underwaymix/component/GridStyleTool.vue
@@ -181,6 +181,12 @@
tag: v[0],
extData: v[1].extData,
show: v[1].show,
+ showRank: v[1].showRank,
+ showData: v[1].showData,
+ showCustomColor: v[1].showCustomColor,
+ showHeatMap: v[1].showHeatMap,
+ highlightFusionGrid: true,
+ // ...v[1],
opacityValue: 1
};
})
@@ -274,10 +280,21 @@
showDataTxt: false,
showRankTxt: false
});
+ // gridCtrlList.value.forEach((v) => {
+ // v.views.forEach((view) => {
+ // view.show = false;
+ // view.showData = false;
+ // view.showRank = false;
+ // });
+ // });
if (e) {
const data = _satelliteGrid.gridDataDetailMap.get(value.tag);
gridApi
- .buildUnderwayHeatmap(_satelliteGrid.gridGroupId, data, heatMapSearchLength)
+ .buildUnderwayHeatmap(
+ _satelliteGrid.gridGroupId,
+ data,
+ heatMapSearchLength
+ )
.then((res) => {
heatTag = _satelliteGrid.drawHeatGrid2(value.tag, res.data);
_satelliteGrid.setDefaultGridClickEvent([heatTag]);
diff --git a/src/views/underwaymix/component/ItemGridStyleCtrl.vue b/src/views/underwaymix/component/ItemGridStyleCtrl.vue
new file mode 100644
index 0000000..8dd0298
--- /dev/null
+++ b/src/views/underwaymix/component/ItemGridStyleCtrl.vue
@@ -0,0 +1,114 @@
+<template>
+ <el-row justify="space-between" align="middle">
+ <div>
+ <span v-if="value.extData.type == 0">{{ value.tag + '.' }}</span>
+ {{ value.extData.name }}
+ </div>
+ <el-button
+ class="el-button-custom"
+ type="primary"
+ icon="Close"
+ circle
+ size="small"
+ @click="handleCloseClick(i, t, value)"
+ />
+ </el-row>
+ <el-row class="m-t-8" justify="space-between">
+ <CheckButton
+ :loading="gridLoading"
+ v-model="value.show"
+ active-text="鏄剧ず缃戞牸"
+ inactive-text="闅愯棌缃戞牸"
+ @change="(e) => handleGridClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="rankLoading"
+ v-model="value.showRank"
+ active-text="鏄剧ず鎺掑悕"
+ inactive-text="闅愯棌鎺掑悕"
+ :default-value="false"
+ @change="(e) => handleRankClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="dataLoading"
+ v-model="value.showData"
+ active-text="鏄剧ず鏁版嵁"
+ inactive-text="闅愯棌鏁版嵁"
+ :default-value="false"
+ @change="(e) => handleDataClick(e, i, value)"
+ >
+ </CheckButton>
+ </el-row>
+ <el-row class="m-t-8" justify="space-between">
+ <CheckButton
+ :loading="colorLoading"
+ v-model="value.showCustomColor"
+ active-text="缁樺埗瀵规瘮鑹�"
+ inactive-text="缁樺埗鏍囧噯鑹�"
+ :default-value="false"
+ @change="(e) => handleColorClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="heatMapLoading"
+ v-model="value.showHeatMap"
+ active-text="椋庨櫓鐑姏鍥�"
+ inactive-text="椋庨櫓鐑姏鍥�"
+ :default-value="false"
+ @change="(e) => handleHeatMapClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="underwayLoading"
+ v-if="value.extData.type == 0"
+ v-model="value.showUnderway"
+ active-text="鏄剧ず璧拌埅杞ㄨ抗"
+ inactive-text="闅愯棌璧拌埅杞ㄨ抗"
+ :default-value="false"
+ @change="(e) => handleUnderwayClick(e, i, value)"
+ >
+ </CheckButton>
+ <CheckButton
+ :loading="highlightLoading"
+ v-if="value.extData.type == 1"
+ v-model="value.highlightFusionGrid"
+ active-text="楂樹寒铻嶅悎缃戞牸"
+ :default-value="true"
+ @change="(e) => handleHighlightGridClick(e, i, value)"
+ >
+ </CheckButton>
+ </el-row>
+ <el-form-item label="閫忔槑搴�">
+ <el-slider
+ v-model="value.opacityValue"
+ :min="0"
+ :max="1"
+ :step="0.1"
+ show-stops
+ @change="(e) => handleOpacityChange(e, i, value)"
+ style="width: 150px"
+ />
+ <el-input-number
+ class="m-l-16"
+ size="small"
+ v-model="value.opacityValue"
+ :min="0"
+ :max="1"
+ :step="0.1"
+ @change="(e) => handleOpacityChange(e, i, value)"
+ />
+ </el-form-item>
+ <el-divider />
+</template>
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';
+
+const props = defineProps({
+ value: {
+ type: Object,
+ default: () => {}
+ }
+});
+</script>
--
Gitblit v1.9.3