景区运行数据基础功能

龚焕茏

2024-03-05 1c391db321fae77ddcd297e14fbe1429960ead49

 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>