景区运行数据基础功能

龚焕茏

2024-03-05 1c391db321fae77ddcd297e14fbe1429960ead49

 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>