large-vue/src/views/screen/engineering/main.vue

<template>
  <div class="main-data data-engineering">
    <div class="left">
      <div class="left-cont" v-if="leftShow">
        <div class="left-top"
        @click="showDialog(1)"
        @mouseover="showDialog(1)">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">生产辅助基建项目情况</div>
          </div>
          <div class="components-item bg2">
            <unit-access :parest = "parest"
                         :num = "num"
                         :key="appOrg"></unit-access>
          </div>
          <!-- <monitoring v-if="menu === 1"></monitoring>
          <monitoring-video v-if="menu === 2"></monitoring-video> -->
        </div>
        <div class="left-top">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">现场监控接入情况</div>
          </div>
          <div class="components-item">
            <unit-access-to @chooseUnit="onChooseUnit" :app-org="appOrg"  :key="appOrg"></unit-access-to>
          </div>
          <!-- <monitoring v-if="menu === 1"></monitoring>
          <monitoring-video v-if="menu === 2"></monitoring-video> -->
        </div>
      </div>
    </div>
    <div class="middle flex-column">
      <Map @changeMenuFlag="changeMenuFlag" @transmit="transmit" @changeCurCompany="changeCurCompany" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>

      <!-- 返回按钮 -->
      <div class="bottom-area flex-row align-items-center space-between" v-if="menuFlag">
        <div class="bottom-left flex-row align-items-center">
          <div class="left-item">
            <el-cascader
              v-model="curCompany"
              :options="company"
              @change="handleCompanyChange"
              placeholder="单位"
              :show-all-levels="false"
              popper-class="dropDown"
              clearable
            >
              <template slot-scope="{ node, data }">
                <div style="display: flex; align-items: center">
                  <img
                    v-if="data.label == '山西省公司(本部)'"
                    src="../../../assets/images/main/tiaozhuanlouyu.png"
                    style="width: 15px; margin-right: 10px"
                  />
                  <span
                    v-else-if="data.value == '1A001' || data.value == '1A002' || data.value == '1A004' || data.value == '1A005'"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(255, 180, 74);
                    "
                  ></span>
                  <span>{{ data.label }}</span>
                </div>
              </template>
            </el-cascader>
          </div>
        </div>
        <div class="bottom-right">
          <img
            v-if="showBack"
            @click="onBack"
            src="@/assets/images/main/back.png"
            class="back"
          />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-cont">
        <div class="right-top">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">现场远程检查情况</div>
          </div>
          <div class="components-item">
            <current-area @chooseMonitor="onChooseMonitor" @choose="onChooseIssueList"
                          :monitorName="monitorName"
                          :app-org="appOrg"
                          :key="appOrg"></current-area>
          </div>
        </div>
      </div>
    </div>

    <!-- 监控区域 -->
    <div v-if="showCenter" class="dialog-2">
      <div class="dialog-center">
        <monitor-live
          v-if="showType === 1"
          @closeMonitor="onCloseMonitor"
          @chooseAllMonitor="onChooseAllMonitor"
           @issue="onChooseIssue"
          :monitorInfo="this.monitorInfo"
        ></monitor-live>
        <monitor-live-list
          v-if="showType === 2"
          @closeMonitor="onCloseMonitor1"
          @chooseMonitor="onChooseMonitor"
          :monitorInfo="this.monitorInfo"
          :monitorName="monitorName"
          :curCompanMonth="curCompanMonth"
        ></monitor-live-list>
      </div>
    </div>

    <!-- 监控区域 -->
    <div v-if="showC" class="dialog-2">
      <div class="dialog-center">
        <unit-project-dia
          v-if="showProject === 1"
          @close="onCloseProject()"
          :curCompanyear="curCompanyear"
          @choose="onChooseProject"
        ></unit-project-dia>
        <project-camera-dia
          v-if="showCamera === 1"
          @close="onCloseCamera"
          @choose="onChooseCamera"
        ></project-camera-dia>
        <camera-screen
          v-if="showCameraScreen === 1"
          @leave="onCloseCameraScreen"
       >
        </camera-screen>
        <issue-list-dia
          v-if="showIssue === 1"
          @close="onCloseIssue"
          @subIssue="onSubIssue"
          @dealIssue="onDealIssue"
          :monitorInfo="this.monitorInfo">
        </issue-list-dia>
        <issue-sub-dia
          v-if="showIssueSub === 1"
          @close="onCloseIssueSub"
          :monitorInfo="this.monitorInfo"
          :projectId="curCompanMonth"
          :imgUrl="this.imgUrl">
        </issue-sub-dia>
        <issue-deal-dia
          v-if="showIssueDeal === 1"
          @close="onCloseIssueDeal"
          :monitorInfo="this.monitorInfo"
           :getProList="getProList"
          >
        </issue-deal-dia>
      </div>
    </div>
<!--    弹出层-->
    <div
      :class="dialogType < 3 ? 'dialog' : 'dialog-r'"
      v-if="dialogShow"
      @click="closeDialog"
    >
      <unit-access-dialog
        v-if="dialogType === 1"
        :parest = "parest"
        :num = "num"
        :parest1 = "parest1"
        @choose="chooseRes"
        @chooseH="chooseHealth"
        @closeDialog="closeDialog"
      ></unit-access-dialog>
    </div>
  </div>
</template>

<script>
import IssueSubDia from './issueSubDia.vue'
import IssueDealDia from './issueDealDia.vue'
import CameraScreen from './cameraScreen.vue'
import IssueListDia from "./issueListDia.vue"
import ProjectCameraDia from "./projectCameraDia.vue";
import UnitProjectDia from "./unitProjectDia.vue";
import Province from "../map/province.vue";
import Map from "../map/map.vue";
import UnitAccess from "./unitAccess.vue";
import UnitAccessTo from "./unitAccessto.vue";
import CameraOnline from "./cameraOnline.vue";
import CurrentArea from "./currentArea.vue";
import Monitoring from "./monitoring.vue";
import VideoList from "./videoList.vue";
import MonitoringStatus from "./monitoringStatus.vue";
import MonitoringVideo from "./monitoringVideo.vue";
import MonitorLive from "./monitorLive.vue";
import MonitorLiveList from "./monitorLiveList.vue";
import company from "../data/company.json";
import TerminalDataDialog from "@/views/screen/official/terminalDataDialog.vue";
import CarWarningDialog from "@/views/screen/official/carWarningDialog.vue";
import CarStockDialog from "@/views/screen/logistics/car/carStockDialog.vue";
import unitAccessDialog from "@/views/screen/engineering/unitAccessDialog.vue";
import CarCost from "@/views/screen/official/carCost.vue";
import ResourceList from "@/views/screen/official/resourceList.vue";
import CarHealth from "@/views/screen/official/carHealth.vue";
import {
  getProjectNum,
  getProjectNumThisWeek,
  getProjectNumX,
  getProjectNumY,
  getProjectNumZ
} from '@/api/screen/service'
export default {
  name: "EngineeringMain",
  components: {
    CarHealth, ResourceList, CarCost,
    CarStockDialog, CarWarningDialog, TerminalDataDialog,
    IssueSubDia,
    IssueDealDia,
    CameraScreen,
    IssueListDia,
    ProjectCameraDia,
    UnitProjectDia,
    Province,
    Map,
    UnitAccess,
    UnitAccessTo,
    CameraOnline,
    CurrentArea,
    Monitoring,
    VideoList,
    MonitoringStatus,
    MonitoringVideo,
    MonitorLive,
    MonitorLiveList,
    unitAccessDialog,
  },
  props: {},
  data() {
    return {
      menuFlag: true,
      appOrg: "0000",
      num: 0,
      parest:[
        {name:"可研评审",num:0},{name:"初设评审",num:0},
        {name:"政府立项备案",num:0},{name:"土地手续",num:0},
        {name:"用地规划",num:0},{name:"工程规划",num:0},
        {name:"设计招标",num:0},{name:"施工招标",num:0},
        {name:"监理招标",num:0},{name:"施工许可",num:0},
      ],
      parest1:[
        {name:"基础施工",num:0},{name:"主体工程",num:0},
        {name:"室内外装修",num:0},{name:"室外工程",num:0},
      ],
      mapArr:[
        "1A003",
        "1B001",
        "1C001",
        "1D001",
        "1E001",
        "1F001",
        "1K001",
        "1L001",
        "1H001",
        "1M001",
        "1J001",
      ],
      list1: [],
      list2: [],
      imgUrl:'',
      curCompanyear:'',
      getProList:'',
      curCompanMonth:null,
      showRes:0,
      showC:false,
      showIssue:0,
      showIssueSub:0,
      showIssueDeal:0,
      showCameraScreen:0,
      showCamera:0,
      showProject:0,
      menu: 0,
      showCost:0,
      showHealth:0,
      leftShow: true,
      rightShow: true,
      dialogShow: false,
      dialogType: 0,
      showCenter: false,
      showType: 0, //实时监控
      curDeep: 1,
      showBack: false,
      showMap: true,
      showLocal: false,
      dataList: [
        {
          name: "接入单位数量",
          num: "56",
          unit: "个",
        },
        {
          name: "应接入项目数量",
          num: "56",
          unit: "个",
        },
        {
          name: "已接入项目数量",
          num: "56",
          unit: "个",
        },
        {
          name: "接入摄像头数量",
          num: "56",
          unit: "个",
        },
        {
          name: "接入摄像头在线率",
          num: "56",
          unit: "%",
        },
      ],
      monitorInfo: {},
      monitorName: '',
      curCompany: [],
      company: [
        {
          "value": "10001",
          "label": "国网山西省电力公司",
          "children": [
            {
              "value": "10001",
              "label": "山西省公司(本部)",
              "poi": [112.316448, 38.000045],
              "city": "山西省"
            },
            {
              "value": "1A001",
              "label": "国网营销服务中心",
              "poi": [112.36677, 37.756826],
              "city": "太原市"
            },
            {
              "value": "1A002",
              "label": "国网超高压变电分公司",
              "poi": [112.555937, 37.785564],
              "city": "太原市"
            },
            {
              "value": "1A004",
              "label": "国网电力科学技术研究院",
              "poi": [112.567029, 37.858831],
              "city": "太原市"
            },
            {
              "value": "1A005",
              "label": "国网山西省电力公司党校",
              "poi": [112.56677, 38.056826],
              "city": "太原市"
            }
          ]
        }
      ]
    };
  },
  created() {
    this.$nextTick(() => {
      this.getProjectNum();
      this.getProjectNumX();
      this.getProjectNumZ();
    });

  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    handleCompanyChange(e){
      this.$refs.map.getProject(e[1])
      if (!e[1]){
        this.transmit('0000')
        return
      }
      this.transmit(e[1])
    },
    transmit(appOrg){
      if (appOrg === "0000"){
        this.menuFlag = true
        this.curCompany = []
      }
      this.appOrg = appOrg
      this.getProjectNum();
      this.getProjectNumX();
    },
    changeMenuFlag(){
      this.menuFlag = false
    },
    changeCurCompany(){
      this.curCompany = ['10001', '10001']
      this.transmit('10001')
    },
    //前期审批数量
    getProjectNum() {
      getProjectNum(this.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.num = res.data;
        }
      });
    },
    getProjectNumX() {
      for (let i = 0; i < this.parest.length; i++){
        this.parest[i].num = 0
      }
      getProjectNumX(this.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const fetchedData = res.data;
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              this.parest[fetchedData[i].subdivision - 1].num = fetchedData[i].num;
            }
          }
          else {
            for (let i = 0; i < this.parest.length; i++){
              this.parest[i].num = 0
            }
          }
        }
      });
    },
    getProjectNumY() {
      for (let i = 0; i < this.parest1.length; i++){
        this.parest1[i].num = 0
      }
      getProjectNumY(this.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          const fetchedData = res.data;
          if (res.data.length > 0){
            for (let i = 0; i < res.data.length; i++) {
              this.parest1[fetchedData[i].subdivision-11].num= fetchedData[i].num;
            }
          }
          else {
            for (let i = 0; i < this.parest1.length; i++){
              this.parest1[i].num = 0
            }
          }
        }
      });
    },
    getProjectNumZ() {
      getProjectNumZ(this.mapArr).then((res) => {
        if (Number(res.code) === 200) {
          this.list1 = res.data.list1
          this.list2 = res.data.list2
          this.$refs.map.start();
        }
      });
    },
    chooseRes(){
      this.closeDialog()
      this.showC = true
      this.showRes = 1
    },
    chooseHealth(){
      this.closeDialog()
      this.showC = true
      this.showHealth = 1
    },
    onChooseUnit(f){
      this.curCompanyear = f;
      this.showC = true;
      this.showProject = 1;
    },
    onCloseRes(){
      this.showC = false
      this.showRes = 0
    },
    onCloseCost(){
      this.showC = false
      this.showCost = 0
    },
    onCloseHealth(){
      this.showC = false
      this.showHealth = 0
    },

    onChooseProject(e){
      this.curCompanMonth = e;
      this.showC = false
      this.showCenter = true;
      this.showType = 2;
    },
    onCloseProject(){
      this.showC = false;
      this.showProject = 0;
    },

    onChooseCamera(){
      this.showCameraScreen = 1;
      this.showCamera = 0;
    },
    onCloseCamera(){
      this.showProject = 1;
      this.showCamera = 0;
    },

    onCloseCameraScreen(){
      this.showCameraScreen = 0;
      this.showCamera = 1;
    },
    //入口
    onChooseIssue(t){
      this.imgUrl=t
      this.flag = 1
      this.showType = 0;
      this.showC = true;
      this.showProject=0
      this.showIssueSub = 1;
    },

    onChooseIssueList(){
      this.showC = true
      this.showIssue = 1
    },
    onCloseIssue(){
      this.showC = false
      this.showIssue = 0
    },

    //入口
    onSubIssue(){
      this.flag = 2
      this.showIssueSub = 1
      this.showIssue = 0
    },
    onDealIssue(u){
      this.getProList=u
      this.showIssueDeal = 1
      this.showIssue = 0
    },
    onCloseIssueSub(){
      this.showIssueSub = 0
      if (this.flag === 1){
        this.showC = false
        this.showCenter = false
        // this.showIssueSub=0
      }
      else if (this.flag === 2){
        this.showIssue = 1
      }
      else {

      }
      this.flag = 0
    },
    onCloseIssueDeal() {
      this.showIssueDeal = 0
      this.showIssue = 1
    },



    showDialog(type) {
      if (type === 1) {
        this.getProjectNumY();
        this.leftShow = false;
        this.rightShow = true;
      } else {
        this.rightShow = false;
        this.leftShow = true;
      }
      this.dialogShow = true;
      this.dialogType = type;
    },
    closeDialog() {
      this.leftShow = true;
      this.rightShow = true;
      this.dialogShow = false;
    },

    //关闭监控视频
    onCloseMonitor() {
      this.showCenter = false;
      this.showType = 0;
    },
  //关闭监控视频
  onCloseMonitor1() {
      this.showCenter = false;
      this.showC = true;
      this.showType = 0;
    },

    //显示列表
    onChooseAllMonitor() {
      this.showType = 2;
    },

    //选择视频列表
    onChooseMonitor(data) {
      this.showCenter = true;
      this.showType = 1;
      this.monitorInfo = data;
    },

    //点击地图事件
    onMapClick(e) {
      this.curDeep = e.deep;
      if (e.deep > 1) {
        this.showBack = true;
      } else {
        this.showBack = false;
      }
      //点击山西省本部
      if (e.name == "山西省公司(本部)") {
        this.showMap = false;
        this.showLocal = true;
        this.curCompany = ["10001", "10001"];
        this.appOrg = "10001";
      } else {
        this.showMap = true;
        this.showLocal = false;
        this.curCompany = e.curCompany;
      }
      //判断是否点击了子单位
      if (e.curCompany && e.curCompany.length > 0) {
        let appOrg = e.curCompany[e.curCompany.length - 1];
        this.appOrg = appOrg;
      }
    },

    //返回操作
    // onBack() {
    //   this.curDeep = 1;
    //   if (this.curDeep <= 1) {
    //     this.showBack = false;
    //     this.showMap = true;
    //     this.showLocal = false;
    //     this.curCompany = [];
    //   }
    //   this.appOrg = "0000";
    //   this.$refs.province.reloadMap(this.curDeep);
    // },

    //选择公司
    // handleCompanyChange(e) {
    //   console.log(e);
    //   if (e && e.length > 0) {
    //     if (e[1] == "10001") {
    //       this.showMap = false;
    //       this.showLocal = true;
    //       this.showBack = true;
    //     } else {
    //       this.showMap = true;
    //       this.showLocal = false;
    //     }
    //     let appOrg = e[e.length - 1];
    //     this.appOrg = appOrg;
    //   }
    //   if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
    //     this.showMap = true;
    //     this.showLocal = false;
    //     this.showBack = true;
    //     // return;
    //   }
    //   this.$refs.province.chooseUnit(e);
    // },
  },
};
</script>

<style lang="scss">
.data-engineering {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  // background-image: url("../../../assets/images/engineering/bg.jpg");
  // background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    margin: 125px 0 0 40px;
    width: 580px;
    .left-cont {
      width: 100%;
      height: 920px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: cover;
    }
    .components-item {
      width: 550px;
      height: 389px;
      background: url("../../../assets/images/main/components_mid_bg.png")
      no-repeat;
      background-size: cover;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
    }

    .left-top {
      // width: 550px;
      // height: 915px;
      // background: url("../../../assets/images/main/right_top_new.png") no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
  }
  .middle {
    //background: url('../../../assets/zhang/project_map.png') no-repeat center;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 125px 0 0 0px;
    position: relative;
    .bottom-area {
      width: 200px;
      position: absolute;
      right: 50px;
      left: 50px;
      bottom: 50px;

      .bottom-left {
        .left-item {
          width: 180px;
          height: 30px;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          input {
            background: rgba(255, 255, 255, 0);
            border: none;
            color: #00ffff;
          }
          .el-input__icon {
            color: #00ffff;
          }
        }
        .office {
          margin-left: 10px;
          width: 180px;
          height: 30px;
          line-height: 30px;
          padding-left: 15px;
          color: #898989;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          font-size: 14px;
        }
      }

      .bottom-right {
        .back {
          width: 34px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
    .menu-area {
      padding: 0 30px;
      .rate-area {
        width: 20%;
        position: relative;
        cursor: pointer;

        img {
          width: 100%;
        }
        .rate {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: absolute;
          top: 5px;
          left: 0;
          color: #fff;
          .rate-data {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            color: #00ffff;
            .data {
              font-size: 30px;
              font-family: "electronicFont";
            }
            .unit {
              font-size: 12px;
            }
          }
        }
        .desc {
          font-size: 12px;
          text-align: center;
          color: #00ffff;
        }
      }
    }
  }
  .right {
    margin: 125px 40px 0 0px;
    width: 580px;
    .right-cont {
      width: 100%;
      height: 920px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: cover;
    }
    .components-item {
      width: 550px;
      height: 849px;
      background: url("../../../assets/images/main/components_long_bg.png")
        no-repeat;
      background-size: cover;
      margin-left: 15px;
      overflow: hidden;
    }
    .right-top {
      // width: 553px;
      // height: 915px;
      // background: url("../../../assets/images/main/right_top_new.png") no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .right-bottom {
      // width: 553px;
      // height: 556px;
      // background: url("../../../assets/images/main/right_top_m.png") no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
  }
  .dialog {
    position: fixed;
    top: 125px;
    left: 40px;
    z-index: 10;
    width: 100%;
  }
  .dialog-r {
    position: fixed;
    top: 125px;
    right: 40px;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .dialog-2 {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }
  .img-area {
    height: 850px;
    .build {
      margin: 0 auto;
      width: 90%;
      height: auto;
      object-fit: contain;
    }
  }
  .cont-title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 331px;
      height: 32px;
    }
    .cont-title {
      font-size: 20px;
      font-weight: 900;
      font-family: "PingFangSC";
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -5px;
      color: #fff;
    }
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
}

.dropDown .el-cascader-panel{
  height: 150px !important;
}
</style>