Merge branch 'wvp-28181-2.0'

648540858

2022-11-23 12fa3b4c8da2af13a710400d64c9fe6d5d6b1e5e

 web_src/src/components/dialog/chooseChannelForGb.vue

@@ -1,6 +1,10 @@
<template>
<div id="chooseChannelForGb" >
   <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
  <div style="font-size: 17px; color: #606060; white-space: nowrap; line-height: 30px; font-family: monospace;">
    <span v-if="catalogId == null">{{catalogName}}的国标通道</span>
    <span v-if="catalogId != null">{{catalogName}}({{catalogId}})的国标通道</span>
  </div>
   <div style="background-color: #FFFFFF; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
        搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>

        通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem; width:6rem" v-model="channelType" placeholder="请选择" default-first-option>
@@ -9,21 +13,20 @@
            <el-option label="子目录" value="true"></el-option>
        </el-select>

        选择状态: <el-select size="mini"  style="margin-right: 1rem; width:6rem" v-model="choosed"  @change="search" placeholder="请选择" default-first-option>
        <el-option label="全部" value=""></el-option>
        <el-option label="已选择" value="true"></el-option>
        <el-option label="未选择" value="false"></el-option>
        </el-select>

        在线状态: <el-select size="mini" style="margin-right: 1rem; width:6rem" @change="search" v-model="online" placeholder="请选择" default-first-option>
            <el-option label="全部" value=""></el-option>
            <el-option label="在线" value="true"></el-option>
            <el-option label="离线" value="false"></el-option>
        </el-select>

<!--        <el-checkbox @change="shareAllCheckedChange">全部共享</el-checkbox>-->
     <el-button v-if="catalogId !== null" icon="el-icon-delete" size="mini" :disabled="gbChannels.length === 0 || multipleSelection.length === 0" type="danger" @click="batchDel">批量移除</el-button>
     <el-button v-if="catalogId === null" icon="el-icon-plus" size="mini" :disabled="gbChannels.length === 0 || multipleSelection.length === 0" @click="batchAdd">批量添加</el-button>
     <el-button v-if="catalogId === null" icon="el-icon-plus" size="mini" @click="add()">全部添加</el-button>
     <el-button v-if="catalogId !== null" type="danger" icon="el-icon-delete" size="mini" @click="remove()">全部移除</el-button>
    </div>
    <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" :height="winHeight">

    <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" :height="winHeight" :row-key="(row)=> row.deviceId + row.channelId" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
        </el-table-column>
        <el-table-column prop="channelId" label="通道编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="name" label="通道名称" show-overflow-tooltip align="center">
@@ -42,18 +45,20 @@
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" icon="el-icon-plus" v-if="!scope.row.platformId" @click="add(scope.row)">添加</el-button>
              <el-button size="mini" icon="el-icon-delete" v-if="scope.row.platformId" type="danger" @click="remove(scope.row)">移除</el-button>
              <el-button size="mini" icon="el-icon-plus" v-if="catalogId === null" @click="add(scope.row)">添加</el-button>
              <el-button size="mini" icon="el-icon-delete" v-if="catalogId !== null" type="danger" @click="remove(scope.row)">移除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
    </el-pagination>
    <getCatalog ref="getCatalog" :platformId="platformId" ></getCatalog>
</div>
</template>

<script>
import getCatalog from './getCatalog'
export default {
    name: 'chooseChannelForGb',
    computed: {
@@ -65,9 +70,12 @@
        //     };
        // }
    },
    props: ['platformId','catalogId', 'updateChoosedCallback'],
    props: ['platformId','catalogId',  'catalogName'],
    created() {
        this.initData();
    },
    components: {
      getCatalog,
    },
    data() {
        return {
@@ -80,7 +88,8 @@
            currentPage: 1,
            count: 10,
            total: 0,
            eventEnanle: false,
            eventEnable: false,
            multipleSelection: [],
            winHeight: window.innerHeight - 400,

        };
@@ -88,8 +97,10 @@
    watch:{
        platformId(newData, oldData){
            console.log(newData)
            this.initData()

            this.getChannelList()
        },
        catalogId(newData, oldData){
          this.getChannelList()
        },
    },
    methods: {
@@ -105,126 +116,133 @@
            console.log(val)
            this.initData();
        },
        rowcheckedChange: function (val, row) {
            console.log(val)
            console.log(row)
        },
        add: function (row) {
          console.log(row)
          row.catalogId = this.catalogId
          row.platformId = this.platformId
          this.$axios({
            method:"post",
            url:"/api/platform/update_channel_for_gb",
            data:{
              platformId:  this.platformId,
              channelReduces: [row],
              catalogId: this.catalogId
            }
          }).then((res)=>{
            console.log("保存成功")
            if(this.updateChoosedCallback)this.updateChoosedCallback(this.catalogId)
          }).catch(function (error) {
            console.log(error);
          });
          let all = typeof(row) === "undefined"
          this.getCatalogFromUser((catalogId)=> {
            this.$axios({
              method:"post",
              url:"/api/platform/update_channel_for_gb",
              data:{
                platformId:  this.platformId,
                all: all,
                channelReduces: all?[]:[row],
                catalogId: catalogId
              }
            }).then((res)=>{
              console.log("保存成功")
              this.getChannelList();
            }).catch(function (error) {
              console.log(error);
            });
          })

        },
        remove: function (row) {
          console.log(row)
          let all = typeof(row) === "undefined"
          this.$confirm(`确定移除${all?"所有通道":""}吗？`, '提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(row)

          this.$axios({
            method:"delete",
            url:"/api/platform/del_channel_for_gb",
            data:{
              platformId:  this.platformId,
              channelReduces: [row]
            }
          }).then((res)=>{
            console.log("移除成功")
            if(this.updateChoosedCallback)this.updateChoosedCallback(row.catalogId)
            row.platformId = null;
            row.catalogId = null
          }).catch(function (error) {
            console.log(error);
            this.$axios({
              method:"delete",
              url:"/api/platform/del_channel_for_gb",
              data:{
                platformId:  this.platformId,
                all: all,
                channelReduces: all?[]:[row],
              }
            }).then((res)=>{
              console.log("移除成功")
              this.getChannelList();
            }).catch(function (error) {
              console.log(error);
            });
          }).catch(() => {

          });
        },
        checkedChange: function (val) {
            let that = this;
            if (!that.eventEnanle) {
                return;
            }
            let newData = {};
            let addData = [];
            let delData = [];
            if (val.length > 0) {
                for (let i = 0; i < val.length; i++) {
                    const element = val[i];
                    let key = element.deviceId + "_" + element.channelId;
                    newData[key] = element;
                    if (!!!that.gbChoosechannel[key]){
                        addData.push(element)
                    }else{
                        delete that.gbChoosechannel[key]
                    }
                }

                let oldKeys = Object.keys(that.gbChoosechannel);
                if (oldKeys.length > 0) {
                    for (let i = 0; i < oldKeys.length; i++) {
                        const key = oldKeys[i];
                        delData.push(that.gbChoosechannel[key])
                    }
                }

            }else{
                let oldKeys = Object.keys(that.gbChoosechannel);
                if (oldKeys.length > 0) {
                    for (let i = 0; i < oldKeys.length; i++) {
                        const key = oldKeys[i];
                        delData.push(that.gbChoosechannel[key])
                    }
                }
            }

            that.gbChoosechannel = newData;
            if (Object.keys(addData).length >0) {
                that.$axios({
                    method:"post",
                    url:"/api/platform/update_channel_for_gb",
                    data:{
                        platformId:  that.platformId,
                        channelReduces: addData,
                        catalogId: that.catalogId
                    }
                }).then((res)=>{
                    console.log("保存成功")
                    if(that.updateChoosedCallback)that.updateChoosedCallback(that.catalogId)
                }).catch(function (error) {
                    console.log(error);
                });
            }
            if (delData.length >0) {
                 that.$axios({
                    method:"delete",
                    url:"/api/platform/del_channel_for_gb",
                    data:{
                        platformId:  that.platformId,
                        channelReduces: delData
                    }
                }).then((res)=>{
                    console.log("移除成功")
                   let nodeIds = new Array();
                   for (let i = 0; i < delData.length; i++) {
                     nodeIds.push(delData[i].channelId)
                   }
                   if(that.updateChoosedCallback)that.updateChoosedCallback(null, nodeIds)
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        shareAllCheckedChange: function (val) {

        },
        // checkedChange: function (val) {
        //     let that = this;
        //     if (!that.eventEnable) {
        //         return;
        //     }
        //     let newData = {};
        //     let addData = [];
        //     let delData = [];
        //     if (val.length > 0) {
        //         for (let i = 0; i < val.length; i++) {
        //             const element = val[i];
        //             let key = element.deviceId + "_" + element.channelId;
        //             newData[key] = element;
        //             if (!!!that.gbChoosechannel[key]){
        //                 addData.push(element)
        //             }else{
        //                 delete that.gbChoosechannel[key]
        //             }
        //         }
        //
        //         let oldKeys = Object.keys(that.gbChoosechannel);
        //         if (oldKeys.length > 0) {
        //             for (let i = 0; i < oldKeys.length; i++) {
        //                 const key = oldKeys[i];
        //                 delData.push(that.gbChoosechannel[key])
        //             }
        //         }
        //
        //     }else{
        //         let oldKeys = Object.keys(that.gbChoosechannel);
        //         if (oldKeys.length > 0) {
        //             for (let i = 0; i < oldKeys.length; i++) {
        //                 const key = oldKeys[i];
        //                 delData.push(that.gbChoosechannel[key])
        //             }
        //         }
        //     }
        //
        //     that.gbChoosechannel = newData;
        //     if (Object.keys(addData).length >0) {
        //         that.$axios({
        //             method:"post",
        //             url:"/api/platform/update_channel_for_gb",
        //             data:{
        //                 platformId:  that.platformId,
        //                 channelReduces: addData,
        //                 catalogId: that.catalogId
        //             }
        //         }).then((res)=>{
        //             console.log("保存成功")
        //         }).catch(function (error) {
        //             console.log(error);
        //         });
        //     }
        //     if (delData.length >0) {
        //          that.$axios({
        //             method:"delete",
        //             url:"/api/platform/del_channel_for_gb",
        //             data:{
        //                 platformId:  that.platformId,
        //                 channelReduces: delData
        //             }
        //         }).then((res)=>{
        //             console.log("移除成功")
        //            let nodeIds = new Array();
        //            for (let i = 0; i < delData.length; i++) {
        //              nodeIds.push(delData[i].channelId)
        //            }
        //         }).catch(function (error) {
        //             console.log(error);
        //         });
        //     }
        // },
        // shareAllCheckedChange: function (val) {
        //
        // },
        getChannelList: function () {
            let that = this;

@@ -236,34 +254,22 @@
                        count: that.count,
                        query: that.searchSrt,
                        online: that.online,
                        choosed: that.choosed,
                        catalogId: that.catalogId,
                        platformId: that.platformId,
                        channelType: that.channelType
                    }
                })
                .then(function (res) {
                    that.total = res.data.total;
                    that.gbChannels = res.data.list;
                  if (res.data.code === 0 ) {
                    that.total = res.data.data.total;
                    that.gbChannels = res.data.data.list;
                    that.gbChoosechannel = {};
                    // 防止出现表格错位
                    that.$nextTick(() => {
                        that.$refs.gbChannelsTable.doLayout();
                        // 默认选中
                        var chooseGBS = [];
                        for (let i = 0; i < res.data.list.length; i++) {
                            const row = res.data.list[i];
                            console.log(row.platformId)
                            if (row.platformId == that.platformId) {
                                that.$refs.gbChannelsTable.toggleRowSelection(row, true);
                                chooseGBS.push(row)
                                that.gbChoosechannel[row.deviceId+ "_" + row.channelId] = row;

                            }
                        }
                         that.eventEnanle = true;
                        // that.checkedChange(chooseGBS)
                    })
                    console.log(that.gbChoosechannel)
                  }
                  // 防止出现表格错位
                  that.$nextTick(() => {
                      that.$refs.gbChannelsTable.doLayout();
                      that.eventEnable = true;
                  })
                })
                .catch(function (error) {
                    console.log(error);
@@ -276,10 +282,55 @@
        handleGBSelectionChange: function() {
            this.initData();
        },
        // catalogIdChange: function(id) {
        //     this.catalogId = id;
        //     console.log("通道选择模块收到： " + id)
        // },
      batchDel: function() {
        this.$confirm(`确认这${this.multipleSelection.length}个通道吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method:"delete",
            url:"/api/platform/del_channel_for_gb",
            data:{
              platformId:  this.platformId,
              channelReduces: this.multipleSelection
            }
          }).then((res)=>{
            console.log("移除成功")
            this.$refs.gbChannelsTable.clearSelection()
            this.getChannelList();
          }).catch(function (error) {
            console.log(error);
          });
        }).catch(() => {
        });
      },
      batchAdd: function() {
        this.getCatalogFromUser((catalogId)=> {

          this.$axios({
            method: "post",
            url: "/api/platform/update_channel_for_gb",
            data: {
              platformId: this.platformId,
              channelReduces: this.multipleSelection,
              catalogId: catalogId,
            }
          }).then((res) => {
            console.log("保存成功")
            this.$refs.gbChannelsTable.clearSelection()
            this.getChannelList();
          }).catch(function (error) {
            console.log(error);
          });
        });
      },
      handleSelectionChange: function (val) {
        this.multipleSelection = val;
      },
      getCatalogFromUser(callback){
        this.$refs.getCatalog.openDialog(callback)
      },
    }
};
</script>