element遍历表格每列加状态，表格固定某一列

<template>
  <div class="app-container" id="mainpdevice">
    <el-form class="search_wrap mb-15" :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="归属分类" prop="assetTypeId">
        <treeselect v-model="queryParams.assetTypeId" style="width:150px" :options="treedata" noOptionsText="暂无数据"
          :normalizer="normalizer" placeholder="请选择归属分类" />
      </el-form-item>
      <el-form-item label="设备名称" prop="assetName">
        <el-input style="width:150px" v-model="queryParams.assetName" placeholder="请输入设备名称" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

      <el-form-item class="fr">
        自动刷新<el-switch class="ml-10" @change="changelfresh($event)" v-model="freshstatus" active-color="#5B7BFA"
          inactive-color="#dadde5">
        </el-switch>
      </el-form-item>

    </el-form>
    <div class="content_wrap">
      <div class="mt-10 ">
        <span class="table_title fl">数据查询列表</span>
      </div>
      <el-table class="mt-15" v-loading="listLoading" stripe :data="dataList" >
        <el-table-column v-for="(column) in tableColumnList" header-align="center" :sortable="column.hasSort"
          :key="column.prop + column.propName" :prop="column.prop" :label="column.propName" align="center" :fixed="column.fiexd"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div :style="{color: scope.row[scope.column.property].alarm === true ? 'red': 'black' }">
              <!-- {{scope.row[scope.column.property].value}} -->
              <div v-if="scope.row[scope.column.property].lable_name == 'time'">
                  {{scope.row[scope.column.property].value}}
              </div>
              <div v-else-if="scope.row[scope.column.property].lable_name == 'webAddress'">
                  <el-button v-if="scope.row[scope.column.property].webBoardId!=null" @click="todetail(scope.row[scope.column.property])" type="text">详情</el-button>
                  <a v-else target="_blank"><el-button type="text" disabled>详情</el-button></a>
              </div>
              <div v-else-if="scope.row[scope.column.property].lable_name == 'assetName'">
                <span> {{scope.row[scope.column.property].value}}</span>
                <i @click="editasset(scope.row[scope.column.property])" class="el-icon-edit-outline ml-10 pointer" style="color: #0F6EFF;font-size: 14px;"></i>
              </div>

              <div v-else-if="scope.row[scope.column.property].lable_name == 'switchPointValue'">
                <!-- {{scope.row[scope.column.property].value}} -->
                <div v-if="scope.row[scope.column.property].value=='0'||scope.row[scope.column.property].value=='1'">
                  <el-switch v-model="scope.row[scope.column.property].value" :active-value='"1"'
                    :inactive-value='"0"' active-color="#5B7BFA" inactive-color="#dadde5"
                    @change="changeswitch(scope.row[scope.column.property])">z
                  </el-switch>
                </div>
                <div v-else>
                  <span>
                    <el-tooltip class="item" effect="dark" content="测点传输的开关量数值异常，请检查此设备关联的开关启停测点。" placement="top">
                      <i class="el-icon-warning-outline" style="color: red;font-size: 28px;"></i>
                    </el-tooltip>
                  </span>
                </div> 
              </div>
              <div v-else>
                  {{scope.row[scope.column.property].value}}
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="opeTime" label="设备名称" fixed width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.assetName }}</span>
            <i @click="editasset(scope.row)" class="el-icon-edit-outline ml-10 pointer"
              style="color: #0F6EFF;font-size: 14px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="opeUser" width="80" align="center" label="开关启停">
          <template slot-scope="scope">
            <div v-if="scope.row.switchPointValue=='0'||scope.row.switchPointValue=='1'">
              <el-switch v-model="scope.row.switchPointValue" :active-value='"1"' :inactive-value='"0"'
                active-color="#5B7BFA" inactive-color="#dadde5" @change="changeswitch(scope.row)">
              </el-switch>
            </div>
            <div v-else>
              <span>
                <el-tooltip class="item" effect="dark" content="测点传输的开关量数值异常，请检查此设备关联的开关启停测点。" placement="top">
                  <i class="el-icon-warning-outline" style="color: red;font-size: 28px;"></i>
                </el-tooltip>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="webAddress" align="center" width="80" label="组态画面">
          <template slot-scope="scope">
            <el-button v-if="scope.row.webBoardId!=null" @click="todetail(scope.row)" type="text">详情</el-button>
            <a v-else target="_blank"><el-button type="text" disabled>详情</el-button></a>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="assetPointVOList" align="left" label="瞬时值/测点名称">
          <template slot-scope="scope">
            <el-scrollbar style="whiteSpace:nowrap;">
              <div v-for="item in scope.row.assetPointVOList" :key="item.id"
                style="display: inline-block;margin-right: 30px;" class="icon_box">
                <el-tooltip placement="top">
                  <div slot="content">{{item.pointValue}}<br />{{ item.pointName || '无测点名称'}}</div>
                  <div style="text-align: center;">
                    <div style="color: #FF4500;font-size: 24px;font-weight:600" class="icon_val" v-show="item.isAlarm == true">{{ item.pointValue }}</div>
                    <div style="color: #409EFF;font-size: 22px;" class="icon_val" v-show="item.isAlarm == false">{{ item.pointValue }}</div>
                    <div style="font-size: 14px;" class="mt-10 icon_name">{{ item.pointName || '无测点名称'}}</div>
                  </div>
                </el-tooltip>
              </div>
            </el-scrollbar>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getTableData" />
    </div>
    <!-- 修改-->
    <el-dialog title="修改" :visible.sync="openedit" width="50%" append-to-body :close-on-click-modal="false">
      <el-form label-width="80px">
        <el-form-item label="设备编号" prop="deviceid">
          <el-input v-model.trim="deviceid" disabled />
        </el-form-item>
        <el-form-item label="设备名称" prop="devicename">
          <el-input v-model.trim="devicename" disabled />
        </el-form-item>
        <el-form-item label="展示测点" prop="pointListVOList">
          <el-select v-model="pointListVOList" multiple filterable placeholder="请选择测点">
            <el-option v-for="item in pointoptions" :key="item.id" :label="item.pointName+' / '+item.pointId"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="">
          <el-button plain @click="toSort">测点排序</el-button>
        </el-form-item> -->
        <div style="margin: auto;width: 80px;">
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 排序 -->

    <el-drawer title="测点排序" :visible.sync="opentoSort" direction="rtl">
      <div class="defaultSort">
        {{defaultSortTit}}
      </div>
      <div class="sortTit">拖动调整测点排序</div>
      <draggable :list="sortList" animation="200" ghostClass="ghost" @end="endSort">
        <div class="sortOne" v-for="(item,index) in sortList" :key="index">
          <div class="sortCon">{{item.id}}</div>
          <div class="sortCon">{{item.pointId}}</div>
          <div class="sortCon">{{item.pointName}}</div>
        </div>
      </draggable>

      <div class="page-footer">
        <el-button type="primary" @click="submitSort">确定</el-button>
        <el-button type="" @click="quxiao">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>
  
  <script>
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  addtypelist, statuslist, assetStatus, equipmentSwitchPoint,
  pointdropDown, getEquipmentPoint, updateEquipmentPoint, getSortList, updateSort, getSortRemark
} from "@/api/assetmanage/assetaccount";

export default {
  name: 'Devicestatus',
  components: {
    Treeselect,
    draggable,
  },
  watch: {
    // 监听deptId
    'assetTypeId': 'currDeptChange'
  },
  data() {
    return {
      freshstatus: false,
      openedit: false,
      treedata: [],
      // 查询参数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        assetName: undefined,
        assetTypeId: undefined,
      },
      listLoading: false,
      "tableColumnList": [
        {
          "prop": "assetName",
          "propName": "设备名称",
          "propDescribtion": null,
          "hasSort": false,
          "fiexd":'left'
        },
        {
          "prop": "switchPointValue",
          "propName": "开关启停",
          "propDescribtion": null,
          "hasSort": false,
          "fiexd":'left'
        },
        {
          "prop": "webAddress",
          "propName": "组态画面",
          "propDescribtion": null,
          "hasSort": false,
          "fiexd":'left'
        },
        {
          "prop": "v1",
          "propName": "压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v2",
          "propName": "温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v3",
          "propName": "3压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v4",
          "propName": "4温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v5",
          "propName": "5压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v6",
          "propName": "6温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v3",
          "propName": "3压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v4",
          "propName": "4温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v5",
          "propName": "5压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v6",
          "propName": "6温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v3",
          "propName": "3压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v4",
          "propName": "4温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v5",
          "propName": "5压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v6",
          "propName": "6温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v3",
          "propName": "3压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v4",
          "propName": "4温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v5",
          "propName": "5压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v6",
          "propName": "6温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v3",
          "propName": "3压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v4",
          "propName": "4温度",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v5",
          "propName": "5压力",
          "propDescribtion": null,
          "hasSort": false
        },
        {
          "prop": "v6",
          "propName": "6温度",
          "propDescribtion": null,
          "hasSort": false
        },
        // {
        //   "prop": "time",
        //   "propName": "上报时间",
        //   "propDescribtion": null,
        //   "hasSort": false
        // },
      ],
      dataList: [
        {
          // "time": {
          //   "value": "2024-08-06 21:56:15.376",
          //   "alarm": false,
          //   "lable_name": 'time',
          // },
          "webAddress": {
            "value": "hhhhhhhh",
            "alarm": false,
            "lable_name": 'webAddress',
            "webBoardId":null
          },
          "assetName":{
            "value": "设备1",
            "alarm": false,
            "lable_name": 'assetName',
            "id":"1819665331543883778"
          },
          "switchPointValue":{
            "value": "",
            "alarm": false,
            "lable_name": 'switchPointValue',
            "switchPoint": 3645480,
            "switchPointId": "TEST1",
            "switchPointName": "报警标识",
            "switchPointValue": "1",
          },
          "v1": {
            "value": "1.0",
            "alarm": true
          },
          "v2": {
            "value": "10.0",
            "alarm": false
          },
          "v3": {
            "value": "1.0",
            "alarm": true
          },
          "v4": {
            "value": "10.0",
            "alarm": true
          },
          "v5": {
            "value": "1.0",
            "alarm": true
          },
          "v6": {
            "value": "10.0",
            "alarm": false
          }
        },
        {
          // "time": {
          //   "value": "2024-08-06 21:56:15.376",
          //   "alarm": false,
          //   "lable_name": 'time',
          // },
          "assetName":{
            "value": "设备2",
            "alarm": false,
            "lable_name": 'assetName',
            "id":"1820297216169570306"
          },
          "webAddress": {
            "value": "hhh22hhhhh",
            "alarm": false,
            "webBoardId":135,
            "lable_name": 'webAddress',
          },
          "switchPointValue":{
            "value": "1",
            "alarm": false,
            "lable_name": 'switchPointValue',
            "switchPoint": 3645480,
            "switchPointId": "TEST13",
            "switchPointName": "开关1",
            "switchPointValue": "13",
          },
          "v1": {
            "value": "1.0",
            "alarm": false
          },
          "v2": {
            "value": "10.0",
            "alarm": true
          },
          "v3": {
            "value": "1.0",
            "alarm": true
          },
          "v4": {
            "value": "10.0",
            "alarm": false
          },
          "v5": {
            "value": "1.0",
            "alarm": true
          },
          "v6": {
            "value": "10.0",
            "alarm": false
          }
        }
      ],
      assetId: '',
      assetOption: [],
      deviceid: '',
      devicename: '',
      pointoptions: [],
      pointListVOList: [],

      opentoSort: false,
      defaultSortTit: '',
      sortList: [],
      sortParams: {
        id: '',
        equipmentPointListVOList: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles', "userMsg", 'statusFail', 'statusSuccess', 'userId', 'tenantId', 'tenantType'
    ])
  },
  mounted() {
    this.gettype()
    this.getTableData()
    this.getSortRemark()
  },
  unmounted() {
    clearInterval(this.timer);
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    todetail(row) {
      this.$router.push({ path: "/kanbantechnology/technologyList", query: { webBoardId: row.webBoardId } });
    },
    // 自动刷新
    changelfresh(event) {
      // console.log(event)
      this.freshstatus = event
      if (event == true) {
        this.timer = setInterval(() => {
          if (document.getElementById('mainpdevice')) {
            this.getTableData()
          }
        }, 10000)
      } else {
        clearInterval(this.timer);
      }
    },
    submitForm() {
      let data = {
        id: this.bianhao,
        pointIdList: this.pointListVOList
      }
      updateEquipmentPoint(data).then((response) => {
        this.openedit = false
        this.getTableData()
      })
    },
    editasset(row) {
      this.bianhao = row.id
      this.openedit = true
      console.log(row)
      let data = {
        id: row.id
      }
      pointdropDown(data).then((response) => {
        this.pointoptions = response.data
      })
      getEquipmentPoint(data).then((response) => {
        this.deviceid = response.data.id
        this.devicename = response.data.assetName
        this.pointListVOList = response.data.pointIdList
      })
    },
    changeswitch(row) {
      let data = {
        pointPrimaryKey: row.switchPoint,
        pointValue: row.switchPointValue
      }
      // console.log("data",data)
      this.$confirm('是否针对测点：' + row.switchPointId + '/' + row.switchPointName + '进行返控，返控数值：' + row.switchPointValue, '是否确认进行测点返控？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        assetStatus(data).then((response) => {
          let pdata = {
            switchPointId: row.switchPoint
          }
          this.timer = setInterval(() => {
            equipmentSwitchPoint(pdata).then((response) => {
              console.log('---', response.data.status)
              if (response.data.status == false) {
                this.listLoading = true;
              } else {
                this.listLoading = false;
                clearInterval(this.timer);
                this.getTableData();
              }
            })
          }, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        this.getTableData();
      });
    },
    // 归属分类
    /** 转换s树数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.assetTypeName,
        children: node.children
      };
    },
    gettype() {
      addtypelist().then((response) => {
        this.treedata = this.handleTree(response.data, "id");
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getTableData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.time = []
      this.queryParams.timeFrom = undefined
      this.queryParams.timeTo = undefined
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 查看列表
    getTableData() {
      this.listLoading = true;
      // console.log("this.queryParams",this.queryParams)
      // return false
      statuslist(this.queryParams).then((response) => {
        this.total = response.total;
        this.dataList = response.rows
        this.listLoading = false;
      })
    },

    // 测点排序
    toSort() {
      this.opentoSort = true
      this.getSortList(this.bianhao)
    },

    // 获取排序备注
    getSortRemark() {
      getSortRemark().then((result) => {
        if (result.code == 200) {
          this.defaultSortTit = result.data
        }
      }).catch((err) => {

      });
    },

    // 获取排序列表
    getSortList(id) {
      getSortList({ id: id }).then((result) => {
        if (result.code == 200) {
          this.sortList = result.data
        }
      }).catch((err) => {

      });
    },

    // 提交排序
    submitSort() {
      this.sortParams.id = this.bianhao;
      this.sortParams.equipmentPointListVOList = this.sortList;
      updateSort(this.sortParams).then((result) => {
        if (result.code == 200) {
          this.opentoSort = false;
          this.getTableData()
          this.$message({
            type: 'success',
            message: '排序修改成功'
          });
        }
      }).catch((err) => {

      });

    },
    quxiao() {
      this.sortParams.id = '';
      this.sortParams.equipmentPointListVOList = [];
      this.opentoSort = false;
    },

    endSort() {
      console.log(this.sortList);
    }
  }
}
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
.el-drawer__body {
  padding: 0 20px 20px 20px;
}
.sortTit {
  margin-top: 15px;
  text-align: right;
  margin-bottom: 10px;
}
.sortOne {
  display: flex;
  .sortCon {
    flex: 1;
    text-align: center;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #eaedf3;
  }
}
.ghost {
  background: #e9ecef !important;
}
.page-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
}

.icon_box {
  width: 75px;
  .icon_val {
    width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .icon_name {
    width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>