景区运行数据基础功能

龚焕茏

2024-03-05 1c391db321fae77ddcd297e14fbe1429960ead49

景区运行数据基础功能

 src/api/indicatorInfo/index.ts

New file
@@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { IndicatorInfoVO, IndicatorInfoForm, IndicatorInfoQuery } from '@/api/indicatorInfo/types';

/**
 * 查询指标取值列表
 * @param query
 * @returns {*}
 */

export const listIndicatorInfo = (query?: IndicatorInfoQuery): AxiosPromise<IndicatorInfoVO[]> => {
  return request({
    url: '/demo/indicatorInfo/list',
    method: 'get',
    params: query
  });
};

/**
 * 查询指标取值详细
 * @param id
 */
export const getIndicatorInfo = (id: string | number): AxiosPromise<IndicatorInfoVO> => {
  return request({
    url: '/demo/indicatorInfo/' + id,
    method: 'get'
  });
};

/**
 * 新增指标取值
 * @param data
 */
export const addIndicatorInfo = (data: IndicatorInfoForm) => {
  return request({
    url: '/demo/indicatorInfo',
    method: 'post',
    data: data
  });
};

/**
 * 修改指标取值
 * @param data
 */
export const updateIndicatorInfo = (data: IndicatorInfoForm) => {
  return request({
    url: '/demo/indicatorInfo',
    method: 'put',
    data: data
  });
};

/**
 * 删除指标取值
 * @param id
 */
export const delIndicatorInfo = (id: string | number | Array<string | number>) => {
  return request({
    url: '/demo/indicatorInfo/' + id,
    method: 'delete'
  });
};

 src/api/indicatorInfo/types.ts

New file
@@ -0,0 +1,66 @@
export interface IndicatorInfoVO {
  /**
   * 编号
   */
  id: string | number;

  /**
   * 指标名称
   */
  indicatorName: string;

  /**
   * 创建时间
   */
  createTime: string;

  /**
   * 状态 1自定义 2指标取值
   */
  status: number;

}

export interface IndicatorInfoForm extends BaseEntity {
  /**
   * 编号
   */
  id?: string | number;

  /**
   * 指标名称
   */
  indicatorName?: string;

  /**
   * 状态 1自定义 2指标取值
   */
  status?: number;

}

export interface IndicatorInfoQuery extends PageQuery {

  /**
   * 指标名称
   */
  indicatorName?: string;

  /**
   * 创建时间
   */
  createTime?: string;

  /**
   * 状态 1自定义 2指标取值
   */
  status?: number;

    /**
     * 日期范围参数
     */
    params?: any;
}




 src/api/pcr/pcrData/types.ts

@@ -12,12 +12,12 @@
  /**
   * 周期
   */
  periodName: string;
  period: number;

  /**
   * 周期年
   */
  periodYear: string;
  periodDate: string;

  /**
   * 周期月
@@ -32,7 +32,7 @@
  /**
   * 指标1值
   */
  indexOneValue: number;
  indexOneValue: string;

  /**
   * 指标2名称
@@ -42,7 +42,7 @@
  /**
   * 指标2值
   */
  indexTwoValue: number;
  indexTwoValue: string;

  /**
   * 指标3名称
@@ -52,7 +52,7 @@
  /**
   * 指标3值
   */
  indexThreeValue: number;
  indexThreeValue: string;

  /**
   * 指标4名称
@@ -62,7 +62,7 @@
  /**
   * 指标4值
   */
  indexFourValue: number;
  indexFourValue: string;

  /**
   * 状态  1启用   0未启用
@@ -85,17 +85,12 @@
  /**
   * 周期
   */
  periodName?: string;
  period?: number;

  /**
   * 周期年
   */
  periodYear?: string;

  /**
   * 周期月
   */
  periodMonth?: number;
  periodDate?: string;

  /**
   * 指标1名称
@@ -105,7 +100,7 @@
  /**
   * 指标1值
   */
  indexOneValue?: number;
  indexOneValue?: string;

  /**
   * 指标2名称
@@ -115,7 +110,7 @@
  /**
   * 指标2值
   */
  indexTwoValue?: number;
  indexTwoValue?: string;

  /**
   * 指标3名称
@@ -125,7 +120,7 @@
  /**
   * 指标3值
   */
  indexThreeValue?: number;
  indexThreeValue?: string;

  /**
   * 指标4名称
@@ -135,7 +130,7 @@
  /**
   * 指标4值
   */
  indexFourValue?: number;
  indexFourValue?: string;

  /**
   * 状态  1启用   0未启用
@@ -154,17 +149,12 @@
  /**
   * 周期
   */
  periodName?: string;
  period?: number;

  /**
   * 周期年
   */
  periodYear?: string;

  /**
   * 周期月
   */
  periodMonth?: number;
  periodDate?: string;

  /**
   * 指标1名称
@@ -174,7 +164,7 @@
  /**
   * 指标1值
   */
  indexOneValue?: number;
  indexOneValue?: string;

  /**
   * 指标2名称
@@ -184,7 +174,7 @@
  /**
   * 指标2值
   */
  indexTwoValue?: number;
  indexTwoValue?: string;

  /**
   * 指标3名称
@@ -194,7 +184,7 @@
  /**
   * 指标3值
   */
  indexThreeValue?: number;
  indexThreeValue?: string;

  /**
   * 指标4名称
@@ -204,7 +194,7 @@
  /**
   * 指标4值
   */
  indexFourValue?: number;
  indexFourValue?: string;

  /**
   * 状态  1启用   0未启用

 src/api/scenery/sceneryOperationData/index.ts

@@ -1,6 +1,7 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { SceneryOperationDataVO, SceneryOperationDataForm, SceneryOperationDataQuery } from '@/api/scenery/sceneryOperationData/types';
import { SceneryInfoVO } from '@/api/sceneryInfo/types';

/**
 * 查询景区运行数据列表
@@ -10,7 +11,7 @@

export const listSceneryOperationData = (query?: SceneryOperationDataQuery): AxiosPromise<SceneryOperationDataVO[]> => {
  return request({
    url: '/sc/sceneryOperationData/list',
    url: '/demo/sceneryOperationData/list',
    method: 'get',
    params: query
  });
@@ -22,7 +23,17 @@
 */
export const getSceneryOperationData = (id: string | number): AxiosPromise<SceneryOperationDataVO> => {
  return request({
    url: '/sc/sceneryOperationData/' + id,
    url: '/demo/sceneryOperationData/' + id,
    method: 'get'
  });
};

/**
 * 查询景区名称
 */
export const getSceneryInfoNames = (): AxiosPromise<SceneryInfoVO[]> => {
  return request({
    url: '/demo/sceneryInfo/list',
    method: 'get'
  });
};
@@ -33,7 +44,7 @@
 */
export const addSceneryOperationData = (data: SceneryOperationDataForm) => {
  return request({
    url: '/sc/sceneryOperationData',
    url: '/demo/sceneryOperationData',
    method: 'post',
    data: data
  });
@@ -45,7 +56,7 @@
 */
export const updateSceneryOperationData = (data: SceneryOperationDataForm) => {
  return request({
    url: '/sc/sceneryOperationData',
    url: '/demo/sceneryOperationData',
    method: 'put',
    data: data
  });
@@ -57,7 +68,7 @@
 */
export const delSceneryOperationData = (id: string | number | Array<string | number>) => {
  return request({
    url: '/sc/sceneryOperationData/' + id,
    url: '/demo/sceneryOperationData/' + id,
    method: 'delete'
  });
};

 src/api/scenery/sceneryOperationData/types.ts

@@ -5,14 +5,24 @@
  id: string | number;

  /**
   * 周期年
   * 景区id
   */
  periodYear: number;
  sceneryInfoId: string | number;

  /**
   * 周期月
   * 景区名称
   */
  periodMonth: number;
  sceneryInfoName: string;

  /**
   * 年度/月度 1年度 2月度
   */
  period: number;

  /**
   * 周期
   */
  periodDate: string;

  /**
   * 车流量
@@ -55,9 +65,9 @@
  status: number;

  /**
   * 景区id
   * 创建时间
   */
  scId: string | number;
  createTime: string;

}

@@ -68,14 +78,24 @@
  id?: string | number;

  /**
   * 周期年
   * 景区id
   */
  periodYear?: number;
  sceneryInfoId?: string | number;

  /**
   * 周期月
   * 景区名称
   */
  periodMonth?: number;
  sceneryInfoName?: string;

  /**
   * 年度/月度 1年度 2月度
   */
  period?: number;

  /**
   * 周期
   */
  periodDate?: string;

  /**
   * 车流量
@@ -116,70 +136,25 @@
   * 状态 1启用 0未启用
   */
  status?: number;

  /**
   * 景区id
   */
  scId?: string | number;

}

export interface SceneryOperationDataQuery extends PageQuery {

  /**
   * 周期年
   * 景区名称
   */
  periodYear?: number;
  sceneryInfoName?: string;

  /**
   * 周期月
   * 周期
   */
  periodMonth?: number;

  /**
   * 车流量
   */
  carFlowNum?: number;

  /**
   * 人流量
   */
  personFlowNum?: number;

  /**
   * 游客预约
   */
  visitorSubNum?: number;

  /**
   * 入园人数
   */
  enterGardenNum?: number;

  /**
   * 在岗警力
   */
  onPolice?: number;

  /**
   * 在岗警车
   */
  onPaddyWagon?: number;

  /**
   * 备勤警力
   */
  standbyPolice?: number;
  periodDate?: string;

  /**
   * 状态 1启用 0未启用
   */
  status?: number;

  /**
   * 景区id
   */
  scId?: string | number;

    /**
     * 日期范围参数

 src/api/sceneryInfo/index.ts

New file
@@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { SceneryInfoVO, SceneryInfoForm, SceneryInfoQuery } from '@/api/sceneryInfo/types';

/**
 * 查询景区配置信息列表
 * @param query
 * @returns {*}
 */

export const listSceneryInfo = (query?: SceneryInfoQuery): AxiosPromise<SceneryInfoVO[]> => {
  return request({
    url: '/demo/sceneryInfo/list',
    method: 'get',
    params: query
  });
};

/**
 * 查询景区配置信息详细
 * @param id
 */
export const getSceneryInfo = (id: string | number): AxiosPromise<SceneryInfoVO> => {
  return request({
    url: '/demo/sceneryInfo/' + id,
    method: 'get'
  });
};

/**
 * 新增景区配置信息
 * @param data
 */
export const addSceneryInfo = (data: SceneryInfoForm) => {
  return request({
    url: '/demo/sceneryInfo',
    method: 'post',
    data: data
  });
};

/**
 * 修改景区配置信息
 * @param data
 */
export const updateSceneryInfo = (data: SceneryInfoForm) => {
  return request({
    url: '/demo/sceneryInfo',
    method: 'put',
    data: data
  });
};

/**
 * 删除景区配置信息
 * @param id
 */
export const delSceneryInfo = (id: string | number | Array<string | number>) => {
  return request({
    url: '/demo/sceneryInfo/' + id,
    method: 'delete'
  });
};

 src/api/sceneryInfo/types.ts

New file
@@ -0,0 +1,81 @@
export interface SceneryInfoVO {
  /**
   * 编号
   */
  id: string | number;

  /**
   * 景区名称
   */
  sceneryName: string;

  /**
   * 排序
   */
  sequence: number;

  /**
   * 创建时间
   */
  createTime: string;

  /**
   * 启用状态 1启用 2未启用
   */
  status: number;

}

export interface SceneryInfoForm extends BaseEntity {
  /**
   * 编号
   */
  id?: string | number;

  /**
   * 景区名称
   */
  sceneryName?: string;

  /**
   * 排序
   */
  sequence?: number;

  /**
   * 启用状态 1启用 2未启用
   */
  status?: number;

}

export interface SceneryInfoQuery extends PageQuery {

  /**
   * 景区名称
   */
  sceneryName?: string;

  /**
   * 排序
   */
  sequence?: number;

  /**
   * 创建时间
   */
  createTime?: string;

  /**
   * 启用状态 1启用 2未启用
   */
  status?: number;

    /**
     * 日期范围参数
     */
    params?: any;
}




 src/api/ti/trafficIndex/types.ts

@@ -17,7 +17,7 @@
  /**
   * 指标1值
   */
  targetOneValue: number;
  targetOneValue: string;

  /**
   * 指标1单位
@@ -32,7 +32,7 @@
  /**
   * 指标1上浮或下降值
   */
  targetOneCompareValue: number;
  targetOneCompareValue: string;

  /**
   * 指标2名称
@@ -42,7 +42,7 @@
  /**
   * 指标2值
   */
  targetTwoValue: number;
  targetTwoValue: string;

  /**
   * 指标2单位
@@ -57,7 +57,7 @@
  /**
   * 指标2上浮或下降值
   */
  targetTwoCompareValue: number;
  targetTwoCompareValue: string;

  /**
   * 指标3名称
@@ -67,7 +67,7 @@
  /**
   * 指标3值
   */
  targetThreeValue: number;
  targetThreeValue: string;

  /**
   * 指标3单位
@@ -82,7 +82,7 @@
  /**
   * 指标3上浮或下降值
   */
  targetThreeCompareValue: number;
  targetThreeCompareValue: string;

  /**
   * 指标4名称
@@ -92,7 +92,7 @@
  /**
   * 指标4值
   */
  targetFourValue: number;
  targetFourValue: string;

  /**
   * 指标4单位
@@ -107,7 +107,7 @@
  /**
   * 指标4上浮或下降值
   */
  targetFourCompareValue: number;
  targetFourCompareValue: string;

  /**
   * 启用状态 1启用 2未启用
@@ -117,12 +117,12 @@
  /**
   * 周期 1 月  2年
   */
  periodName: string;
  period: number;

  /**
   * 周期值
   */
  periodValue: number;
  periodDate: string;

  /**
   * 0未删除   1已删除
@@ -150,7 +150,7 @@
  /**
   * 指标1值
   */
  targetOneValue?: number;
  targetOneValue?: string;

  /**
   * 指标1单位
@@ -165,7 +165,7 @@
  /**
   * 指标1上浮或下降值
   */
  targetOneCompareValue?: number;
  targetOneCompareValue?: string;

  /**
   * 指标2名称
@@ -175,7 +175,7 @@
  /**
   * 指标2值
   */
  targetTwoValue?: number;
  targetTwoValue?: string;

  /**
   * 指标2单位
@@ -190,7 +190,7 @@
  /**
   * 指标2上浮或下降值
   */
  targetTwoCompareValue?: number;
  targetTwoCompareValue?: string;

  /**
   * 指标3名称
@@ -200,7 +200,7 @@
  /**
   * 指标3值
   */
  targetThreeValue?: number;
  targetThreeValue?: string;

  /**
   * 指标3单位
@@ -215,7 +215,7 @@
  /**
   * 指标3上浮或下降值
   */
  targetThreeCompareValue?: number;
  targetThreeCompareValue?: string;

  /**
   * 指标4名称
@@ -225,7 +225,7 @@
  /**
   * 指标4值
   */
  targetFourValue?: number;
  targetFourValue?: string;

  /**
   * 指标4单位
@@ -240,7 +240,7 @@
  /**
   * 指标4上浮或下降值
   */
  targetFourCompareValue?: number;
  targetFourCompareValue?: string;

  /**
   * 启用状态 1启用 2未启用
@@ -250,12 +250,12 @@
  /**
   * 周期 1 月  2年
   */
  periodName?: string;
  period?: number;

  /**
   * 周期值
   */
  periodValue?: number;
  periodDate?: string;

  /**
   * 0未删除   1已删除
@@ -279,7 +279,7 @@
  /**
   * 指标1值
   */
  targetOneValue?: number;
  targetOneValue?: string;

  /**
   * 指标1单位
@@ -294,7 +294,7 @@
  /**
   * 指标1上浮或下降值
   */
  targetOneCompareValue?: number;
  targetOneCompareValue?: string;

  /**
   * 指标2名称
@@ -304,7 +304,7 @@
  /**
   * 指标2值
   */
  targetTwoValue?: number;
  targetTwoValue?: string;

  /**
   * 指标2单位
@@ -319,7 +319,7 @@
  /**
   * 指标2上浮或下降值
   */
  targetTwoCompareValue?: number;
  targetTwoCompareValue?: string;

  /**
   * 指标3名称
@@ -329,7 +329,7 @@
  /**
   * 指标3值
   */
  targetThreeValue?: number;
  targetThreeValue?: string;

  /**
   * 指标3单位
@@ -344,7 +344,7 @@
  /**
   * 指标3上浮或下降值
   */
  targetThreeCompareValue?: number;
  targetThreeCompareValue?: string;

  /**
   * 指标4名称
@@ -354,7 +354,7 @@
  /**
   * 指标4值
   */
  targetFourValue?: number;
  targetFourValue?: string;

  /**
   * 指标4单位
@@ -369,7 +369,7 @@
  /**
   * 指标4上浮或下降值
   */
  targetFourCompareValue?: number;
  targetFourCompareValue?: string;

  /**
   * 启用状态 1启用 2未启用
@@ -379,12 +379,12 @@
  /**
   * 周期 1 月  2年
   */
  periodName?: string;
  period?: number;

  /**
   * 周期值
   */
  periodValue?: number;
  periodDate?: string;

  /**
   * 0未删除   1已删除

 src/views/dg/danger/total.vue

@@ -82,16 +82,16 @@
      <el-form ref="dangerTotalFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="镇街名称" prop="townStreetName" label-width="100">
          <!-- <el-input v-model="form.townStreetName" placeholder="请输入镇街名称" /> -->
          <el-select v-model="form.townStreetName" placeholder="请选择" clearable style="width: 240px" @keyup.enter="handleQuery" >
          <el-select v-model="form.townStreetName" placeholder="请选择" clearable style="width: 240px" >
              <el-option v-for="item in townStreetNames" :key="item.townStreetName" :label="item.townStreetName" :value="item.townStreetName"/>
            </el-select>
        </el-form-item>
        <el-form-item label="统计周期" prop="periodDate" label-width="100">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;" @change="clearPeriod">
            <el-option key="1" label="年度" :value="1" />
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &nbsp;
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="发现隐患" prop="findSecurityRisks" label-width="100">
@@ -144,12 +144,12 @@
});

const townStreetNames = [
  {
    townStreetName: '幸福街道',
  },
  {
    townStreetName: '银杏街道'
  }];
{
  townStreetName: '幸福街道',
},
{
  townStreetName: '银杏街道'
}];

const initFormData: DangerTotalForm = {
  id: undefined,
@@ -159,7 +159,7 @@
  findSecurityRisks: undefined,
  issueNotice: undefined,
  dealWithSecurityRisks: undefined,
  status: undefined
  status: 1
}
const data = reactive<PageData<DangerTotalForm, DangerTotalQuery>>({
  form: {...initFormData},
@@ -309,4 +309,9 @@
const pickerFormat = computed(() => {
  return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
});

/** 清空周期 */
const clearPeriod = () => {
  form.value.periodDate = undefined;
};
</script>

 src/views/indicatorInfo/index.vue

New file
@@ -0,0 +1,106 @@
<template>
  <div class="p-2">
    <el-form ref="indicatorInfoFormRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item :label="indicator.indicatorName" v-for="indicator in indicatorInfoList" :key="indicator.id">
        <el-radio-group v-model="indicator.status">
          <el-radio :label="2">接口取值</el-radio>
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from 'vue';
import { listIndicatorInfo, updateIndicatorInfo } from '@/api/indicatorInfo';
import { IndicatorInfoVO, IndicatorInfoForm } from '@/api/indicatorInfo/types';
import { ElForm, ElFormItem, ElRadioGroup, ElRadio, ElButton } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const indicatorInfoList = ref<IndicatorInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const total = ref(0);

const indicatorInfoFormRef = ref<ElFormInstance>();

const initFormData: IndicatorInfoForm = {
  id: undefined,
  indicatorName: undefined,
  status: undefined
}
const data = reactive({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    indicatorName: undefined,
    createTime: undefined,
    status: undefined,
    params: {}
  },
  rules: {
    id: [
      { required: true, message: "编号不能为空", trigger: "blur" }
    ],
    indicatorName: [
      { required: true, message: "指标名称不能为空", trigger: "blur" }
    ],
    status: [
      { required: true, message: "状态 1自定义 2指标取值不能为空", trigger: "change" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询指标取值列表 */
const getList = async () => {
  loading.value = true;
  try {
    const res = await listIndicatorInfo(queryParams.value);
    indicatorInfoList.value = res.rows;
    total.value = res.total;
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
}

/** 提交按钮 */
const submitForm = async () => {
  try {
    // 循环提交每个单独的对象
    for (const indicator of indicatorInfoList.value) {
      const object = {
        id: indicator.id,
        status: indicator.status
      };
      console.log(object)
      await updateIndicatorInfo(object);
    }
    await getList();
    proxy?.$modal.msgSuccess("修改成功");
  } catch (error) {
    console.error(error);
  } finally {
    buttonLoading.value = false;
  }
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.p-2 {
  padding: 2rem;
}
</style>

 src/views/pcr/pcrData/index.vue

@@ -3,41 +3,14 @@
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="模块名称" prop="modeName">
            <el-input v-model="queryParams.modeName" placeholder="请输入模块名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          <el-form-item label="统计周期" prop="periodDate">
            <el-input v-model="queryParams.periodDate" placeholder="请输入统计周期" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="周期" prop="periodName">
            <el-input v-model="queryParams.periodName" placeholder="请输入周期" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="周期年" prop="periodYear">
            <el-input v-model="queryParams.periodYear" placeholder="请输入周期年" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="周期月" prop="periodMonth">
            <el-input v-model="queryParams.periodMonth" placeholder="请输入周期月" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标1名称" prop="indexOneName">
            <el-input v-model="queryParams.indexOneName" placeholder="请输入指标1名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标1值" prop="indexOneValue">
            <el-input v-model="queryParams.indexOneValue" placeholder="请输入指标1值" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标2名称" prop="indexTwoName">
            <el-input v-model="queryParams.indexTwoName" placeholder="请输入指标2名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标2值" prop="indexTwoValue">
            <el-input v-model="queryParams.indexTwoValue" placeholder="请输入指标2值" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标3名称" prop="indexThreeName">
            <el-input v-model="queryParams.indexThreeName" placeholder="请输入指标3名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标3值" prop="indexThreeValue">
            <el-input v-model="queryParams.indexThreeValue" placeholder="请输入指标3值" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标4名称" prop="indexFourName">
            <el-input v-model="queryParams.indexFourName" placeholder="请输入指标4名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="指标4值" prop="indexFourValue">
            <el-input v-model="queryParams.indexFourValue" placeholder="请输入指标4值" clearable style="width: 240px" @keyup.enter="handleQuery" />
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px" @keyup.enter="handleQuery" >
              <el-option key="1" label="已启用" value="1" />
              <el-option key="2" label="已禁用" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -68,20 +41,24 @@

      <el-table v-loading="loading" :data="pcrDataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="" align="center" prop="id" v-if="true" />
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="模块名称" align="center" prop="modeName" />
        <el-table-column label="周期" align="center" prop="periodName" />
        <el-table-column label="周期年" align="center" prop="periodYear" />
        <el-table-column label="周期月" align="center" prop="periodMonth" />
        <el-table-column label="指标1名称" align="center" prop="indexOneName" />
        <el-table-column label="指标1值" align="center" prop="indexOneValue" />
        <el-table-column label="指标2名称" align="center" prop="indexTwoName" />
        <el-table-column label="指标2值" align="center" prop="indexTwoValue" />
        <el-table-column label="指标3名称" align="center" prop="indexThreeName" />
        <el-table-column label="指标3值" align="center" prop="indexThreeValue" />
        <el-table-column label="指标4名称" align="center" prop="indexFourName" />
        <el-table-column label="指标4值" align="center" prop="indexFourValue" />
        <el-table-column label="状态  1启用   0未启用" align="center" prop="status" />
        <el-table-column label="统计周期" align="center" prop="periodDate" />
        <el-table-column label="指标名称" align="center" prop="indexOneName" />
        <el-table-column label="指标数值" align="center" prop="indexOneValue" />
        <el-table-column label="指标名称" align="center" prop="indexTwoName" />
        <el-table-column label="指标数值" align="center" prop="indexTwoValue" />
        <el-table-column label="指标名称" align="center" prop="indexThreeName" />
        <el-table-column label="指标数值" align="center" prop="indexThreeValue" />
        <el-table-column label="指标名称" align="center" prop="indexFourName" />
        <el-table-column label="指标数值" align="center" prop="indexFourValue" />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <span v-show="scope.row['status'] == 1">已启用</span>
            <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
@@ -105,41 +82,38 @@
    <!-- 添加或修改人车路基础信息对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="pcrDataFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="模块名称" prop="modeName">
          <el-input v-model="form.modeName" placeholder="请输入模块名称" />
        <el-form-item label="指标类型" prop="modeName">
          <el-select v-model="form.modeName" placeholder="请选择" @change="handleModeNameChange">
            <el-option key="1" label="道路里程数量" value="道路里程数量" />
            <el-option key="2" label="机动车保有量" value="机动车保有量" />
            <el-option key="3" label="驾驶人保有量" value="驾驶人保有量" />
          </el-select>
        </el-form-item>
        <el-form-item label="周期" prop="periodName">
          <el-input v-model="form.periodName" placeholder="请输入周期" />
        <el-form-item label="周期" prop="period">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;" @change="clearPeriod">
            <el-option key="1" label="年度" :value="1" />
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="周期年" prop="periodYear">
          <el-input v-model="form.periodYear" placeholder="请输入周期年" />
        </el-form-item>
        <el-form-item label="周期月" prop="periodMonth">
          <el-input v-model="form.periodMonth" placeholder="请输入周期月" />
        </el-form-item>
        <el-form-item label="指标1名称" prop="indexOneName">
          <el-input v-model="form.indexOneName" placeholder="请输入指标1名称" />
        </el-form-item>
        <el-form-item label="指标1值" prop="indexOneValue">
        <el-form-item :label="form.indexOneName" prop="indexOneValue">
          <el-input v-model="form.indexOneValue" placeholder="请输入指标1值" />
        </el-form-item>
        <el-form-item label="指标2名称" prop="indexTwoName">
          <el-input v-model="form.indexTwoName" placeholder="请输入指标2名称" />
        </el-form-item>
        <el-form-item label="指标2值" prop="indexTwoValue">
        <el-form-item :label="form.indexTwoName" prop="indexTwoValue">
          <el-input v-model="form.indexTwoValue" placeholder="请输入指标2值" />
        </el-form-item>
        <el-form-item label="指标3名称" prop="indexThreeName">
          <el-input v-model="form.indexThreeName" placeholder="请输入指标3名称" />
        </el-form-item>
        <el-form-item label="指标3值" prop="indexThreeValue">
        <el-form-item :label="form.indexThreeName" prop="indexThreeValue">
          <el-input v-model="form.indexThreeValue" placeholder="请输入指标3值" />
        </el-form-item>
        <el-form-item label="指标4名称" prop="indexFourName">
          <el-input v-model="form.indexFourName" placeholder="请输入指标4名称" />
        </el-form-item>
        <el-form-item label="指标4值" prop="indexFourValue">
        <el-form-item :label="form.indexFourName" prop="indexFourValue">
          <el-input v-model="form.indexFourValue" placeholder="请输入指标4值" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="已启用" :value="1" />
            <el-option key="2" label="已禁用" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -177,19 +151,18 @@

const initFormData: PcrDataForm = {
  id: undefined,
  modeName: undefined,
  periodName: undefined,
  periodYear: undefined,
  periodMonth: undefined,
  indexOneName: undefined,
  modeName: "道路里程数量",
  period: 2,
  periodDate: undefined,
  indexOneName: "高速路",
  indexOneValue: undefined,
  indexTwoName: undefined,
  indexTwoName: "国省道",
  indexTwoValue: undefined,
  indexThreeName: undefined,
  indexThreeName: "县乡道",
  indexThreeValue: undefined,
  indexFourName: undefined,
  indexFourName: "农村道路",
  indexFourValue: undefined,
  status: undefined,
  status: 1,
}
const data = reactive<PageData<PcrDataForm, PcrDataQuery>>({
  form: {...initFormData},
@@ -197,9 +170,8 @@
    pageNum: 1,
    pageSize: 10,
    modeName: undefined,
    periodName: undefined,
    periodYear: undefined,
    periodMonth: undefined,
    period: undefined,
    periodDate: undefined,
    indexOneName: undefined,
    indexOneValue: undefined,
    indexTwoName: undefined,
@@ -219,14 +191,11 @@
    modeName: [
      { required: true, message: "模块名称不能为空", trigger: "blur" }
    ],
    periodName: [
    period: [
      { required: true, message: "周期不能为空", trigger: "blur" }
    ],
    periodYear: [
    periodDate: [
      { required: true, message: "周期年不能为空", trigger: "blur" }
    ],
    periodMonth: [
      { required: true, message: "周期月不能为空", trigger: "blur" }
    ],
    indexOneName: [
      { required: true, message: "指标1名称不能为空", trigger: "blur" }
@@ -353,4 +322,39 @@
onMounted(() => {
  getList();
});

/** 周期年或月 */
const pickerType = computed(() => {
  return form.value.period === 1 ? 'year' : 'month';
});

const pickerFormat = computed(() => {
  return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
});

/** 切换不同指标 */
const handleModeNameChange = () => {
  if (form.value.modeName === "道路里程数量") {
    form.value.indexOneName = '高速路';
    form.value.indexTwoName = '国省道';
    form.value.indexThreeName = '县乡道';
    form.value.indexFourName = '农村道路';
  } else if (form.value.modeName === "机动车保有量") {
    form.value.indexOneName = '货运车辆';
    form.value.indexTwoName = '公交客运';
    form.value.indexThreeName = '小型汽车';
    form.value.indexFourName = '摩托车';
  } else if (form.value.modeName === "驾驶人保有量") {
    form.value.indexOneName = '货运车辆驾驶人';
    form.value.indexTwoName = '公交客运驾驶人';
    form.value.indexThreeName = '小型汽车驾驶人';
    form.value.indexFourName = '摩托车驾驶人';
  }
};

/** 清空周期 */
const clearPeriod = () => {
  form.value.periodDate = undefined;
};

</script>

 src/views/scenery/sceneryOperationData/index.vue

@@ -3,35 +3,17 @@
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="周期年" prop="periodYear">
            <el-input v-model="queryParams.periodYear" placeholder="请输入周期年" clearable style="width: 240px" @keyup.enter="handleQuery" />
          <el-form-item label="景区名称" prop="sceneryInfoName">
            <el-input v-model="queryParams.sceneryInfoName" placeholder="请输入景区名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="周期月" prop="periodMonth">
            <el-input v-model="queryParams.periodMonth" placeholder="请输入周期月" clearable style="width: 240px" @keyup.enter="handleQuery" />
          <el-form-item label="周期" prop="periodDate">
            <el-input v-model="queryParams.periodDate" placeholder="请输入周期" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="车流量" prop="carFlowNum">
            <el-input v-model="queryParams.carFlowNum" placeholder="请输入车流量" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="人流量" prop="personFlowNum">
            <el-input v-model="queryParams.personFlowNum" placeholder="请输入人流量" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="游客预约" prop="visitorSubNum">
            <el-input v-model="queryParams.visitorSubNum" placeholder="请输入游客预约" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="入园人数" prop="enterGardenNum">
            <el-input v-model="queryParams.enterGardenNum" placeholder="请输入入园人数" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="在岗警力" prop="onPolice">
            <el-input v-model="queryParams.onPolice" placeholder="请输入在岗警力" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="在岗警车" prop="onPaddyWagon">
            <el-input v-model="queryParams.onPaddyWagon" placeholder="请输入在岗警车" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="备勤警力" prop="standbyPolice">
            <el-input v-model="queryParams.standbyPolice" placeholder="请输入备勤警力" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="景区id" prop="scId">
            <el-input v-model="queryParams.scId" placeholder="请输入景区id" clearable style="width: 240px" @keyup.enter="handleQuery" />
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px" @keyup.enter="handleQuery" >
              <el-option key="1" label="已启用" value="1" />
              <el-option key="2" label="已禁用" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -45,16 +27,16 @@
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['rs:sceneryOperationData:add']">新增</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['demo:sceneryOperationData:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rs:sceneryOperationData:edit']">修改</el-button>
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:sceneryOperationData:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rs:sceneryOperationData:remove']">删除</el-button>
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:sceneryOperationData:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rs:sceneryOperationData:export']">导出</el-button>
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:sceneryOperationData:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
@@ -62,9 +44,9 @@

      <el-table v-loading="loading" :data="sceneryOperationDataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" v-if="true" />
        <el-table-column label="周期年" align="center" prop="periodYear" />
        <el-table-column label="周期月" align="center" prop="periodMonth" />
        <el-table-column label="序号" align="center" type="index" v-if="true" width="60" />
        <el-table-column label="景区名称" align="center" prop="sceneryInfoName" />
        <el-table-column label="统计周期" align="center" prop="periodDate" />
        <el-table-column label="车流量" align="center" prop="carFlowNum" />
        <el-table-column label="人流量" align="center" prop="personFlowNum" />
        <el-table-column label="游客预约" align="center" prop="visitorSubNum" />
@@ -72,15 +54,20 @@
        <el-table-column label="在岗警力" align="center" prop="onPolice" />
        <el-table-column label="在岗警车" align="center" prop="onPaddyWagon" />
        <el-table-column label="备勤警力" align="center" prop="standbyPolice" />
        <el-table-column label="状态 1启用 0未启用" align="center" prop="status" />
        <el-table-column label="景区id" align="center" prop="scId" />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <span v-show="scope.row['status'] == 1">已启用</span>
            <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['rs:sceneryOperationData:edit']"></el-button>
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:sceneryOperationData:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['rs:sceneryOperationData:remove']"></el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:sceneryOperationData:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
@@ -97,11 +84,18 @@
    <!-- 添加或修改景区运行数据对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="sceneryOperationDataFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="周期年" prop="periodYear">
          <el-input v-model="form.periodYear" placeholder="请输入周期年" />
        <el-form-item label="景区名称" prop="sceneryInfoName">
          <el-select v-model="form.sceneryInfoName" placeholder="请选择" clearable style="width: 240px" @change="setSceneryInfoId" >
            <el-option v-for="item in sceneryInfoNames" :key="item.sceneryName" :label="item.sceneryName" :value="item.sceneryName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="周期月" prop="periodMonth">
          <el-input v-model="form.periodMonth" placeholder="请输入周期月" />
        <el-form-item label="统计周期" prop="periodDate">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;" @change="clearPeriod">
            <el-option key="1" label="年度" :value="1" />
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="车流量" prop="carFlowNum">
          <el-input v-model="form.carFlowNum" placeholder="请输入车流量" />
@@ -124,8 +118,11 @@
        <el-form-item label="备勤警力" prop="standbyPolice">
          <el-input v-model="form.standbyPolice" placeholder="请输入备勤警力" />
        </el-form-item>
        <el-form-item label="景区id" prop="scId">
          <el-input v-model="form.scId" placeholder="请输入景区id" />
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="已启用" :value="1" />
            <el-option key="2" label="已禁用" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -139,8 +136,9 @@
</template>

<script setup name="SceneryOperationData" lang="ts">
import { listSceneryOperationData, getSceneryOperationData, delSceneryOperationData, addSceneryOperationData, updateSceneryOperationData } from '@/api/scenery/sceneryOperationData';
import { getSceneryInfoNames, listSceneryOperationData, getSceneryOperationData, delSceneryOperationData, addSceneryOperationData, updateSceneryOperationData } from '@/api/scenery/sceneryOperationData';
import { SceneryOperationDataVO, SceneryOperationDataQuery, SceneryOperationDataForm } from '@/api/scenery/sceneryOperationData/types';
import { SceneryInfoVO } from '@/api/sceneryInfo/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

@@ -163,8 +161,10 @@

const initFormData: SceneryOperationDataForm = {
  id: undefined,
  periodYear: undefined,
  periodMonth: undefined,
  sceneryInfoId: undefined,
  sceneryInfoName: undefined,
  period: undefined,
  periodDate: undefined,
  carFlowNum: undefined,
  personFlowNum: undefined,
  visitorSubNum: undefined,
@@ -173,24 +173,15 @@
  onPaddyWagon: undefined,
  standbyPolice: undefined,
  status: undefined,
  scId: undefined
}
const data = reactive<PageData<SceneryOperationDataForm, SceneryOperationDataQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    periodYear: undefined,
    periodMonth: undefined,
    carFlowNum: undefined,
    personFlowNum: undefined,
    visitorSubNum: undefined,
    enterGardenNum: undefined,
    onPolice: undefined,
    onPaddyWagon: undefined,
    standbyPolice: undefined,
    sceneryInfoName: undefined,
    periodDate: undefined,
    status: undefined,
    scId: undefined,
    params: {
    }
  },
@@ -198,11 +189,17 @@
    id: [
      { required: true, message: "id不能为空", trigger: "blur" }
    ],
    periodYear: [
      { required: true, message: "周期年不能为空", trigger: "blur" }
    sceneryInfoId: [
      { required: true, message: "景区id不能为空", trigger: "blur" }
    ],
    periodMonth: [
      { required: true, message: "周期月不能为空", trigger: "blur" }
    sceneryInfoName: [
      { required: true, message: "景区名称不能为空", trigger: "blur" }
    ],
    period: [
      { required: true, message: "年度/月度 1年度 2月度不能为空", trigger: "blur" }
    ],
    periodDate: [
      { required: true, message: "周期不能为空", trigger: "blur" }
    ],
    carFlowNum: [
      { required: true, message: "车流量不能为空", trigger: "blur" }
@@ -228,9 +225,6 @@
    status: [
      { required: true, message: "状态 1启用 0未启用不能为空", trigger: "change" }
    ],
    scId: [
      { required: true, message: "景区id不能为空", trigger: "blur" }
    ]
  }
});

@@ -276,9 +270,19 @@
  multiple.value = !selection.length;
}

// 调用后端API获取景区名称列表
const sceneryInfoNames = ref<SceneryInfoVO[]>([]);

/** 查询景区运行数据列表 */
const getSceneryInfoName = async () => {
  const res = await getSceneryInfoNames();
  sceneryInfoNames.value = res.rows;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  getSceneryInfoName();
  dialog.visible = true;
  dialog.title = "添加景区运行数据";
}
@@ -312,6 +316,7 @@

/** 删除按钮操作 */
const handleDelete = async (row?: SceneryOperationDataVO) => {
  if(row?.status == 1) { proxy?.$modal.msgWarning("当前为已启用状态，不支持删除"); return; }
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除景区运行数据编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delSceneryOperationData(_ids);
@@ -321,7 +326,7 @@

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('sc/sceneryOperationData/export', {
  proxy?.download('demo/sceneryOperationData/export', {
    ...queryParams.value
  }, `sceneryOperationData_${new Date().getTime()}.xlsx`)
}
@@ -329,4 +334,28 @@
onMounted(() => {
  getList();
});


/** 周期年或月 */
const pickerType = computed(() => {
  return form.value.period === 1 ? 'year' : 'month';
});

const pickerFormat = computed(() => {
  return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
});

/** 清空周期 */
const clearPeriod = () => {
  form.value.periodDate = undefined;
};

/** 设置景区ID */
const setSceneryInfoId = (sceneryInfoName: any) => {
  const item = sceneryInfoNames.value.find(item => item.sceneryName === sceneryInfoName);
  if(item) {
    form.value.sceneryInfoId = item.id;
  }
}

</script>

 src/views/sceneryInfo/index.vue

New file
@@ -0,0 +1,219 @@
<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['demo:sceneryInfo:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:sceneryInfo:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:sceneryInfo:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:sceneryInfo:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="sceneryInfoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" v-if="true" width="60" />
        <el-table-column label="景区名称" align="center" prop="sceneryName" />
        <el-table-column label="排序" align="center" prop="sequence" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:sceneryInfo:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:sceneryInfo:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>
    <!-- 添加或修改景区配置信息对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="sceneryInfoFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="景区名称" prop="sceneryName">
          <el-input v-model="form.sceneryName" placeholder="请输入景区名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sequence">
          <el-input v-model="form.sequence" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SceneryInfo" lang="ts">
import { listSceneryInfo, getSceneryInfo, delSceneryInfo, addSceneryInfo, updateSceneryInfo } from '@/api/sceneryInfo';
import { SceneryInfoVO, SceneryInfoQuery, SceneryInfoForm } from '@/api/sceneryInfo/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const sceneryInfoList = ref<SceneryInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const sceneryInfoFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: SceneryInfoForm = {
  id: undefined,
  sceneryName: undefined,
  sequence: undefined,
  status: undefined
}
const data = reactive<PageData<SceneryInfoForm, SceneryInfoQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sceneryName: undefined,
    sequence: undefined,
    createTime: undefined,
    status: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "编号不能为空", trigger: "blur" }
    ],
    sceneryName: [
      { required: true, message: "景区名称不能为空", trigger: "blur" }
    ],
    sequence: [
      { required: true, message: "排序不能为空", trigger: "blur" }
    ],
    status: [
      { required: true, message: "启用状态 1启用 2未启用不能为空", trigger: "change" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询景区配置信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listSceneryInfo(queryParams.value);
  sceneryInfoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  sceneryInfoFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: SceneryInfoVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加景区配置信息";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: SceneryInfoVO) => {
  reset();
  const _id = row?.id || ids.value[0]
  const res = await getSceneryInfo(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改景区配置信息";
}

/** 提交按钮 */
const submitForm = () => {
  sceneryInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateSceneryInfo(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addSceneryInfo(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: SceneryInfoVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除景区配置信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delSceneryInfo(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('demo/sceneryInfo/export', {
    ...queryParams.value
  }, `sceneryInfo_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>

 src/views/ti/trafficIndex/index.vue

@@ -9,7 +9,7 @@
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="统计周期" prop="periodDate">
            <el-input v-model="queryParams.periodValue" placeholder="请输入统计周期" clearable style="width: 240px" @keyup.enter="handleQuery" />
            <el-input v-model="queryParams.periodDate" placeholder="请输入统计周期" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px" @keyup.enter="handleQuery" >
@@ -97,62 +97,87 @@
        <el-form-item label="模块名称" prop="modeName">
          <el-input v-model="form.modeName" placeholder="请输入模块名称" />
        </el-form-item>
        <el-form-item label="指标1名称" prop="targetOneName">
        <el-form-item label="统计周期" prop="periodDate" @change="clearPeriod">
          <el-select v-model="form.period" placeholder="请选择" style="width: 100px;">
            <el-option key="1" label="年度" :value="1" />
            <el-option key="2" label="月度" :value="2" />
          </el-select>
          &emsp;
          <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="请选择统计周期" />
        </el-form-item>
        <el-form-item label="指标1" prop="targetOneName">
          <el-input v-model="form.targetOneName" placeholder="请输入指标1名称" />
        </el-form-item>
        <el-form-item label="指标1值" prop="targetOneValue">
        <el-form-item label="数值" prop="targetOneValue">
          <el-input v-model="form.targetOneValue" placeholder="请输入指标1值" />
        </el-form-item>
        <el-form-item label="指标1单位" prop="targetOneUnit">
        <el-form-item label="单位" prop="targetOneUnit">
          <el-input v-model="form.targetOneUnit" placeholder="请输入指标1单位" />
        </el-form-item>
        <el-form-item label="指标1上浮或下降值" prop="targetOneCompareValue">
          <el-input v-model="form.targetOneCompareValue" placeholder="请输入指标1上浮或下降值" />
        <el-form-item label="涨幅" prop="targetOneCompareValue">
          <el-select v-model="form.targetOneStatus" placeholder="请选择" style="width: 100px;">
            <el-option key="1" label="上升" :value="1" />
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetOneCompareValue" placeholder="请输入指标1上浮或下降值" style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="指标2名称" prop="targetTwoName">
        <el-form-item label="指标2" prop="targetTwoName">
          <el-input v-model="form.targetTwoName" placeholder="请输入指标2名称" />
        </el-form-item>
        <el-form-item label="指标2值" prop="targetTwoValue">
        <el-form-item label="数值" prop="targetTwoValue">
          <el-input v-model="form.targetTwoValue" placeholder="请输入指标2值" />
        </el-form-item>
        <el-form-item label="指标2单位" prop="targetTwoUnit">
        <el-form-item label="单位" prop="targetTwoUnit">
          <el-input v-model="form.targetTwoUnit" placeholder="请输入指标2单位" />
        </el-form-item>
        <el-form-item label="指标2上浮或下降值" prop="targetTwoCompareValue">
          <el-input v-model="form.targetTwoCompareValue" placeholder="请输入指标2上浮或下降值" />
        <el-form-item label="涨幅" prop="targetTwoCompareValue">
          <el-select v-model="form.targetTwoStatus" placeholder="请选择" style="width: 100px;">
            <el-option key="1" label="上升" :value="1" />
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetTwoCompareValue" placeholder="请输入指标2上浮或下降值" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="指标3名称" prop="targetThreeName">
        <el-form-item label="指标3" prop="targetThreeName">
          <el-input v-model="form.targetThreeName" placeholder="请输入指标3名称" />
        </el-form-item>
        <el-form-item label="指标3值" prop="targetThreeValue">
        <el-form-item label="数值" prop="targetThreeValue">
          <el-input v-model="form.targetThreeValue" placeholder="请输入指标3值" />
        </el-form-item>
        <el-form-item label="指标3单位" prop="targetThreeUnit">
        <el-form-item label="单位" prop="targetThreeUnit">
          <el-input v-model="form.targetThreeUnit" placeholder="请输入指标3单位" />
        </el-form-item>
        <el-form-item label="指标3上浮或下降值" prop="targetThreeCompareValue">
          <el-input v-model="form.targetThreeCompareValue" placeholder="请输入指标3上浮或下降值" />
        <el-form-item label="涨幅" prop="targetThreeCompareValue">
          <el-select v-model="form.targetThreeStatus" placeholder="请选择" style="width: 100px;">
            <el-option key="1" label="上升" :value="1" />
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetThreeCompareValue" placeholder="请输入指标3上浮或下降值" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="指标4名称" prop="targetFourName">
        <el-form-item label="指标4" prop="targetFourName">
          <el-input v-model="form.targetFourName" placeholder="请输入指标4名称" />
        </el-form-item>
        <el-form-item label="指标4值" prop="targetFourValue">
        <el-form-item label="数值" prop="targetFourValue">
          <el-input v-model="form.targetFourValue" placeholder="请输入指标4值" />
        </el-form-item>
        <el-form-item label="指标4单位" prop="targetFourUnit">
        <el-form-item label="单位" prop="targetFourUnit">
          <el-input v-model="form.targetFourUnit" placeholder="请输入指标4单位" />
        </el-form-item>
        <el-form-item label="指标4上浮或下降值" prop="targetFourCompareValue">
          <el-input v-model="form.targetFourCompareValue" placeholder="请输入指标4上浮或下降值" />
        <el-form-item label="涨幅" prop="targetFourCompareValue">
          <el-select v-model="form.targetFourStatus" placeholder="请选择" style="width: 100px;">
            <el-option key="1" label="上升" :value="1" />
            <el-option key="2" label="下降" :value="2" />
          </el-select>
          &emsp;
          <el-input v-model="form.targetFourCompareValue" placeholder="请输入指标4上浮或下降值" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="周期 1 月  2年" prop="periodName">
          <el-input v-model="form.periodName" placeholder="请输入周期 1 月  2年" />
        </el-form-item>
        <el-form-item label="周期值" prop="periodValue">
          <el-input v-model="form.periodValue" placeholder="请输入周期值" />
        </el-form-item>
        <el-form-item label="0未删除   1已删除" prop="del">
          <el-input v-model="form.del" placeholder="请输入0未删除   1已删除" />
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="已启用" :value="1" />
            <el-option key="2" label="已禁用" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -196,29 +221,29 @@
const initFormData: TrafficIndexForm = {
  id: undefined,
  modeName: undefined,
  periodDate: undefined,
  period: 2,
  targetOneName: undefined,
  targetOneValue: undefined,
  targetOneUnit: undefined,
  targetOneStatus: undefined,
  targetOneStatus: 1,
  targetOneCompareValue: undefined,
  targetTwoName: undefined,
  targetTwoValue: undefined,
  targetTwoUnit: undefined,
  targetTwoStatus: undefined,
  targetTwoStatus: 1,
  targetTwoCompareValue: undefined,
  targetThreeName: undefined,
  targetThreeValue: undefined,
  targetThreeUnit: undefined,
  targetThreeStatus: undefined,
  targetThreeStatus: 1,
  targetThreeCompareValue: undefined,
  targetFourName: undefined,
  targetFourValue: undefined,
  targetFourUnit: undefined,
  targetFourStatus: undefined,
  targetFourStatus: 1,
  targetFourCompareValue: undefined,
  status: undefined,
  periodName: undefined,
  periodValue: undefined,
  status: 1,
  del: undefined
}
const data = reactive<PageData<TrafficIndexForm, TrafficIndexQuery>>({
@@ -248,8 +273,8 @@
    targetFourStatus: undefined,
    targetFourCompareValue: undefined,
    status: undefined,
    periodName: undefined,
    periodValue: undefined,
    period: undefined,
    periodDate: undefined,
    del: undefined,
    params: {
    }
@@ -324,10 +349,10 @@
    status: [
      { required: true, message: "启用状态 1启用 2未启用不能为空", trigger: "change" }
    ],
    periodName: [
    period: [
      { required: true, message: "周期 1 月  2年不能为空", trigger: "blur" }
    ],
    periodValue: [
    periodDate: [
      { required: true, message: "周期值不能为空", trigger: "blur" }
    ],
    del: [
@@ -416,6 +441,7 @@

/** 删除按钮操作 */
const handleDelete = async (row?: TrafficIndexVO) => {
  if(row?.status == 1) { proxy?.$modal.msgWarning("当前为已启用状态，不支持删除"); return; }
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除交通指数编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delTrafficIndex(_ids);
@@ -430,21 +456,21 @@
  }, `trafficIndex_${new Date().getTime()}.xlsx`)
}

/** 周期年或月 */
const pickerType = computed(() => {
  return form.value.period === 1 ? 'year' : 'month';
});

const pickerFormat = computed(() => {
  return form.value.period === 1 ? 'YYYY' : 'YYYY-MM';
});

onMounted(() => {
  getList();
});
function handleRemove(file:string) {
        console.log(file);
      };
type files = {    //自定义类型
    url: string;
  };
function  handlePictureCardPreview(file:files) {
        dialogImageUrl.value = file.url;
        dialogVisible.value = true;
      };
function handleDownload(file:string) {
        console.log(file);
      };
      

/** 清空周期 */
const clearPeriod = () => {
  form.value.periodDate = undefined;
};      
</script>