ojk_dtb_manage_ui/src/components/dataManage/dataShow/IotData.vue

<!-- 物联感知数据 -->
<template>
  <CategoryMenu :type="'iot'" v-model:currVal="currCategory"></CategoryMenu>
  <div class="data" v-if="currCategory && currCategory!==''">
    <el-button v-if="auth" type="primary" @click="addDataClick">录入物联感知数据</el-button>
    <el-button v-if="auth" type="warning" @click="batchDelete">批量删除</el-button>
    <div class="operation">
      <el-form :model="filterForm" :inline="true">
        <el-form-item label="标题：" style="width: 15%">
          <el-input v-model="filterForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="描述：" style="width: 17%">
          <el-input v-model="filterForm.content" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="地名地址库：" style="width: 20%">
          <el-input v-model="filterForm.address" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="导入类型：" style="width: 20%">
          <el-select v-model="filterForm.importType" placeholder="请选择类型">
            <el-option value="单条数据录入">单条数据录入</el-option>
            <el-option value="Shape文件导入">Shape文件导入</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list">
      <el-table ref="dataTable" v-loading="loading" element-loading-text="正在加载，请稍后..." :data="tableData"
                :border="true" :stripe="true" :height="440" style="width: 100%;margin-bottom: 15px;"
                @selection-change="handleTableSelect">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="ID" width="100" :show-overflow-tooltip="true">
          <template #default="scope">
            <span style="cursor: pointer" @click="$util.clipboard.copyText(scope.row.id)"> {{ scope.row.id }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200"/>
        <el-table-column prop="content" label="描述" width="250"/>
        <el-table-column prop="menuNameTwo" label="类别" width="80"/>
        <el-table-column prop="mediaType" label="媒体类型" width="120"/>
        <el-table-column prop="url" label="媒体路径" width="120"/>
        <el-table-column prop="lon" label="位置" width="180">
          <template #default="scope">
            [
            <span v-if="scope.row.lon && scope.row.lon!=='' && scope.row.lat && scope.row.lat!==''">
              {{ scope.row.lon }},<br/> {{ scope.row.lat }}
            </span>
            ]
          </template>
        </el-table-column>
        <el-table-column prop="importType" label="导入类型" width="150"/>
        <el-table-column prop="address" label="地名地址库" width="150"/>
        <el-table-column prop="userName" label="修改人"/>
        <el-table-column prop="updateDate" label="修改时间" width="160">
          <template #default="scope">
            {{ $util.datetime.format(scope.row.updateDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="160">
          <template #default="scope">
            {{ $util.datetime.format(scope.row.createDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top-start">
              <el-button type="default" @click="viewData(scope.row)" circle>
                <el-icon>
                  <ElIconView/>
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip v-if="auth"  class="box-item" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" @click="editData(scope.row)" circle>
                <el-icon>
                  <ElIconEdit/>
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip v-if="auth"  class="box-item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" @click="deleteData(scope.row)" circle>
                <el-icon>
                  <ElIconDelete/>
                </el-icon>
              </el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float:right" background layout="sizes, prev, pager, next, jumper, total"
                     v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
                     v-model:total="pageInfo.total"/>
    </div>
  </div>

  <IotDataDetail v-if="isDetailShow" :is-show="isDetailShow" :item="currRow" :close="handleDetailShow"></IotDataDetail>
</template>

<script>
import api from '@/api/data/IotData'
import IotDataDetail from "@/components/dataManage/dataDetail/IotDataDetail";
import CategoryMenu from "@/components/dataManage/CategoryMenu";

export default {
  data() {
    return {
      auth: false,
      loading: false,
      filterForm: {},
      tableData: [],
      currRow: {},
      selectedRows: [],
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },

      currCategory: '',

      isDetailShow: false,
    }
  },
  components: {
    IotDataDetail,
    CategoryMenu,
  },
  created() {
    let userInfo = this.$store.state.userInfo;
    if (userInfo.userLevel<2
        || (userInfo.userLevel===2) && userInfo.serviceId.split(',').indexOf(this.$constant.serviceId)>-1 ) {
      this.auth = true;
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
    "pageInfo.page": function (val) {
      if (val > 0) {
        this.getData();
      }
    },
    "pageInfo.pageSize": function () {
      let app = this;
      this.pageInfo.page = -1;
      setTimeout(function () {
        app.pageInfo.page = 1;
      }, 50)
    },
    "currCategory": function () {
      this.resetCategory();
      this.getData();
    }
  },
  methods: {
    handleLoading(flag) {
      let app = this;
      if (flag) {
        app.loading = true;
      } else {
        setTimeout(() => {
          app.loading = false;
        }, 500);
      }
    },
    resetCategory() {
      let auth = this.$data.auth;
      let currCategory = this.$data.currCategory;
      Object.assign(this.$data, this.$options.data());
      this.auth = auth;
      this.currCategory = currCategory;
    },
    getData() {
      let app = this;
      if (!(app.currCategory && app.currCategory!=='')) {
        return;
      }
      let params = {
        menuId: app.currCategory,
        page: app.pageInfo.page,
        pageSize: app.pageInfo.pageSize,
      }
      Object.assign(params, app.filterForm)
      app.handleLoading(true)
      api.getData(params).then(res => {
        if (res.code === 200) {
          app.pageInfo.total = res.total;
          app.tableData = res.content
        }
        app.handleLoading(false)
      }).catch(err => {
        app.handleLoading(false)
      })
    },
    search() {
      let app = this;
      this.pageInfo.pageSize = -1;
      setTimeout(function () {
        app.pageInfo.pageSize = 10;
      })
    },
    handleTableSelect(val) {
      this.selectedRows = val;
    },
    handleDetailShow(flag) {
      if (flag) {
        this.getData()
      }
      this.isDetailShow = false
    },
    // 录入数据
    addDataClick() {
      this.currRow = {};
      this.isDetailShow = true;
    },
    // 批量删除数据
    batchDelete() {
      let app = this;
      if (!this.selectedRows) {
        return;
      }
      let ids = this.selectedRows.map(i=> {return i.id}).join(',');
      let params = {
        latlonDataId: ids
      }
      this.$msgbox.confirm('确定要删除吗？').then(()=>{
        api.deleteData(params).then(res=>{
          if (res.code===200) {
            app.getData();
            app.$message({message: '删除成功', type: 'success'})
          }
        })
      })
    },
    // 查看详情
    viewData(item) {
      let app = this;
      let params = {
        latlonDataId: item.id
      }
      app.$util.loading.handleLoading(true);
      api.getDataById(params).then(res=>{
        if (res.code===200) {
          if (!res.content.id || res.content.id==='') {
            app.$message({message: '该数据不存在', type: 'error'})
            return;
          }
          if (res.content.menuId) {
            res.content.menuId = Number(res.content.menuId);
            res.content.geometryStr = JSON.stringify(res.content.geometry);
            delete res.content.geometry;
          }
          app.currRow = JSON.parse(JSON.stringify(res.content))
          this.currRow.isDataView = true;
          app.isDetailShow = true
        }
        app.$util.loading.handleLoading(false);
      })
    },
    // 编辑数据
    editData(item) {
      let app = this;
      let params = {
        latlonDataId: item.id
      }
      app.$util.loading.handleLoading(true);
      api.getDataById(params).then(res=>{
        if (!res.content.id || res.content.id==='') {
          app.$message({message: '该数据不存在', type: 'error'})
          return;
        }
        if (res.code===200) {
          if (res.content.menuId) {
            res.content.menuId = Number(res.content.menuId);
            res.content.geometryStr = JSON.stringify(res.content.geometry);
            delete res.content.geometry;
          }
          app.currRow = JSON.parse(JSON.stringify(res.content))
          app.currRow.isEdit = true;
          app.isDetailShow = true
        }
        app.$util.loading.handleLoading(false);
      })

    },
    // 删除数据
    deleteData(item) {
      let app = this;
      app.$msgbox.confirm('确认要删除此条数据吗？').then(()=>{
        api.deleteData({latlonDataId: item.id}).then(res=>{
          if (res.code === 200) {
            app.getData();
            app.$message({message: '删除成功', type: 'success'});
          }
        })
      })
    },
  }
}
</script>

<style>

</style>