代码提交

src/components/layout/header.vue

@@ -1,50 +1,25 @@
 <template>
   <div
     id="headers-box"
-    
   >
     <div id="headers">
       <div class="left">
-        <div class="home" v-if="this.$route.path == '/'" @click="goback">
-          <img src="@/assets/newimgs/shouye.png" alt="" style="width:19px;height:18px;margin-left: 15px;">
-          <p style="color:#ffffff;margin-left: 6px;height:18px;">首页</p>
-        </div>
-        <div class="back" v-if="this.$route.path != '/'" @click="goPage"></div>
-        <div class="time">
-          <el-date-picker
-            v-model="timeVal"
-            type="date"
-            placeholder="选择日期">
-          </el-date-picker>
-        </div>
-        <div class="search" v-show="searchShow1">
-          <el-input
-            placeholder="查询"
-            prefix-icon="el-icon-search"
-            v-model="searchVal">
-          </el-input>
-        </div>
-        <div class="search1" v-show="!searchShow1">
-          侵华日军南京大屠杀遇难同胞纪念馆
-        </div>
+       
       </div>
       <div class="right">
-        <div class="xianchang">
-          <img src="@/assets/newimgs/xianchang.png" alt="" style="width:138px;height:34px;margin-left: 15px;cursor: pointer;" @click="handle()">
+        <div v-if="this.$route.path == '/'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/close.png" style="width:25px;height:27px;cursor: pointer;"/>|</div>
+        <div v-if="this.$route.path != '/'" style=" width: 10%;display: flex;justify-content: space-between;align-items: center;"><img src="../../assets/newbanImg/fanhui.png" style="width:31px;height:26px;cursor: pointer;" @click="goHome"/>|</div>
+        <img src="../../assets/newbanImg/user.png" style="width:25px;height:25px"/>|
+        <div class="date">
+          <div class="time" style="font-size:20px">18:30:52</div>
+          <div class="riqi" style="font-size:12px">2021-3-3</div>
+        </div>|
+        <div class="tianqi">
+          <img src="../../assets/weather/Cloudy .png" style="width:32px;height:32px"/>
+          <div class="tem">
+          <div style="font-size:20px">25℃</div>
+          <div style="font-size:12px">15-25</div>
         </div>
-        <div class="company">
-          <img src="@/assets/newimgs/人员.png" alt="" style="width:29px;height:29px;margin-left: 15px;">
-          <el-select v-model="companyVal" placeholder="请选择">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </div>
-        <div class="news">
-          <img src="@/assets/newimgs/消息.png" alt="" style="width:27px;height:32px;">
         </div>
       </div>
     </div>
@@ -65,7 +40,6 @@ export default {
       default: false,
     },
   },
-  // props:['htStatus'],
   
   data() {
     return {
@@ -101,7 +75,6 @@ export default {
   methods: {
     /** 返回上一页 */
     goPage() {
-      console.log(this.htStatus ,'this.htStatus ');
       if(this.htStatus == 1 ){
         this.$router.push('/');
       }else{
@@ -116,7 +89,7 @@ export default {
         this.dateWeek = this.weekday[new Date().getDay()];
       }, 1000);
     },
-    goback() {
+    goHome() {
       this.$router.push("/");
     },
     handle(){
@@ -142,129 +115,43 @@ $box-width: 100%;
 }
 #headers-box {
   width: 100%;
-  background: url("../../assets/up1.png") no-repeat;
+  height: 149px;
+  background: url("../../assets/newbanImg/bgTop.png") no-repeat;
   background-size: 100% 100%;
   z-index: 999;
+  position: absolute !important;
 }
 #headers {
   width: 100%;
-  height: 76px;
-  background: url("../../assets/newimgs/dingbu.png") no-repeat top center;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
+  height: 60%;
   padding: 5px 10px;
   box-sizing: border-box;
-  .left{
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    .home{
-      width: 98px;
-      height: 34px;
-      background: url("../../assets/newimgs/首页-框.png") no-repeat;
-      background-size: 100% 100%;
   display: flex;
   align-items: center;
-      cursor: pointer;
-    }
-    .back{
-      width: 98px;
-      height: 34px;
-      background: url("../../assets/newimgs/返回.png") no-repeat;
+  justify-content: space-between;
+  .left{
+    height: 39px;
+    width: 603px;
+     background: url("../../assets/newbanImg/homeBg.png") no-repeat;
      background-size: 100% 100%;
-      cursor: pointer;
-    }
-    .time{
-      margin-left: 5px;
-      ::v-deep .el-date-editor{
-        width: 176px;
-        height: 34px;
-        background: url("../../assets/newimgs/查询-框.png") no-repeat;
-        background-size: 100% 100%;
-        .el-input__prefix{
-          margin-left: 10px;
-        }
-      }
-      ::v-deep .el-input__inner{
-        height: 34px;
-        border: none;
-        color: #ffffff;
-        margin-left: 10px;
-      }
-      ::v-deep .el-input__icon {
-          line-height: 35px;
-      }
-    }
-    .search{
-      ::v-deep .el-input{
-        width: 176px;
-        height: 34px;
-        margin-left: 5px;
-        background: url("../../assets/newimgs/查询-框.png") no-repeat;
-        background-size: 100% 100%;
-        .el-input__inner{
-          border: none;
-          height: 34px;
-          margin-left: 10px;
-        }
-        .el-input__prefix{
-          margin-left: 10px;
-        }
-        .el-input__icon {
-          line-height: 34px;
-        }
-      }
-    }
-    .search1{
-      color:#ffffff;
-      margin-top: 1.5%;
-     height: 52%;
-     ::v-deep .el-input{
-        width: 176px;
-        height: 34px;
-        margin-left: 5px;
-        background: url("../../assets/newimgs/查询-框.png") no-repeat;
-        background-size: 100% 100%;
-        .el-input__inner{
-          border: none;
-          height: 34px;
-          margin-left: 10px;
-        }
-        .el-input__prefix{
-          margin-left: 10px;
-        }
-        .el-input__icon {
-          line-height: 34px;
-        }
-      }
-    }
   }
   .right{
+    width: 20%;
+    height: 60%;
     display: flex;
-    flex-flow: row nowrap;
-    .company{
-      width: 292px;
-      height: 34px;
-      background: url("../../assets/newimgs/公司选择框.png") no-repeat;
+    justify-content: space-between;
+    align-items: center;
+    color:#ffffff;
+    .date{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+    }
+    .tianqi{
+      width: 22%;
     display: flex;
     align-items: center;
-      ::v-deep .el-select{
-        width: 245px;
-        .el-input__inner {
-          border: none;
-          color: #ffffff;
-        }
-      }
-    }
-    .news{
-      width: 54px;
-      height: 34px;
-      background: url("../../assets/newimgs/圆角矩形.png") no-repeat;
-      background-size: 100% 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    justify-content: space-between;
     }
   }
 }

src/views/land/child/index.vue

@@ -1444,7 +1444,7 @@
       </Center>
     </div>
     <div class="selectModel">
-      <div
+      <!-- <div
         :class="{ active: routerActive == index }"
         class="selectbtn"
         v-for="(item, index) in selectArr"
@@ -1453,7 +1453,7 @@
         @click="handleSelect(index)"
       >
         {{ item }}
-      </div>
+      </div> -->
     </div>
     <transition name="homeleave">
       <!-- <div class="smallmap" v-if="homeActive" @click="hanldetoukui()">
@@ -1513,6 +1513,14 @@
         style="top: 30px"
       ></pdf>
     </div>
+     <div class="componentShow" v-if="modelOthers">
+      <keep-alive>
+        <component
+          :is="componentShow"
+          :popStatus="popStatus"
+        ></component>
+      </keep-alive>
+    </div>
   </div>
 </template>
   
@@ -1528,6 +1536,7 @@ import BasicBox from "@/components/BasicBox";
 import Center from "../../center";
 import vueSeamlessScroll from "vue-seamless-scroll";
 import pdf from "vue-pdf";
+import modelPop from "../../pop/model"
 import {
   getSiteInfo,
   getEnvironmentInfo,
@@ -1540,6 +1549,9 @@ export default {
   mixins: [drawMixin],
   data() {
     return {
+      popStatus:'',
+      modelOthers: false,
+      componentShow: "",
       blueQiuShow:true,
       redQiuShow:false,
       redQiuShow1:false,
@@ -2054,7 +2066,7 @@ export default {
       // unityUrl:"https://my.matterportvr.cn/show/?m=hEnMfFnid82&sr=-3.04&ss=32",
       unityUrl: "",
       toukuiShow: false,
-      unityChange: 0,
+      unityChange: 3,
       titleData: "",
       valueData: "38",
       backgroundPic: {
@@ -2098,6 +2110,7 @@ export default {
     Center,
     vueSeamlessScroll,
     pdf,
+    modelPop,
   },
   watch: {
     unityChange: {
@@ -2107,17 +2120,35 @@ export default {
           this.threeUrl =
             "http://221.226.19.85:10133/bdz_360_22_12_8/index.html";
           this.searchHandle("2");
-        } else {
+        } else if (newV == 1) {
           this.unityUrl = "/htWeb/unity.html?src=2";
           this.threeUrl =
             "http://221.226.19.85:10133/bdz_360_22_11_11/index.html";
           this.searchHandle("1");
+        }else{
+          this.unityUrl = "/htWeb/unity.html?src=3";
         }
       },
       immediate: true,
     },
   },
   mounted() {
+    //切换模型
+     let that = this;
+     window.addEventListener('message', function (e) {
+      var res = e.data;
+      if (res.val != null) {
+        if (res.val == 'XG') {
+           that.modelOthers = true
+           that.componentShow = 'modelPop'
+          that.popStatus = 'XG'
+        }else if (res.val == 'JG') {
+          that.popStatus = 'JG'
+           that.modelOthers = true
+           that.componentShow = 'modelPop'
+        }
+       }
+      })
     this.init();
     // //查询实时记录
     window.setInterval(() => {
@@ -2766,24 +2797,27 @@ export default {
       this.tableShow = true;
     },
     hanldetoukui() {
-      this.blueQiuShow = true
-      this.redQiuShow = false
-      this.redQiuShow1 = false
-      this.redQiuShow2 = false
-      window.setTimeout(()=>{
-      this.redQiuShow = true
-      this.blueQiuShow = false
-      },29000)
-      window.setTimeout(()=>{
-      this.redQiuShow1 = true
-      this.redQiuShow = false
-      },43000)
-      window.setTimeout(()=>{
-      this.redQiuShow2 = true
-      this.redQiuShow1 = false
-      },50000)
-      this.mapShow = true;
-      this.menusActive = null;
+       this.componentShow = ''
+       this.modelOthers = false
+      // this.unityUrl = "/htWeb/unity.html?src=3";
+      // this.blueQiuShow = true
+      // this.redQiuShow = false
+      // this.redQiuShow1 = false
+      // this.redQiuShow2 = false
+      // window.setTimeout(()=>{
+      // this.redQiuShow = true
+      // this.blueQiuShow = false
+      // },29000)
+      // window.setTimeout(()=>{
+      // this.redQiuShow1 = true
+      // this.redQiuShow = false
+      // },43000)
+      // window.setTimeout(()=>{
+      // this.redQiuShow2 = true
+      // this.redQiuShow1 = false
+      // },50000)
+      // this.mapShow = true;
+      // this.menusActive = null;
     },
     hanldetoukuifalse() {
       this.toukuiShow = false;
@@ -3602,6 +3636,9 @@ export default {
   .host-body {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-end;
   }
 }
 .btn {
@@ -3625,7 +3662,7 @@ export default {
 }
 .main {
   width: 100%;
-  height: calc(100% - 76px);
+  height: 90%;
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
@@ -4486,5 +4523,19 @@ h1 {
 .attentionInfo::-webkit-scrollbar {
   display: none;
 }
+//弹窗样式
+  .componentShow{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    // z-index: 111;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background: hsla(209, 88%, 54%, 0.2);
+    backdrop-filter: blur(5px);
+  }
 </style>
   

src/views/land/index.vue

@@ -5,7 +5,7 @@
             'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
     }"> -->
 
-    <iframe
+    <!-- <iframe
       name="myframe"
       frameborder="0"
       width="100%"
@@ -14,78 +14,60 @@
       ref="iframe"
       :src="videoUrl"
       :key="videoUrl"
-    ></iframe>
+    ></iframe> -->
     <div class="bg" @contextmenu.prevent="show()">
-      <!-- <div class="body-left" @contextmenu.prevent="show()"></div>
-      <div class="body-right" @contextmenu.prevent="show()"></div> -->
-      <div class="body-bottom" @contextmenu.prevent="show()"></div>
-      <dv-loading v-if="loading">Loading...</dv-loading>
+      <!-- <div class="body-bottom" @contextmenu.prevent="show()"></div>
+      <dv-loading v-if="loading">Loading...</dv-loading> -->
 
-      <div v-else class="host-body">
-        <!-- <headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative" :isShow="false"/> -->
+      <!-- <div v-else class="host-body"> -->
         <headerIndex
-          style="position: relative"
-          :searchShow="searchShow"
+          style="position: "
         />
-        <div class="main" style="margin-top: -100px">
-          <div class="footer-nav">
-            <div class="baseBlock" v-for="(item,index) in infodata" :key="index" @click="goPage(7)">
-              <div style="width:100%;display:flex;flex-flow:column nowrap;align-items: center;">
-                <img :src="item.pic" alt="" style="width:34px;height:34px">
-                <p style="width:100%;margin-top:5px;color:#ffffff;font-size:14px;text-align: center;">{{item.text}}</p>
+        <div class="mains">
+          <div class="leftContent">
+            <div class="kehuCount">
+              <div style="color:#fff;font-size:12px">客户总数</div>
+              <div style="color:#fff;font-size:25px;font-weight: 700;">{{totalCustomer}}&nbsp;&nbsp;<span style="color:#fff;font-size:12px">个</span></div>
+            </div>
+            <div class="countInfor">
+              <div class="content" v-for="(item,index) in leftInfodata" :key="index">
+                <div style="width:100px;height:100px" :id="'echarts'+ index"></div>
+                <!-- <img :src="item.pic" style="width:30px;height:30px"/> -->
+                <div class="text">
+                  <div style="color:#fff;font-size:12px">{{item.text}}</div>
+                  <div style="color:#fff;font-size:24px;font-weight: 300;">{{item.num}}</div>
+                </div>
+                <div style="color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%">{{item.unit}}</div>
+              </div>
             </div>
-            <div style="width:100%;display: flex;flex-wrap: wrap;justify-content: flex-end;">
-            <p style="width:100%;word-wrap:break-word; word-break:break-all;font-size: 25px;text-align: right;">{{item.num}}</p>
-            <p style="font-size:14px;top:10px;text-align: right;position: relative;">{{item.unit}}</p>
           </div>
 
-              
+          <div class="rightContent">
+            <div class="kehuCount">
+              <div style="color:#fff;font-size:12px">主要总数</div>
+              <div style="color:#fff;font-size:25px;font-weight: 700;">{{totalTransformationSite}}&nbsp;&nbsp;<span style="color:#fff;font-size:12px">个</span></div>
             </div>
-            
+            <div class="countInfor">
+              <div class="content" v-for="(item,index) in rightInfodata" :key="index">
+                 <div style="width:100px;height:100px" :id="'rightEcharts'+ index"></div>
+                <!-- <img :src="item.pic" style="width:32px;height:32px"/> -->
+                <div class="text">
+                  <div style="color:#fff;font-size:12px">{{item.text}}</div>
+                  <div style="color:#fff;font-size:24px;font-weight: 300;">{{item.num}}</div>
                 </div>
-
-          <div class="rightModel">
-            <div class="search-middle">
-              <ul>
-                <li>
-                  <img
-                    src="../../assets/green.png"
-                    alt=""
-                    style="vertical-align: middle"
-                  /><span style="margin: 0 5%; color: #103a55">正常</span>
-                  <div class="liBox" style="background-color: green">1</div>
-                </li>
-                <li>
-                  <img
-                    src="../../assets/orange.png"
-                    alt=""
-                    style="vertical-align: middle"
-                  /><span style="margin: 0 5%; color: #103a55">预警</span>
-                  <div class="liBox" style="background-color: orange">0</div>
-                </li>
-                <li>
-                  <img
-                    src="../../assets/red.png"
-                    alt=""
-                    style="vertical-align: middle"
-                  /><span style="margin: 0 5%; color: #103a55">故障</span>
-                  <div class="liBox" style="background-color: red">0</div>
-                </li>
-              </ul>
+                <div style="color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%">{{item.unit}}</div>
               </div>
-            <!-- <div class="rightShow" >
-            <BasicBox5 class="basicInfo" :title="tit" :dataSource="workListData" v-if="basicInfoShow"></BasicBox5>
-            <dialogComponent v-if="Visible" @transfer="getClose"  @jdNameData="getjdName" @jdNameDataClick="getjdNameClick" ref="dialog" class="dialogN">
-            
-             </dialogComponent>
-            </div> -->
-
-            <!-- <BasicBox title="房地项目类型统计" :dataSource="false">
-              <template slot="top">
-                <Chart />
-              </template>
-
-            </BasicBox> -->
+            </div>
+          </div>
+        <!-- </div> -->
+        <div class="yellowIcon">
+          <div style="width:288px;height:47px;" v-show="popShow" @mouseover="popInfor"  @mouseleave="popInforLeave"></div>
+          <img src="@/assets/newbanImg/title.png" style="width:288px;height:47px;cursor: pointer;z-index:9999" @mouseover="popInfor"  @mouseleave="popInforLeave" v-show="!popShow"/>
+          <img src="@/assets/newbanImg/yellowIcon.png" style="width:160px;height:161px;cursor: pointer;" @click="intoMain"/>
+        </div>
+        <div v-show="popShow" id="pop">
+          <div  class="mask">
+           <img src="@/assets/newbanImg/contentPop.png" style="width:288px;height:275px;" @mouseover="popInfor"  @mouseleave="popInforLeave"/>
           </div>
         </div>
       </div>
@@ -112,15 +94,18 @@ export default {
   mixins: [drawMixin],
   data() {
     return {
-      infodata:[
-        {pic:require('@/assets/newimgs/客户总数.png'),num:'397',text:'客户总数',unit:'个',name:'totalCustomer'},
-        {pic:require('@/assets/newimgs/变电站总数.png'),num:'447',text:"变电站总数",unit:'座',name:'totalSite'},
-        {pic:require('@/assets/newimgs/主变总数.png'),num:'379',text:"主变总数",unit:'台',name:'totalTransformationSite'},
-        {pic:require('@/assets/newimgs/主变总容量.png'),num:'493405',text:"主变总容量",unit:'kVA',name:'transformationCapacity'},
-        {pic:require('@/assets/newimgs/变电站总数.png'),num:'28502 ',text:"实时负荷",unit:'kW',name:'realTimeLoad'},
-        {pic:require('@/assets/newimgs/租日总电量.png'),num:'614730',text:"昨日总电量",unit:'kWh',name:'yesterdayTotalElectricity'},
-        {pic:require('@/assets/newimgs/待办工单总数.png'),num:'0',text:"代办工单总数",unit:'条',name:'workOrder'},
-        {pic:require('@/assets/newimgs/告警总数.png'),num:'0',text:"告警总数",unit:'条',name:'warningNum'},
+      totalCustomer:'',//客户总数
+      totalTransformationSite:'',//主要总数
+      popShow:false,
+      leftInfodata:[
+        {pic:require('@/assets/newbanImg/biandianzhan.png'),num:'',text:'变电站总数',unit:'座',name:'totalSite'},
+        {pic:require('@/assets/newbanImg/daibangongdan.png'),num:'',text:"代办工单总数",unit:'条',name:'workOrder'},
+        {pic:require('@/assets/newbanImg/jinggao.png'),num:'',text:"告警总数",unit:'条',name:'warningNum'},
+      ],
+      rightInfodata:[
+        {pic:require('@/assets/newbanImg/zhuyao.png'),num:'',text:'主要总容量',unit:'kVA',name:'transformationCapacity'},
+        {pic:require('@/assets/newbanImg/shishifuhe.png'),num:'',text:"实时负荷",unit:'kW',name:'realTimeLoad'},
+        {pic:require('@/assets/newbanImg/zuori.png'),num:'',text:"昨日总电量",unit:'kWh',name:'yesterdayTotalElectricity'},
       ],
       Visible: false,
       basicInfoShow: true,
@@ -346,46 +331,40 @@ export default {
             that.searchShow = false
           }
     })
-    // getHomePageInfo({
-    // }).then((res)=>{
-    //   let realTimeLoad = res.data.data.realTimeLoad.toString();
-    //   let realData = realTimeLoad.substring(0,realTimeLoad.indexOf(".")+3)
-    //       for(var key in res.data.data){
-    //           for (let i = 0; i < this.infodata.length; i++) {
-    //             if (key == this.infodata[i].name) {
-    //               this.infodata[i].num = res.data.data[key]
-    //               this.infodata[4].num = realData
-    //             }
-    //           }
-    //     }
-    // })
   
     window.setInterval(()=>{
       getHomePageInfo({
     }).then((res)=>{
+      this.totalCustomer = res.data.data.totalCustomer
+      this.totalTransformationSite = res.data.data.totalTransformationSite
       let realTimeLoad = res.data.data.realTimeLoad.toString();
       let realData = realTimeLoad.substring(0,realTimeLoad.indexOf(".")+3)
           for(var key in res.data.data){
-              for (let i = 0; i < this.infodata.length; i++) {
-                if (key == this.infodata[i].name) {
-                  this.infodata[i].num = res.data.data[key]
-                  this.infodata[4].num = realData
+              for (let i = 0; i < this.leftInfodata.length; i++) {
+                if (key == this.leftInfodata[i].name) {
+                  this.leftInfodata[i].num = res.data.data[key]
+                }
+              }
+              for (let i = 0; i < this.rightInfodata.length; i++) {
+                if (key == this.rightInfodata[i].name) {
+                  this.rightInfodata[i].num = res.data.data[key]
+                  this.rightInfodata[1].num = realData
                 }
               }
         }
     })
     },3000)
-    
+    this.leftInfodata.forEach((item,index) => {
+      if (index != null) {
+        this.leftInitEcharts('echarts' + index)
+      }
+    });
+    this.rightInfodata.forEach((item,index) => {
+      if (index != null) {
+        this.rightInitEcharts('rightEcharts' + index)
+      }
+    });
   },
-  //   sockets:{
-  //     connect(){
-  //       this.id = this.$socket.id;
-  //       //监听connect事件
-  //     },
-  //     message(data){  //监听message事件，方法是后台定义和提供的
-  //       console.log(data);
-  //     }
-  //   },
   beforeDestroy() {
     clearInterval(this.timing);
   },
@@ -398,7 +377,150 @@ export default {
     },
   },
   methods: {
-   
+    leftInitEcharts(id){
+      console.log(id,'id');
+      var imageUrl = '';
+      if (id == 'echarts0') {
+        imageUrl = '/newbanImg/biandianzhan.png'
+      }else if (id == 'echarts1') {
+        imageUrl = '/newbanImg/daibangongdan.png'
+      }else if (id == 'echarts2') {
+        imageUrl = '/newbanImg/jinggao.png'
+      }
+      var myChart = this.$echarts.init(document.getElementById(id));
+      var option = {
+                  angleAxis: {
+                      max: 100,
+                      // 隐藏刻度线
+                      show: false,
+                      startAngle: 90
+                  },
+                  radiusAxis: {
+                      type: 'category',
+                      show: true,
+                      axisLabel: {
+                          show: false,
+                      },
+                      axisLine: {
+                          show: false,
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                  },
+                  polar: {
+                      radius: '100%' //图形大小
+                  },
+                  graphic: {
+                    elements:[
+                          {
+                            type: 'image',
+                              left: 'center',
+                              top: 'middle',
+                              style: {
+                                  image: imageUrl,
+                                  width: 25,
+                                  height: 25,
+                              }
+                         }
+                    ]
+                          },
+                  series: [{
+                      type: 'bar',
+                      data: ['56.77'],
+                      showBackground: true,
+                      roundCap: true,
+                      // backgroundStyle: {
+                      //     color: 'rgba(64, 76, 76, 1)',
+                      // },
+                      coordinateSystem: 'polar',
+                      barWidth: 2,
+                      itemStyle: {
+                          normal: {
+                              color: 'rgb(24,234,253)'
+                          }
+                      },
+                  }]
+              }
+              myChart.setOption(option);
+    },
+     rightInitEcharts(id){
+      console.log(id,'id');
+      var imageUrl = '';
+      if (id == 'rightEcharts0') {
+        imageUrl = '/newbanImg/zhuyao.png'
+      }else if (id == 'rightEcharts1') {
+        imageUrl = '/newbanImg/shishifuhe.png'
+      }else if (id == 'rightEcharts2') {
+        imageUrl = '/newbanImg/zuori.png'
+      }
+      var myChart = this.$echarts.init(document.getElementById(id));
+      var option = {
+                  angleAxis: {
+                      max: 100,
+                      // 隐藏刻度线
+                      show: false,
+                      startAngle: 90
+                  },
+                  radiusAxis: {
+                      type: 'category',
+                      show: true,
+                      axisLabel: {
+                          show: false,
+                      },
+                      axisLine: {
+                          show: false,
+                      },
+                      axisTick: {
+                          show: false
+                      },
+                  },
+                  polar: {
+                      radius: '100%' //图形大小
+                  },
+                  graphic: {
+                    elements:[
+                          {
+                            type: 'image',
+                              left: 'center',
+                              top: 'middle',
+                              style: {
+                                  image: imageUrl,
+                                  width: 25,
+                                  height: 25,
+                              }
+                         }
+                    ]
+                          },
+                  series: [{
+                      type: 'bar',
+                      data: ['56.77'],
+                      showBackground: true,
+                      roundCap: true,
+                      // backgroundStyle: {
+                      //     color: 'rgba(64, 76, 76, 1)',
+                      // },
+                      coordinateSystem: 'polar',
+                      barWidth: 2,
+                      itemStyle: {
+                          normal: {
+                              color: 'rgb(24,234,253)'
+                          }
+                      },
+                  }]
+              }
+              myChart.setOption(option);
+    },
+    intoMain(){
+      this.$router.push("landChildren");
+    },
+    popInfor(){
+        // // 鼠标在盒子内移动后盒子变粉
+            this.popShow = true
+    },
+    popInforLeave(){
+      this.popShow = false
+    },
     guid() {
         return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
             var r = Math.random() * 16 | 0,
@@ -910,7 +1032,141 @@ export default {
   background-image: url("../../assets/bt-02.png");
   cursor: pointer;
 }
+.bg{
+  height: 1920px;
+  width: 1080px;
+  background: url("../../assets/newbanImg/mapBeijing.png") no-repeat !important;
+  background-size: 100% 100% !important;
+  display: flex;
+    flex-wrap: wrap;
+    align-content: space-around;
+  .mains{
+    width: 100%;
+    height: calc(100% - 149px);
+    display: flex;
+    padding: 0 10px;
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: flex-end;
+    .leftContent{
+      width: 20%;
+      height: 85%;
+      padding: 0 10px;
+      .kehuCount{
+        height: 15%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        padding-left: 10%;
+      }
+      .countInfor{
+        height: calc(100% - 40%);
+        width: 55%;
+        .content{
+          height: 25%;
+          width: 100%;
+           display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .text{
+              height: 50%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+        }
+        }
+      }
       
+    }
+    .rightContent{
+      width: 20%;
+      height: 85%;
+      padding: 0 10px;
+      display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+      .kehuCount{
+        height: 15%;
+        width: 55%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
+      .countInfor{
+        height: calc(100% - 40%);
+        width: 67%;
+        .content{
+          height: 25%;
+          width: 100%;
+           display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .text{
+              height: 50%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+        }
+        }
+      }
+    }
+    .yellowIcon{
+        position: absolute !important;
+        top: 28%;
+        left: 36%;
+        z-index: 999;
+        animation: movepoint 1s infinite;
+        display: flex;
+       flex-direction: column;
+      }
+      #pop{
+        position: absolute !important;
+        top: 6%;
+        left: 36%;
+        display: inline-block;
+        overflow: hidden;
+        width:288px;
+        height:275px;
+        .mask{
+          position: absolute;
+            width: 288px;
+            height: 275px;
+            top: 0;
+            left: 0;
+            z-index:999
+          }
+      }
+      @keyframes movepoint {
+
+      0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(5px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+
+  }
+  .mask{
+        animation: animate 3s linear;
+        overflow: hidden;
+    }
+    @keyframes animate{
+        from {
+          height: 0px;
+          top : 230px;
+        }
+        to {
+          height: 275px;
+          top : 0px;
+        }
+    }
+
+   }
+}
 .back-button a:hover {
   background-image: url("../../assets/bt-002.png");
 }

src/views/pop/model.vue

@@ -0,0 +1,62 @@
+<template>
+  <div style="width:100%;height:100%">
+      <iframe
+          name="myframe"
+          frameborder="0"
+          width="100%"
+          height="100%"
+          ref="iframe"
+          :src="unityUrl"
+          allowfullscreen
+        ></iframe>
+        <div class="title">
+            {{text}}
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'model',
+    props:{
+            popStatus:{
+                type: String,
+        }
+},
+data(){
+    return{
+        unityUrl: "",
+        text:'',
+    }
+},
+mounted(){
+    if (this.popStatus == 'XG') {
+        this.unityUrl = "/htWeb/unity.html?src=1";
+        this.text = '纪念馆-新馆'
+    }else{
+        this.unityUrl = "/htWeb/unity.html?src=2";
+        this.text = '纪念馆-久馆'
+    }
+},
+methods:{
+
+}
+}
+</script>
+
+<style lang="scss" scoped>
+.title{
+    position: absolute;
+    width: 181px;
+    height: 47px;
+    background: url("../../assets/newbanImg/titlebeijing.png") no-repeat;
+    background-size: 100% 100%;
+    top: 17%;
+    left: 25%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 1%;
+}
+</style>