xy-frontend/src/views/realTimeMonitor/index copy.vue

<template>
  <div class="realTimeMonitor" v-loading="mainLoading">
    <div class="monitor-container">
      <div class="allSide">
        <div class="typeList">
          <el-radio-group v-model="typeRadio" size="mini" @input="getTypeRadio">
            <el-radio-button :label="-1">全部</el-radio-button>
            <el-radio-button
              :label="1"
              v-if="roleName === 'superadmin' || roleName === 'Matthew'"
              >活动</el-radio-button
            >
          </el-radio-group>
        </div>
        <sideBar ref="sideTree" v-if="allTreeFlag"></sideBar>
        <activeSiderBar ref="activesideTree" v-else></activeSiderBar>
      </div>

      <div class="picListBox">
        <div class="previewBox" v-if="LineFlag">
          <!-- 预览图页面 -->
          <previewContain ref="previewRef"></previewContain>
        </div>
        <div class="previewBox" v-if="towerFlag">
          <div class="swiperBox" v-loading="swiperLoading">
            <div class="title">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <carouselChart
              ref="carouselpic"
              :terminalPhoto="terminalPhoto"
              :photoNum="photoNum"
              :protocolInfo="protocolInfo"
              v-if="terminalPhoto.length !== 0"
            ></carouselChart>
          </div>
          <div class="parameterArea">
            <parameterArea ref="areaRef"></parameterArea>
          </div>
        </div>
      </div>
    </div>
    <morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
  </div>
</template>
<script>
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
import sideBar from "./components/siderBar";
import activeSiderBar from "./components/activeSiderBar";
import previewContain from "./components/previewContain";
import carouselChart from "./components/carouselChart";
import parameterArea from "./components/parameterArea";
import morePicPreveiw from "./components/morePicPreveiw";

import { mapGetters, mapState } from "vuex";
import ActiveSiderBar from "./components/activeSiderBar.vue";
export default {
  name: "realTimeMonitor",
  data() {
    return {
      LineFlag: false, //如果是线路显示
      towerFlag: false, //如果杆塔显示
      mainLoading: false, //全局loading
      page: 1, // 当前页数
      towertitle: "", //杆塔名称
      lineLoading: false, //杆塔loading
      swiperLoading: false,
      terminalPhoto: [], //获取装置当前图片数据
      photoNum: 5,
      dateValue: "", //当前时间
      protocolInfo: "",
      nopicPath: require("@/assets/img/nopic.jpg"),
      typeRadio: -1, //类型选择
      allTreeFlag: true,
      roleName: "",
    };
  },
  watch: {
    treeSelectData: {
      handler(newVal, oldVal) {},
      deep: true,
      immediate: true,
    },
  },
  components: {
    sideBar,
    activeSiderBar,
    previewContain,
    carouselChart,
    parameterArea,
    morePicPreveiw,
  },
  computed: {
    treeSelectData() {
      return this.$store.state.currentData;
    },
  },
  created() {
    this.roleName = localStorage.getItem("userName");
    //this.treeSelectData = currentData;
    //获取当前时间
  },
  mounted() {
    this.mainLoading = true;
    setTimeout(() => {
      this.mainLoading = false;
    }, 1000);
  },
  methods: {
    getTypeRadio() {
      console.log(this.typeRadio);
      if (this.typeRadio == -1) {
        this.allTreeFlag = true;
      } else {
        this.allTreeFlag = false;
      }
    },
    getCurrentData(data) {
      console.log("执行父组件", this.treeSelectData);
      if (this.treeSelectData.dyValue) {
        console.log("电压");
        this.LineFlag = true;
        this.towerFlag = false;
        this.lineLoading = true;
        this.type = 1;
        this.$nextTick(() => {
          this.$refs.previewRef.getPicList(
            this.treeSelectData.id,
            this.type,
            this.page
          );
        });
      } else if (this.treeSelectData.dyLevelId) {
        console.log("线路");
        this.LineFlag = true;
        this.towerFlag = false;
        this.type = 2;
        console.log(this.treeSelectData);
        this.$nextTick(() => {
          this.$refs.previewRef.getPicList(
            this.treeSelectData.id,
            this.type,
            this.page
          );
        });
      } else {
        console.log("杆塔");
        this.LineFlag = false;
        this.towerFlag = true;
        this.terminalPhoto = [];
        this.protocolInfo = this.treeSelectData.protocol;
        console.log("asddddddddddddddddddddd", this.treeSelectData);
        this.towertitle = this.treeSelectData.name;
        this.$nextTick(() => {
          this.$refs.areaRef.getChannelList();
          this.$refs.areaRef.takepicFun();
        });
      }
    },
    getPhotoList(channelId, date, termId) {
      console.log(channelId, date, termId);
      this.swiperLoading = true;
      console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
      this.terminalPhoto = [];
      getTerminalPhotoListJoggle({
        channelid: channelId,
        time: date,
        terminalid: termId,
      })
        .then((res) => {
          console.log(res);
          if (res.data.list.length == 0) {
            this.terminalPhoto = [
              {
                path: this.nopicPath,
                termId: termId,
                mediatype: 0,
              },
            ];
          } else {
            this.terminalPhoto = res.data.list;
          }
          // let newDataList = [];
          // let current = 0;
          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
          //     if (i % this.photoNum !== 0 || i === 0) {
          //       if (!newDataList[current]) {
          //         newDataList.push([this.terminalPhoto[i]]);
          //       } else {
          //         newDataList[current].push(this.terminalPhoto[i]);
          //       }
          //     } else {
          //       current++;
          //       newDataList.push([this.terminalPhoto[i]]);
          //     }
          //   }
          // }
          // this.terminalPhoto = [...newDataList];
          // this.$nextTick(() => {
          //   this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
          // });
          this.$nextTick(() => {
            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
          });

          this.swiperLoading = false;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击图片列表执行函数
    jumpTowerPic(data) {
      console.log("我是从子组件过来的数据");
      console.log(data);
      this.$refs.morePicPreveiw_ref.display(data);
    },
  },
};
</script>
<style lang="less">
.realTimeMonitor {
  width: calc(100% - 0px);
  height: calc(100% - 12px);
  padding: 12px 0px 0px 0px;
  background: #ffffff;
  .monitor-container {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    .allSide {
      height: 100%;
      .typeList {
        width: 94%;
        margin: 0 auto;
        margin-top: 8px;
      }
    }
    .picListBox {
      display: flex;
      width: 100%;
      height: 100%;
      flex: 1;
      overflow: hidden;
      border-left: 1px solid #dddddd;
      .previewBox {
        display: flex;
        width: 100%;
        height: 100%;
        flex: 1;
      }
      .swiperBox {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        .title {
          height: 32px;
          padding-left: 12px;
          line-height: 32px;
          color: #fff;
          font-size: 12px;
          //background-color: #169e8cb0;
          background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);

          .el-breadcrumb {
            line-height: 32px;
            color: #fff !important;
            font-size: 14px;
            height: 32px;
            .el-breadcrumb__inner,
            .el-breadcrumb__separator {
              color: #fff !important;
            }
          }
        }
      }
      .parameterArea {
        width: 220px;
        padding: 0px 8px;
        border-left: 1px solid #dddddd;
        position: relative;
        overflow-y: auto;
      }
    }
  }
}
</style>