4pc/src/view/scene.vue

<template>
  <div class="relics-layout">
    <div class="relics-header">
      <div class="search">
        <el-form label-width="100px" inline>
          <el-form-item label="场景标题：">
            <el-input
              clearable
              v-model="pageProps.sceneName"
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="场景码：">
            <el-input
              clearable
              v-model="pageProps.sceneCode"
              style="width: 250px"
              placeholder="请输入"
            />
          </el-form-item>
          <template v-if="!simple">
            <el-form-item label="SN码：">
              <el-input
                clearable
                v-model="pageProps.snCode"
                style="width: 250px"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="设备类型：">
              <el-select style="width: 250px" v-model="pageProps.cameraType" clearable>
                <el-option
                  :value="Number(key)"
                  :label="type"
                  v-for="(type, key) in DeviceTypeDesc"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="拍摄时间：">
              <el-date-picker
                clearable
                type="daterange"
                v-model="pageProps.shootTime"
                start-placeholder="请选择"
                end-placeholder="请选择"
                range-separator="-"
                placeholder="请选择"
                style="width: 250px"
              />
            </el-form-item>
            <el-form-item label="绑定账号：">
              <el-input
                clearable
                v-model="pageProps.userName"
                style="width: 250px"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item v-if="!simple">
              <el-button type="primary" @click="refresh">查询</el-button>
              <el-button type="primary" plain @click="pageProps = { ...initProps }">
                重置
              </el-button>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>

    <div class="relics-content">
      <el-table
        :data="sceneArray"
        border
        @selection-change="(val) => tableProps && tableProps.selectionChange(val)"
        :ref="(table) => tableProps && (tableProps.tableRef.value = table)"
      >
        <slot name="table"></slot>
        <el-table-column label="场景标题" v-slot:default="{ row }">
          <a class="link" @click="gotoScene(row, false)">
            <TexToolTip :text="row.sceneName" />
          </a>
        </el-table-column>

        <el-table-column label="场景类型" v-slot:default="{ row }">
          <TexToolTip :text="SceneTypeDesc[row.cameraType as SceneType]" />
        </el-table-column>
        <el-table-column label="场景码" v-slot:default="{ row }">
          <TexToolTip :text="row.sceneCode" />
        </el-table-column>
        <el-table-column label="SN码" v-slot:default="{ row }">
          <TexToolTip :text="row.snCode" />
        </el-table-column>

        <el-table-column label="设备类型" prop="snCode" v-slot:default="{ row }">
          <TexToolTip :text="DeviceTypeDesc[row.cameraType as DeviceType]" />
        </el-table-column>
        <el-table-column label="拍摄时间" prop="algorithmTime" v-slot:default="{ row }">
          <TexToolTip :text="row.shootTime && row.shootTime.substr(0, 16)" />
        </el-table-column>

        <el-table-column label="计算完成时间" prop="createTime" v-slot:default="{ row }">
          <TexToolTip :text="row.algorithmTime && row.algorithmTime.substr(0, 16)" />
        </el-table-column>

        <el-table-column label="点位数量" v-slot:default="{ row }">
          <TexToolTip :text="row.shootCount" />
        </el-table-column>
        <el-table-column label="拍摄位置" v-slot:default="{ row }">
          <TexToolTip :text="row.gpsInfo" />
        </el-table-column>

        <!-- <el-table-column label="绑定账号" prop="userName"></el-table-column> -->
        <el-table-column label="状态" v-slot:default="{ row }">
          <TexToolTip :text="SceneStatusDesc[(row.calcStatus as SceneStatus)]" />
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right" v-if="!simple">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="gotoScene(row, false)">
              查看
            </el-button>
            <el-button link type="primary" size="small" @click="gotoScene(row, true)">
              编辑
            </el-button>
            <el-button link type="danger" @click="delHandler(row.sceneId)" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pag-layout">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        v-model:page-size="pageProps.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="(data: number) => pageProps.pageNum = data"
        :current-page="pageProps.pageNum"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref, watchEffect } from "vue";
import { scenePageFetch, ScenePageProps, delSceneFetch } from "@/request";
import {
  SceneStatusDesc,
  SceneStatus,
  SceneType,
  SceneTypeDesc,
  Scene,
} from "@/store/scene";
import { DeviceTypeDesc, DeviceType } from "@/store/device";
import { ElMessageBox } from "element-plus";
import { gotoScene } from "@/store/scene";
import TexToolTip from "@/components/tex-tooltip.vue";

const props = defineProps<{ tableProps?: { [key in string]: any }; simple?: boolean }>();

const initProps: ScenePageProps = {
  pageNum: 1,
  pageSize: 10,
};
const pageProps = ref({ ...initProps });
const total = ref<number>(0);
const sceneArray = ref<Scene[]>([]);

const refresh = async () => {
  const data = await scenePageFetch(pageProps.value);
  total.value = data.total;
  sceneArray.value = data.records;
  if (props.tableProps) {
    props.tableProps.tableDataChange(sceneArray.value);
  }
};

const delHandler = async (relicsId: number) => {
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delSceneFetch(relicsId);
    await refresh();
  }
};

watchEffect(refresh);
onActivated(refresh);
</script>

<style scoped lang="scss">
.relics-layout {
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}
.pag-layout {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.relics-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .search {
    flex: 1;
  }
  .relics-oper {
    flex: 0 0 100px;
    text-align: right;
  }
}
</style>