From 2d637ba447da7e89ceaeded52ac3ac1b76f4f22b Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期四, 07 三月 2024 13:42:19 +0800
Subject: [PATCH] 指标取值配置、交通指数配置
---
src/views/ti/trafficIndex/index.vue | 87 +++++++++++++++++++++++++++++++++++++------
1 files changed, 75 insertions(+), 12 deletions(-)
diff --git a/src/views/ti/trafficIndex/index.vue b/src/views/ti/trafficIndex/index.vue
index 8dd6780..a10682f 100644
--- a/src/views/ti/trafficIndex/index.vue
+++ b/src/views/ti/trafficIndex/index.vue
@@ -85,12 +85,46 @@
</el-card>
</div>
<div v-show="activeName=='second'">
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-
- </transition>
-
-
- </div>
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+ <div>
+ <el-form-item :label="item.name + '锛�'" prop="" v-for="item in icons" :key="item.id">
+ <el-upload action="#" list-type="picture-card" :auto-upload="false">
+ <el-icon><Plus /></el-icon>
+ <template #file="{ file }">
+ <div>
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
+ >
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleDownload(file)"
+ >
+ <el-icon><Download /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleRemove(file)"
+ >
+ <el-icon><Delete /></el-icon>
+ </span>
+ </span>
+ </div>
+ </template>
+ </el-upload>
+ <el-dialog v-model="dialogVisible">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
+ </el-form-item>
+ </div>
+ </transition>
+ </div>
<!-- 娣诲姞鎴栦慨鏀逛氦閫氭寚鏁板璇濇 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="trafficIndexFormRef" :model="form" :rules="rules" label-width="80px">
@@ -191,9 +225,9 @@
</template>
<script setup name="TrafficIndex" lang="ts">
-import { listTrafficIndex, getTrafficIndex, delTrafficIndex, addTrafficIndex, updateTrafficIndex } from '@/api/ti/trafficIndex';
+import { listTrafficIndex, getTrafficIndex, delTrafficIndex, addTrafficIndex, updateTrafficIndex, getIcon } from '@/api/ti/trafficIndex';
import { TrafficIndexVO, TrafficIndexQuery, TrafficIndexForm } from '@/api/ti/trafficIndex/types';
-import type { TabsPaneContext, UploadProps, UploadUserFile } from "element-plus";
+import type { TabsPaneContext } from "element-plus";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const trafficIndexList = ref<TrafficIndexVO[]>([]);
@@ -207,9 +241,6 @@
const activeName = ref('first');
const queryFormRef = ref<ElFormInstance>();
const trafficIndexFormRef = ref<ElFormInstance>();
-const dialogImageUrl =ref('');
-const dialogVisible= ref(false);
-const disabled= ref(false);
const dialog = reactive<DialogOption>({
visible: false,
title: ''
@@ -467,10 +498,42 @@
onMounted(() => {
getList();
+ getIcons();
});
+
+import { iconVO } from '@/api/ti/trafficIndex/icon';
+// 璋冪敤鍚庣API鑾峰彇鎸囨爣鐘舵��
+const icons = ref<iconVO[]>([]);
+
+/** 鏌ヨ鎸囨爣鍙栧�肩姸鎬� */
+const getIcons = async () => {
+ const res = await getIcon();
+ icons.value = res;
+}
/** 娓呯┖鍛ㄦ湡 */
const clearPeriod = () => {
form.value.periodDate = undefined;
-};
+};
+
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
+
+import type { UploadFile } from 'element-plus'
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const disabled = ref(false)
+
+const handleRemove = (file: UploadFile) => {
+ console.log(file)
+}
+
+const handlePictureCardPreview = (file: UploadFile) => {
+ dialogImageUrl.value = file.url!
+ dialogVisible.value = true
+}
+
+const handleDownload = (file: UploadFile) => {
+ console.log(file)
+}
</script>
--
Gitblit v1.8.0