large-vue/src/views/pad/official/main.vue

<template>
  <div class="main-data data-official">
    <div class="left">
      <div class="left-cont" v-if="leftShow">
        <div
          class="left-top"
          @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">
            <terminal-data :key="appOrg" :resourceData="resourceData" :carTypeNum="carTypeNum" :carActivationNum="carActivationNum" :carUseNum="carUseNum"></terminal-data>
          </div>
        </div>
        <div class="left-bottom"
             @mouseover="showDialog(2)"
        >
          <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">
            <car-stock :key="appOrg" :monitorData="monitorData"></car-stock>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <img src="@/assets/zhang/publicCar/officialCar.png" width="50" style="position: absolute;top: 125px;left: 20px;cursor: pointer">
      <MapTwo @transmit="transmit" @changeCurCompany="changeCurCompany" :mapData="mapData" ref="map"></MapTwo>
      <!-- 返回按钮 -->
      <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" v-if="rightShow">
        <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 bg3">
          <car-warning :key="appOrg" :manageTopHalf="manageTopHalf" :manageLastHalf="manageLastHalf" v-if="this.flag >= 2"></car-warning>
        </div>
      </div>
    </div>
    <!--弹出层-->
    <div
      :class="dialogType < 3 ? 'dialog' : 'dialog-r'"
      v-if="dialogShow"
    >
      <terminal-data-dialog
        v-if="dialogType === 1"
        :resourceData="resourceData" :carTypeNum="carTypeNum" :carActivationNum="carActivationNum" :carUseNum="carUseNum"
        @chooseX="chooseCost"
        @chooseY="chooseHealth"
        @closeDialog="closeDialog"
      ></terminal-data-dialog>
      <car-warning-dialog
        v-if="dialogType === 4"
        @choose="chooseCost"
        @closeDialog="closeDialog"
      ></car-warning-dialog>
      <car-stock-dialog
        v-if="dialogType === 2"
        :monitorData="monitorData"
        @chooseX="chooseOp('未带工单预警数', '未带工单报警')"
        @chooseY="chooseOp('超速预警数', '超速报警')"
        @chooseZ="chooseOp('节假日预警数', '节假日用车报警')"
        @closeDialog="closeDialog"
      ></car-stock-dialog>
    </div>

    <div v-if="showC" class="dialog-2">
      <div class="dialog-center">
        <resource-list
          v-if="showRes === 1"
          :op = "op"
          :total = "total"
          :dataList = "dataList"
          @close="onCloseRes"
          @handlePageChange="handlePageChangeZ"
        ></resource-list>
        <car-cost
          :dataList = "dataList"
          :total = "total"
          v-if="showCost === 1"
          @close="onCloseCost"
          @handlePageChange="handlePageChangeY"
        ></car-cost>
        <car-health
          :dataList = "dataList"
          :total = "total"
          v-if="showHealth === 1"
          @close="onCloseHealth"
          @handlePageChange="handlePageChangeX"
        ></car-health>
      </div>
    </div>
  </div>
</template>

<script>
import ResourceList from '@/views/screen/official/resourceList.vue'
import Province from "../map/province.vue";
import TerminalData from "./terminalData.vue";
import TerminalDataDialog from "./terminalDataDialog.vue";
import TerminalOnline from "./terminalOnline.vue";
import CarWarning from "./carWarning.vue";
import CarWarningDialog from "./carWarningDialog.vue";
import CarStock from "../logistics/car/carStock.vue";
import CarTerminal from "../logistics/car/carTerminal.vue";
import company from "@/views/screen/data/company.json";
import CarCost from '@/views/screen/official/carCost.vue'
import CarHealth from '@/views/screen/official/carHealth.vue'
import CarStockDialog from "@/views/screen/logistics/car/carStockDialog.vue";
import MapTwo from '@/views/pad/map/mapTwo.vue'
import {
  getCarDetail,
  getMonitor,
  getOperationManageLastHalf,
  getOperationManageTopHalf,
  getResource,
  getSelfCarNum, getWarnDetail
} from '@/api/screen/service'


export default {
  name: "OfficialMain",
  components: {
    MapTwo,
    CarHealth,
    CarCost,
    ResourceList,
    Province,
    TerminalData,
    TerminalOnline,
    CarWarning,
    CarStock,
    CarTerminal,
    TerminalDataDialog,
    CarWarningDialog,
    CarStockDialog,
  },
  data() {
    return {
      menuFlag: true,
      total: 0,
      dataList: [],
      mapData:[],
      flag: 0,
      carActivationNum:[],
      carUseNum:[],
      carTypeNum:[],
      resourceData:{},
      monitorData:{},
      manageTopHalf:{},
      manageLastHalf:{},
      op:'',
      showC:false,
      showRes:0,
      showCost:0,
      showHealth:0,
      leftShow: true,
      rightShow: true,
      dialogShow: false,
      dialogType: 1,
      curDeep: 1,
      showBack: false,
      showMap: true,
      showLocal: false,
      appOrg: "0000",
      alertType: null,
      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.resource();
    this.monitor();
    this.operationManage();
    this.getMapData()
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    handleCompanyChange(e){
      console.log(this.curCompany)
      if (!e[1]){
        this.transmit('0000')
        this.$refs.map.showBack = false
        return
      }
      this.$refs.map.showBack = true
      this.transmit(e[1])
    },

    changeCurCompany(){
      this.curCompany = ['10001', '10001']
      this.transmit('10001')
    },

    handlePageChangeX(page, pageSize){
      getCarDetail(this.appOrg, 1, pageSize, page).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.showC = true
          this.showHealth = 1
        }
      })
    },

    handlePageChangeY(page, pageSize){
      getCarDetail(this.appOrg, 0, pageSize, page).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.showC = true
          this.showCost = 1
        }
      })
    },

    handlePageChangeZ(page, pageSize){
      getWarnDetail(this.appOrg, this.alertType, pageSize, page).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.showC = true
          this.showRes = 1
        }
      })
    },

    transmit(appOrg){
      this.appOrg = appOrg
      if (appOrg === '0000'){
        this.curCompany = []
      }
      this.resource();
      this.monitor();
      this.operationManageTopHalf();
    },

    getMapData(){
      getSelfCarNum().then(res => {
        if (Number(res.code) === 200) {
          this.mapData = res.data
          this.$refs.map.start()
        }
      })
    },

    resource(){
      getResource(this.appOrg).then(res => {
        if (Number(res.code) === 200) {
          this.resourceData = res.data
          this.resourceData.cd = 5 - this.resourceData.totalCarNum.toString().length
          this.resourceData.totalCarNum = this.resourceData.totalCarNum.toString().padStart(5, '0');
          this.resourceData.percentageLack = (this.resourceData.totalCarNum !== 0) ? Math.round(((this.resourceData.totalCarNum - this.resourceData.establishmentsCarNum) / this.resourceData.totalCarNum) * 100) : 0;
          this.resourceData.percentagePosess = (this.resourceData.totalCarNum !== 0) ? Math.round((this.resourceData.establishmentsCarNum / this.resourceData.totalCarNum) * 100) : 0;
          this.carTypeNum = [
            {
              type: "商务车",
              num: this.resourceData.carNumOne
            },
            {
              type: "越野车",
              num: this.resourceData.carNumTwo
            },
            {
              type: "小轿车",
              num: this.resourceData.carNumThree
            },
            {
              type: "小型客车",
              num: this.resourceData.carNumFour
            },
            {
              type: "大型客车",
              num: this.resourceData.carNumFive
            }
          ]
          this.carUseNum = [
            {
              type: "企业用车",
              num: this.resourceData.enterpriseCarNum
            },
            {
              type: "企业负责人用车",
              num: this.resourceData.headCarNum
            }
          ]
          this.carActivationNum = [
            {
              type: "燃油汽车",
              num: this.resourceData.oilCarNum
            },
            {
              type: "新能源汽车",
              num: this.resourceData.newPowerCarNum
            }
          ]
        }
      })
    },
    monitor(){
      getMonitor(this.appOrg).then(res => {
        if (Number(res.code) === 200) {
          this.monitorData = res.data
          this.monitorData.percentageInstall = (this.monitorData.terminalTotal !== 0) ? Math.round((this.monitorData.terminalInstall / this.monitorData.terminalTotal) * 100) : 0;
          this.monitorData.percentageOnline = (this.monitorData.terminalTotal !== 0) ? Math.round((this.monitorData.terminalOnline / this.monitorData.terminalTotal) * 100) : 0;
        }
      })
    },
    operationManageTopHalf(){
      getOperationManageTopHalf(this.appOrg).then(res => {
        if (Number(res.code) === 200) {
          this.manageTopHalf = res.data
          this.flag++
        }
      })
    },
    operationManageLastHalf(){
      getOperationManageLastHalf().then(res => {
        if (Number(res.code) === 200) {
          this.manageLastHalf = res.data
          this.flag++
        }
      })
    },
    operationManage(){
      this.operationManageTopHalf()
      this.operationManageLastHalf()
    },


    chooseOp(title, alertType){
      this.op = title
      this.alertType = alertType
      getWarnDetail(this.appOrg, alertType, 10, 0).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.total = res.data.total
          this.showC = true
          this.showRes = 1
        }
      })
    },

    chooseRes(){
      this.closeDialog()
      this.showC = true
      this.showRes = 1
    },
    onCloseRes(){
      this.showC = false
      this.showRes = 0
    },

    chooseCost(){
      getCarDetail(this.appOrg, 0, 10, 0).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.total = res.data.total
          this.showC = true
          this.showCost = 1
        }
      })
    },
    onCloseCost(){
      this.showC = false
      this.showCost = 0
    },

    chooseHealth(){
      getCarDetail(this.appOrg, 1, 10, 0).then(res => {
        if (Number(res.code) === 200) {
          this.dataList = res.data.list
          this.total = res.data.total
          this.showC = true
          this.showHealth = 1
        }
      })
    },
    onCloseHealth(){
      this.showC = false
      this.showHealth = 0
    },

    showDialog(type) {
      if (type < 4) {
        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;
    },
    //点击地图事件
    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);
    },

  },
};
</script>


<style lang="scss">
.data-official {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  // background-image: url("../../../assets/images/official_car/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: 1000px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .components-item {
      width: 550px;
      height: 420px;
      background: url("../../../assets/images/main/components_mid_bg.png")
        no-repeat;
      background-size: 100% 100%;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
    }
    .components-item.bg2 {
      background: url("../../../assets/images/main/components_mid_bg2.png")
        no-repeat;
       background-size: 100% 100%;
    }
    .left-top {
      // width: 550px;
      // height: 444px;
      // background: url("../../../assets/images/service_new/left_top_2.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .left-bottom {
      // width: 550px;
      // height: 444px;
      // background: url("../../../assets/images/service_new/left_top_2.png")
      //   no-repeat;
      // background-size: cover;
    }
  }
  .middle {
    //background: url('../../../assets/zhang/public_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: 80px;

      .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;
        }
      }
    }
  }
  .right {
    margin: 125px 40px 0 0px;
    width: 580px;
    .right-cont {
      width: 100%;
      height: 1000px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .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;
    }
    .components-item.bg2 {
      background: url("../../../assets/images/main/components_mid_bg2.png")
        no-repeat;
      background-size: cover;
    }
    .components-item.bg3 {
      height: 920px;
      background: url("../../../assets/images/main/components_long_bg.png")
      no-repeat;
      background-size: 100% 100%;
    }
    .right-top {
      // width: 550px;
      // height: 444px;
      // background: url("../../../assets/images/service_new/left_top_2.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .right-bottom {
      // width: 550px;
      // height: 444px;
      // background: url("../../../assets/images/service_new/left_top_2.png")
      //   no-repeat;
      // background-size: cover;
    }
  }

  .cont-title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 284px;
      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;
    }
  }

  .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);
  }

  .build {
    margin: 0 auto;
    width: 90%;
    height: auto;
    object-fit: contain;
  }

  ::-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>