| | |
| | | </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"> |
| | |
| | | </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[]>([]); |
| | |
| | | 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: '' |
| | |
| | | |
| | | 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> |