资产管理动态字段

xiangpei

2024-08-16 7ae73495487e9bebb986d53ca923a9ebac231618

资产管理动态字段

 src/api/platform/dynamicColumn.js

New file
@@ -0,0 +1,35 @@
import axios from '@/utils/request';

// 获取动态列列表
export const getDynamicColumnList = () => {
    return axios({
        url: "/api/dynamic-column/list",
        method: "GET"
    })
}

// 通过id删除动态列
export const deleteDynamicColumnById = (params) => {
    return axios({
        url: "/api/dynamic-column/" + params,
        method: "DELETE"
    })
}

// 修改动态列
export const editDynamicColumn = (data) => {
    return axios({
        url: "/api/dynamic-column",
        method: "PUT",
        data: data
    })
}

// 添加动态列
export const addDynamicColumn = (params) => {
    return axios({
        url: "/api/dynamic-column",
        method: "POST",
        data: params
    })
}

 src/components/RightToolbar/index.vue

@@ -7,6 +7,9 @@
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="自定义列" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="addDynamicColumn()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
@@ -29,13 +32,45 @@
        @change="dataChange"
      ></el-transfer>
    </el-dialog>


    <el-dialog
      title="添加动态列"
      :visible.sync="showDynamicColumn"
      width="500px"
      :before-close="dynamicColumnClose">
      <div>
        <div style="margin-bottom: 8px">
          <el-button style="float: right" type="primary" @click="addColumn" size="small">新增一条</el-button>
        </div>
        <div v-for="(dynamicColumn, index) in dynamicColumnList" :key="index">
          <el-form :inline="true" size="small">
            <el-form-item label="列名" prop="labelValue">
              <div style="display: flex; flex-direction: row">
                <el-input v-model="dynamicColumn.labelValue"></el-input>
                <el-button style="margin-left: 8px" type="danger" @click="delColumn(dynamicColumn.id, index)">删除</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dynamicColumnClose">取 消</el-button>
        <el-button type="primary" size="small" :disabled="!dynamicColumnList || dynamicColumnList.length < 1" @click="saveColumns">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { addDynamicColumn, deleteDynamicColumnById, editDynamicColumn, getDynamicColumnList } from '@/api/platform/dynamicColumn'
export default {
  name: "RightToolbar",
  data() {
    return {
      dynamicColumnList: [],
      showDynamicColumn: false,
      // 显隐数据
      value: [],
      // 弹出层标题
@@ -80,6 +115,7 @@
    }
  },
  created() {
    this.getDyColumn()
    if (this.showColumnsType == 'transfer') {
      // 显隐列初始默认隐藏列
      for (let item in this.columns) {
@@ -90,6 +126,45 @@
    }
  },
  methods: {
    getDyColumn() {
      if (this.$route.path.concat("equipment")) {
        // 查询动态列
        let params = {
          tableName: 't_monitor'
        }
        getDynamicColumnList(params).then(res => {
          this.dynamicColumnList = res.data
        })
      }
    },
    addDynamicColumn() {
      this.showDynamicColumn = true
    },
    saveColumns() {
      editDynamicColumn(this.dynamicColumnList).then(res => {
        this.$message.success("保存成功")
        this.showDynamicColumn = false
      })
    },
    addColumn() {
      this.dynamicColumnList.push({
        id: null,
        labelValue: ''
      })
    },
    delColumn(id, index) {
      if (! id) {
        this.dynamicColumnList.splice(index, 1)
        return
      }
      deleteDynamicColumnById(id).then(res => {
        this.$message.success("删除成功")
        this.getDyColumn();
      })
    },
    dynamicColumnClose() {
      this.showDynamicColumn = false
    },
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);

 src/views/system/data-manage/equipment/index.vue

@@ -41,9 +41,9 @@
    </el-card>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="关键字" prop="name">
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="queryParams.name"
          v-model="queryParams.keyword"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
@@ -107,12 +107,17 @@
      <el-table-column label="标签" align="center" prop="publicSecurity" width="180" v-if="columns[0].visible"/>
      <el-table-column label="区域" align="center" prop="address" width="180" v-if="columns[1].visible"/>
      <el-table-column label="设备状态" align="center" prop="onState" v-if="columns[2].visible">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/>
      </template>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/>
        </template>
      </el-table-column>
      <el-table-column label="数据时间" align="center" prop="installedTime" width="180" v-if="columns[3].visible"/>
      <el-table-column label="管理单位" align="center" prop="managementUnit" width="180" v-if="columns[4].visible"/>
      <el-table-column v-for="(column, index) in dynamicColumnList" :key="index" :label="column.labelValue" :prop="column.propName" align="center">
        <template slot-scope="scope">
          {{ getDynamicValue(scope.row, column.propName) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
          <template slot-scope="scope">
            <el-button
@@ -167,12 +172,14 @@

<script>
import { videoCount, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor";
import { getDynamicColumnList } from '@/api/platform/dynamicColumn'
import { dataCenter } from "@/api/platform/data-center";
export default {
  name: "Monitor",
  dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'],
  data() {
    return {
      dynamicColumnList: [],
      // 列信息
      columns: [
        { key: 0, label: `标签`, visible: true },
@@ -213,7 +220,7 @@
        pageNum: 1,
        pageSize: 10,
        serialNumber: null,
        name: null,
        keyword: '球机',
        onState: null,
        address: null,
        installedTime: null,
@@ -243,12 +250,26 @@
  created() {
    this.getVideoCount();
    this.getList();
    this.getCountyList();
    this.getDyColumn()
  },
  methods: {
    getDyColumn() {
      // 查询动态列
      let params = {
        tableName: 't_monitor'
      }
      getDynamicColumnList(params).then(res => {
        this.dynamicColumnList = res.data
      })
    },
    getDynamicValue(row, propName) {
      let target = row.dynamicColumnList.filter(item => item.propName === propName)
      return target && target.length > 0 ? target[0].columnValue : ''
    },
    /** 查询设备资产列表 */
    getList() {
      this.loading = true;
      this.getDyColumn()
      dataCenter('assetManagement', this.queryParams).then(response => {
        this.monitorList = response.data;
        this.total = response.total;

 src/views/system/monitor/video/index.vue

@@ -288,7 +288,6 @@
  created() {
    this.getVideoCount();
    this.getList();
    this.getCountyList();
  },
  methods: {
    /** 查询设备资产列表 */