指标取值配置、交通指数配置

龚焕茏

2024-03-07 2d637ba447da7e89ceaeded52ac3ac1b76f4f22b

指标取值配置、交通指数配置

 src/api/indicatorInfo/index.ts

@@ -1,6 +1,7 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { IndicatorInfoVO, IndicatorInfoForm, IndicatorInfoQuery } from '@/api/indicatorInfo/types';
import { IndicatorStatus } from '@/api/indicatorInfo/status';

/**
 * 查询指标取值列表
@@ -17,6 +18,18 @@
};

/**
 * 查询指标取值状态
 * @returns {*}
 */

export const getIndicatorInfoStatus = (): AxiosPromise<IndicatorStatus[]> => {
  return request({
    url: '/demo/indicatorInfo/status',
    method: 'get',
  });
};

/**
 * 查询指标取值详细
 * @param id
 */

 src/api/indicatorInfo/status.ts

New file
@@ -0,0 +1,24 @@
export interface IndicatorStatus {

  /**
   * 车流量
   */
  carFlowNum: int;

  /**
   * 人流量
   */
  personFlowNum: int;

  /**
   * 游客预约
   */
  visitorSubNum: int;

  /**
   * 入园人数
   */
  enterGardenNum: int;


}

 src/api/ti/trafficIndex/icon.ts

New file
@@ -0,0 +1,12 @@
export interface iconVO {
  /**
   * 主键id
   */
  id: string | number;

  /**
   * 图标
   */
  name: string;

}

 src/api/ti/trafficIndex/index.ts

@@ -1,6 +1,7 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { TrafficIndexVO, TrafficIndexForm, TrafficIndexQuery } from '@/api/ti/trafficIndex/types';
import { iconVO } from '@/api/ti/trafficIndex/icon';

/**
 * 查询交通指数列表
@@ -17,6 +18,18 @@
};

/**
 * 查询配置图标
 * @returns {*}
 */

export const getIcon = (): AxiosPromise<iconVO[]> => {
  return request({
    url: '/rs/trafficIndex/icon',
    method: 'get'
  });
};

/**
 * 查询交通指数详细
 * @param id
 */

 src/views/scenery/sceneryOperationData/index.vue

@@ -100,16 +100,16 @@
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="车流量" prop="carFlowNum">
        <el-form-item label="车流量" prop="carFlowNum" v-if="indicatorStatus.carFlowNum == 1">
          <el-input v-model="form.carFlowNum" placeholder="请输入车流量" />
        </el-form-item>
        <el-form-item label="人流量" prop="personFlowNum">
        <el-form-item label="人流量" prop="personFlowNum" v-if="indicatorStatus.personFlowNum == 1">
          <el-input v-model="form.personFlowNum" placeholder="请输入人流量" />
        </el-form-item>
        <el-form-item label="游客预约" prop="visitorSubNum">
        <el-form-item label="游客预约" prop="visitorSubNum" v-if="indicatorStatus.visitorSubNum == 1">
          <el-input v-model="form.visitorSubNum" placeholder="请输入游客预约" />
        </el-form-item>
        <el-form-item label="入园人数" prop="enterGardenNum">
        <el-form-item label="入园人数" prop="enterGardenNum" v-if="indicatorStatus.enterGardenNum == 1">
          <el-input v-model="form.enterGardenNum" placeholder="请输入入园人数" />
        </el-form-item>
        <el-form-item label="在岗警力" prop="onPolice">
@@ -315,10 +315,22 @@
  sceneryInfoNames.value = res.rows;
}

import { getIndicatorInfoStatus } from '@/api/indicatorInfo';
import { IndicatorStatus } from '@/api/indicatorInfo/status';
// 调用后端API获取指标状态
const indicatorStatus = ref<IndicatorStatus[]>([]);

/** 查询指标取值状态 */
const getIndicatorStatus = async () => {
  const res = await getIndicatorInfoStatus();
  indicatorStatus.value = res;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  getSceneryInfoName();
  getIndicatorStatus();
  dialog.visible = true;
  dialog.title = "添加景区运行数据";
}

 src/views/ti/trafficIndex/index.vue

@@ -86,10 +86,44 @@
      </div>
      <div v-show="activeName=='second'">
      <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>
@@ -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>