龚焕茏
2024-03-07 2d637ba447da7e89ceaeded52ac3ac1b76f4f22b
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>