feat: 添加设备切换弹窗组件, 添加设备切换功能,切换后刷新数据

songshankun

2023-11-15 15e2f2216d3d6c81eb495b979cdb1a46e20361c4

 src/views/visualization.vue

@@ -4,8 +4,9 @@
    <!-- v-if="Tasks&&Tasks.length>0" -->
    <template >
      <div class="left">
        <p class="title">
          <template v-if="Number(ChannelAmount)>1">
        <div class="title">
          <div class="dashboard-channels">
            <template v-if="Number(ChannelAmount)>1">
            <span
              class="font set-title"
              style="float: left; margin-right: 15px;"
@@ -16,41 +17,48 @@
                <img style="width:32px;" src="../../public/one.png" />
              </span>
            </span>
            <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)">
              <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)">
              <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" />
              <img style="width:32px;" v-else src="../../public/two.png" />
            </span>
            <span
              class="font set-title"
              style="float: left;"
              @click="cutClick(3)"
            >
              <span
                class="font set-title"
                style="float: left;"
                @click="cutClick(3)"
              >
              <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" />
              <span  v-else>
                <img style="width:32px;" src="../../public/right.png" />
              </span>
            </span>
         </template>
          智能工作台
          <span
            class="font el-icon-setting set-title"
            style="float: right"
            @click="setUrl"
          ></span>
          <span
            class="font el-icon-s-tools set-title"
            style="float: right;margin-right: 6px"
            @click="openParamsConfigModal"
          ></span>
          <span
            style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
            @click="taskClick"
          >
            </template>
          </div>
         <div class="dashboard-title">
           智能工作台 — {{currentDeviceName}}

           <i  @click="showDeviceModal=true" class="el-icon" style="font-size: 26px; height: 32px; color: #0db7f5; margin-left: 20px; cursor: pointer;"><svg data-v-c3da359e="" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M13 5h9v2h-9zM2 7h7v2h2V3H9v2H2zm7 10h13v2H9zm10-6h3v2h-3zm-2 4V9.012h-2V11H2v2h13v2zM7 21v-6H5v2H2v2h3v2z"></path></svg></i>
         </div>
          <div class="dashboard-btn">
            <span
              class="font el-icon-setting set-title"
              style="float: right"
              @click="setUrl"
            ></span>
            <span
              class="font el-icon-s-tools set-title"
              style="float: right;margin-right: 6px"
              @click="openParamsConfigModal"
            ></span>
            <span
              style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
              @click="taskClick"
            >
          <el-badge :value="TaskCount"  :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'">
            <i   class="el-icon-chat-dot-round" />
          </el-badge>
        </span>
        </p>
          </div>
        </div>
        <div
          :class="(activeName == 1||activeName == 3) ? 'active-one' : 'active-two'"
          v-for="(taskData, index) in Tasks"
@@ -599,6 +607,7 @@
      @updateGet="updateGet"
    />
    <ParamsConfigModal :visible="paramsConfigIsShow" @close="closeParamsConfigModal"></ParamsConfigModal>
    <DeviceSelectModal :visible.sync="showDeviceModal" @should-reload="reloadAllData"></DeviceSelectModal>
  </div>
</template>

@@ -623,8 +632,11 @@
import {channelNameConfig} from "@/common/constants";
import _ from 'lodash'
import ParamsConfigModal from "@/components/ParamsConfigModal.vue";
import DeviceSelectModal from "@/components/DeviceSelectModal.vue";
import {mapActions, mapGetters, mapState} from "vuex";
export default {
  components: {
    DeviceSelectModal,
    ParamsConfigModal,
    TaskControlModal,
    Card,
@@ -635,6 +647,7 @@
  },
  data() {
    return {
      showDeviceModal:false,
      pollingTaskCountTimer: null,
      activeName: 1,
      progress: 70, //进度
@@ -782,6 +795,7 @@
    this.activeName = channelType
    this.getTaskInfo(channelType);
    this.getTaskCountStatistics()
    this.getDeviceInfo()
  },
  beforeDestroy() {
    clearTimeout(this.pollingTaskCountTimer)
@@ -796,6 +810,8 @@
    // }
  },
  computed:{
    ...mapState(['deviceInfo']),
    ...mapGetters(['currentDeviceName']),
    displayPLCStatus(){
      let PLCStatus = []
      if (this.activeName===1){
@@ -812,6 +828,13 @@
    }
  },
  methods: {
    ...mapActions(["getDeviceInfo"]),
    reloadAllData(){
      console.log(1)
      this.getTaskInfo(this.activeName);
      this.getTaskCountStatistics()
      this.getDeviceInfo()
    },
    newTaskPlaceholder(channel){
      return {
        Order: {},
@@ -1847,6 +1870,9 @@
    padding: 30px;
    padding-top: 20px;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30px;
      font-weight: 600;
      height:40px;
@@ -2329,4 +2355,8 @@
    display: none;
  }
}
.dashboard-title{
  display: flex;
  align-items: center;
}
</style>