1. 新增自动评估记录的获取和展示； 2. 新增评估记录排序功能； 3. 新增评估任务界面；

riku

2023-12-15 24b00a82a34eb11c6ec1bc1ce018a6e969e791d0

 src/views/baseinfo/fysp/scene/SceneInfo.vue

@@ -1,115 +1,67 @@
<template>
  <el-row ref="searchRef">
    <el-form :inline="true" :model="formSearch">
      <el-form-item label="省/市/区/镇" prop="_locations">
        <el-cascader
          v-model="formSearch._locations"
          :options="locations"
          placeholder="省/市/区/镇"
          :props="props"
          style="width: 280px"
        />
      </el-form-item>
      <el-form-item label="场景类型" prop="scensetypeid">
        <el-select
          v-model="formSearch.scensetypeid"
          placeholder="场景类型"
          style="width: 150px"
        >
          <el-option
            v-for="s in sceneTypes"
            :key="s.value"
            :label="s.label"
            :value="s.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上线状态" prop="online">
        <el-select
          v-model="formSearch.online"
          placeholder="上线状态"
          style="width: 75px"
        >
          <el-option
            v-for="s in onlineStatus"
            :key="s.value"
            :label="s.label"
            :value="s.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="onSearch"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>
  <FYTable @search="onSearch">
    <template #options>
      <FYOptionLocation
        :allOption="true"
        :level="4"
        v-model:value="formSearch._locations"
      ></FYOptionLocation>
      <FYOptionScene
        :allOption="true"
        :type="2"
        v-model:value="formSearch.scensetype"
      ></FYOptionScene>
      <FYOptionOnlineStatus
        :allOption="true"
        v-model:value="formSearch.online"
      ></FYOptionOnlineStatus>
    </template>

  <el-table
    :data="tableData"
    v-loading="loading"
    table-layout="fixed"
    :row-class-name="tableRowClassName"
    :height="tableHeight"
  >
    <el-table-column prop="name" label="名称" width="400">
      <template #default="scope">
        <el-tooltip
          effect="dark"
          :content="scope.row.name"
          placement="top-start"
          :show-after="500"
        >
          {{ scope.row.name }}
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="类型" width="130" />
    <el-table-column prop="provincename" label="省" width="90" />
    <el-table-column prop="cityname" label="市" width="90" />
    <el-table-column prop="districtname" label="区县" width="90" />
    <el-table-column prop="townname" label="街道" width="110" />
    <el-table-column prop="location" label="地址" min-width="400" />
    <el-table-column prop="longitude" label="经度" width="110" />
    <el-table-column prop="latitude" label="纬度" width="110" />
    <el-table-column fixed="right" label="操作" width="160">
      <template #default="scope">
        <el-button
          :loading="scope.row.loading1"
          type="default"
          size="small"
          @click="itemEdit(scope)"
          >编辑</el-button
        >
        <el-button
          :loading="scope.row.loading2"
          :type="scope.row.extension1 != '0' ? 'danger' : 'primary'"
          size="small"
          @click="itemActive(scope)"
          >{{ scope.row.extension1 != '0' ? '下线' : '上线' }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    ref="paginationRef"
    class="el-pagination"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
    <template #table-column>
      <el-table-column fixed="left" prop="name" label="名称" width="400">
        <template #default="scope">
          <el-tooltip
            effect="dark"
            :content="scope.row.name"
            placement="top-start"
            :show-after="500"
          >
            {{ scope.row.name }}
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="130" />
      <el-table-column prop="provincename" label="省" width="90" />
      <el-table-column prop="cityname" label="市" width="90" />
      <el-table-column prop="districtname" label="区县" width="90" />
      <el-table-column prop="townname" label="街道" width="110" />
      <el-table-column prop="location" label="地址" min-width="400" />
      <el-table-column prop="longitude" label="经度" width="110" />
      <el-table-column prop="latitude" label="纬度" width="110" />
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-button
            :loading="scope.row.loading1"
            type="default"
            size="small"
            @click="itemEdit(scope)"
            >编辑</el-button
          >
          <el-button
            :loading="scope.row.loading2"
            :type="scope.row.extension1 != '0' ? 'danger' : 'primary'"
            size="small"
            @click="itemActive(scope)"
            >{{ scope.row.extension1 != '0' ? '下线' : '上线' }}</el-button
          >
        </template>
      </el-table-column>
    </template>
  </FYTable>
</template>

<script>
import { enumScene_2 } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import { enumOnlineStatus } from '@/enum/onlineStatus';
import sceneApi from '@/api/sceneApi';
import sceneApi from '@/api/fysp/sceneApi';
import { useLoadingStore } from '@/stores/loadingStore';
import { mapStores } from 'pinia';
import { useMessageBoxTip } from '@/composables/messageBox';
@@ -117,93 +69,45 @@
export default {
  data() {
    return {
      locations: enumLocation(),
      sceneTypes: enumScene_2(),
      onlineStatus: enumOnlineStatus(),
      formSearch: {
        _locations: [],
        provincecode: '',
        citycode: '',
        districtcode: '',
        towncode: '',
        scensetypeid: '',
        online: '',
        _locations: {},
        scensetype: {},
        online: {},
      },
      props: {
        checkStrictly: true,
      },

      tableData: [],
      tableHeight: '500',
      loading: false,

      currentPage: 1,
      pageSize: 20,
      total: 0,
    };
  },
  watch: {
    currentPage(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
      }
    },
    pageSize(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
      }
    },
  },
  computed: {
    ...mapStores(useLoadingStore),
  },
  methods: {
    onSearch() {
      this.loading = true;
    onSearch(page, func) {
      const f = this.formSearch;
      const area = {};
      // 行政区划
      f._locations.length > 0
        ? (area.provincecode = f._locations[0][0])
        : (area.provincecode = null);
      if (area.provincecode == '0') area.provincecode = null;
      f._locations.length > 1
        ? (area.citycode = f._locations[1][0])
        : (area.citycode = null);
      f._locations.length > 2
        ? (area.districtcode = f._locations[2][0])
        : (area.districtcode = null);
      f._locations.length > 3
        ? (area.towncode = f._locations[3][0])
        : (area.towncode = null);
      area.provincecode = f._locations.pCode
      area.citycode = f._locations.cCode
      area.districtcode = f._locations.dCode
      area.towncode = f._locations.tCode
      // 场景类型
      area.scensetypeid = f.scensetypeid;
      area.scensetypeid = f.scensetype.value;
      if (area.scensetypeid == '0') area.scensetypeid = null;
      // 上下线状态
      area.online = f.online;
      area.online = f.online.value;

      sceneApi
        .searchScene(area, this.currentPage, this.pageSize)
      return sceneApi
        .searchScene(area, page.currentPage, page.pageSize)
        .then((res) => {
          if (res.success) {
            this.tableData = res.data;
            this.currentPage = res.head.page;
            this.total = res.head.totalCount;
            func({
              data: res.data,
              total: res.head.totalCount,
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    calcTableHeight() {
      const h1 = this.$refs.searchRef.$el.offsetHeight;
      const h2 = this.$refs.paginationRef.$el.offsetHeight;
      // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
      return `calc(100vh - ${h1}px - ${h2}px - 60px - var(--el-main-padding) * 2)`;
    },
    itemEdit(scope) {
      scope.row.loading1 = true;
      this.loadingStore.loadingStatus.push(() => (scope.row.loading1 = false));
      this.loadingStore.pushLoading(() => (scope.row.loading1 = false));
      this.$router.push(`sceneEdit/${scope.row.guid}`);
    },
    itemActive(scope) {
@@ -216,7 +120,7 @@
        confirmTitle: msg,
        onConfirm: () => {
          scope.row.loading2 = true;
          sceneApi
          return sceneApi
            .updateScene(rb)
            .then((res) => {
              if (res == 1) {
@@ -229,38 +133,8 @@
        },
      });
    },
    tableRowClassName({ row }) {
      return row.extension1 != '0' ? 'online-row' : 'offline-row';
    },
  },
  mounted() {
    this.formSearch.scensetypeid = this.sceneTypes[0].value;
    this.formSearch._locations = [this.locations[0].value];
    this.formSearch.online = this.onlineStatus[0].value;
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  },
};
</script>

<style>
.el-table .online-row {
  /* background-color: rgb(4, 202, 21); */
}

.el-table .offline-row {
  background-color: var(--el-disabled-bg-color);
  color: var(--el-disabled-text-color);
}

.el-table .cell {
  white-space: nowrap;
}

.el-pagination {
  background-color: var(--el-color-white);
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.096);
  /* margin-top: 2px; */
}
</style>
<style></style>