123

src/components/bigData/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="mot_page">
-    <div class="mot_head">放芯查数据展示平台</div>
+  <div :class="['mot_page',skin]">
+    <div class="mot_head">疫苗企业数据展示平台</div>
     <div class="fxc_top">
       <div class="fxc_top_item">
         <img src="../../assets/images/fxc_img2.png">
@@ -116,7 +116,7 @@
       <div class="fxc_map">
         <mapPage :markers="markers"></mapPage>
       </div>
-      <div class="fxc_mid_con1" v-if="markerInfo">
+      <!-- <div class="fxc_mid_con1" v-if="markerInfo">
         <div class="fxc_win_icon1"></div>
         <div class="fxc_win_icon2"></div>
         <div class="fxc_win_icon3"></div>
@@ -128,7 +128,7 @@
           检测状态：{{markerInfo.statusStr||"--"}}<br>
           更新时间：{{markerInfo.updateTime||"--"}}
         </div>
-      </div>
+      </div> -->
       <div class="fxc_mid_con2" v-if="chaintemp.length">
         <div class="fxc_win_icon1"></div>
         <div class="fxc_win_icon2"></div>
@@ -152,9 +152,9 @@
         <huan2d :id="'huan2d1'" :chipCountData="chipCountData" :value1="1220" :value2="1000" :value3="1200"></huan2d>
       </div>
     </div>
-    <div class="no_login" @click="goLogin" v-if="!token">
+    <!-- <div class="no_login" @click="goLogin" v-if="!token">
         <div>去登录</div>
-    </div>
+    </div> -->
     <div class="chart_view" v-if="view" @click="hideView">
       <pie4Chart :warningState="warningState" :id="'bigChipType'" :big="true" v-if="view == 1"></pie4Chart>
       <pie2Chart :warningState="warningState" :id="'pie2Chart21'" :big="true" v-if="view == 2"></pie2Chart>
@@ -163,16 +163,14 @@
       <barChart :chipStates="chipStates" :id="'barchartCon1'" :big="true" v-if="view == 5"></barChart>
       <huan2d :id="'huan2d2'" :chipCountData="chipCountData" :big="true" v-if="view == 6"></huan2d>
     </div>
-    <div class="idx_nav">
-      <span>菜单</span>
-      <div class="idx_nav_list">
-        <div class="idx_nav_item" @click="goPage('/')">首页</div>
-        <div class="idx_nav_item" @click="goPage('/SignIn')">退出</div>
-      </div>
-    </div>
+    <menus></menus>
+    <!-- <div class="idx_nav" @click="goPage('/SignIn')"  v-if="!token">
+      <span>登录</span>
+    </div> -->
   </div>
 </template>
 <script>
+import menus from "../../components/common/menus";
 import NumCard from "../../components/fangxincha/numberCard"//
 import pie4Chart from "../../components/fangxincha/huan4"//
 import pie2Chart from "../../components/fangxincha/huan2"//
@@ -195,9 +193,11 @@ export default({
     Huan2d,
     pie4Chart,
     pie2Chart,
+    menus,
   },
   data () {
     return {
+      skin:"",
       attrs:["produced","finished","transit","used","normal","warning","error"],
       produced:6780,
       finished:6780,
@@ -238,6 +238,9 @@ export default({
     // })
   },
   methods: {
+    changeSkin(){
+      this.skin = !this.skin && "white"
+    },
     goPage(path){
       this.$router.push({
         path,
@@ -298,11 +301,29 @@ export default({
 
       });
     },
-    getChainInfo(id){
+    getChainInfo(id,marker){
       getFxcChainInfo({id}).then(response => {
         var data = response.data
         data.status && (data.statusStr = {"00": "已入库", "10": "已出库", "20": "已结束"}[data.status])
         this.markerInfo = data
+        this.markerObj = marker
+        marker.setLabel({
+          content:`<div class="fxc_mid_con1 mkif" v-if="markerInfo">
+        <div class="fxc_win_icon1"></div>
+        <div class="fxc_win_icon2"></div>
+        <div class="fxc_win_icon3"></div>
+        <div class="fxc_win_icon4"></div>
+        <div class="fxc_mc1_txt">
+          检测对象：${data.name||"--"}<br>
+          当前温度：${data.lastTemperature||"--"}℃<br>
+          最低温度：${data.minTemperature||"--"}℃<br>
+          检测状态：${data.statusStr||"--"}<br>
+          更新时间：${data.updateTime||"--"}
+        </div>
+      </div>`,
+          direction:'top',
+          zIndex:301,
+        })
       });
     },
     getChainTemperature(id){
@@ -313,6 +334,7 @@ export default({
     },
     hideInfo(){
       this.markerInfo = null
+      if(this.markerObj) this.markerObj.setLabel(null)
       this.chaintemp = []
     },
     changeNum(){
@@ -366,6 +388,7 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 .fxc_lt_type{ font-size: 1.2vw; color: #75AFFE;}
 .fxc_mid{ position: absolute; top: 17.8vh; left: 29.6vw; width: 44.5vw; height: 78.3vh;background: url(../../assets/images/fxc_map.png) center center no-repeat; background-size:7.5rem 5.21rem;}
 .fxc_mid_con1{ position: absolute; bottom: 0; left: 1.5vw; width: 11.4vw; height: 23.4vh; height: 1.5rem; background: rgba(2,43,145, 0.5); box-sizing: border-box;}
+.fxc_mid_con1.mkif{ position: relative; z-index: 2; margin: 0 -6.7vw; width: 11.4vw; height: 23.4vh; height: 1.5rem; background: rgba(2,43,145, 0.7); box-sizing: border-box;}
 .fxc_win_icon1::before{ content: ""; position: absolute; top:-4px; left:-4px; width: 2px; height: 1vw; background: #2DC1FF;}
 .fxc_win_icon1::after{ content: ""; position: absolute; top:-4px; left:-4px; height: 2px; width: 1vw; background: #2DC1FF;}
 .fxc_win_icon2::before{ content: ""; position: absolute; bottom:-4px; left:-4px; width: 2px; height: 1vw; background: #2DC1FF;}
@@ -375,7 +398,7 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 .fxc_win_icon4::before{ content: ""; position: absolute; bottom:-4px; right:-4px; width: 2px; height: 1vw; background: #2DC1FF;}
 .fxc_win_icon4::after{ content: ""; position: absolute; bottom:-4px; right:-4px; height: 2px; width: 1vw; background: #2DC1FF;}
 .fxc_mc1_txt{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 0 0 1vw; line-height: 3.7vh;line-height: 0.24rem; font-size: 0.6vw; color: #65A3F7;}
-.fxc_mid_con2{ position: absolute; bottom: 0; right: 1.5vw; width: 13.8vw; height: 26.8vh; background: rgba(4,57,217, 0.5); box-sizing: border-box;}
+.fxc_mid_con2{ position: absolute; bottom: 0; right: 1.5vw; left: 1.5vw; /*width: 13.8vw;*/ height: 26.8vh; background: rgba(4,57,217, 0.5); box-sizing: border-box;}
 .fxc_right1{ position: absolute; top: 22vh; right: 2.4vw; width: 22.8vw; height: 34.3vh;background: rgba(14, 97, 182, 0.14);border: 2px solid;border-image: linear-gradient(90deg, #093B77, #3E8EFF, #0C4480) 2 2;}
 .fxc_left_btm_txt{ position: absolute; bottom: 0; left:30%; width: 2rem; margin: 0 0 0 -0.93rem; font-size: 0.16rem; color: #ffffff; text-align: center;}
 
@@ -396,7 +419,7 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 .fxc_left_con1{ width: 23vw; height:24.4vh; margin: auto; position: relative;}
 .fxc_left_con2{ width: 23vw; height: 26.9vh; margin: auto; position: relative;}
 .fxc_left_ctit{ font-size: 0.7vw; line-height: 0.28rem; color:#ffffff; position: relative; z-index: 1;}
-.fxc_left_ch1{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
+.fxc_left_ch1{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-height:10vw;}
 .fxc_left_ch2{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch;}
 .fxc_left_ch2 div{ height: 100%; width: 100%; position: relative;}
 .fxc_left_cline{ width: 21.8vw; height: 1px; background: #0653AF; margin: auto;}
@@ -408,4 +431,8 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 .idx_nav:hover .idx_nav_list{ transform: scale(1); opacity: 1;}
 .idx_nav_item{ line-height: 30px; border-top: 1px solid #ffffff; background: #F1950B;}
 .idx_nav_item:first-child{ border:none;}
+
+
+/**/
+.mot_page.white{ background: #ffffff;}
 </style>

src/components/common/menus.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="idx_nav">
+      <span>菜单</span>
+      <div class="idx_nav_list">
+        <div class="idx_nav_item" @click="goPage('/SignIn')" v-if="!token">登录</div>
+        <div class="idx_nav_item" @click="goPage('/')">首页</div>
+        <!-- <div class="idx_nav_item" @click="changeSkin">切换皮肤</div> -->
+        <a class="idx_nav_item" href="https://www.nmpa.gov.cn/" target="_blank" v-if="token">药监局</a>
+        <div class="idx_nav_item" @click="goPage('/SignIn')" v-if="token">退出</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default({
+    name:"menus",
+    data () {
+      return {
+        token:localStorage.getItem("token"),
+      }
+    },
+    methods: {
+      changeSkin(){
+        this.$parent.changeSkin()
+      },
+      goPage(path){
+        if(path == "/SignIn"){
+          localStorage.setItem("token", "");
+        }
+        this.$router.push({
+          path,
+        });
+      },
+    }
+  })
+</script>
+<style scoped>
+.idx_nav{ cursor: pointer; position: fixed; right: 0; bottom: 10px; z-index: 3; color: #ffffff; background: #F1950B; font-size: 14px; display: flex; justify-content: center; align-items: center; border-radius: 100px; width:40px; height: 40px;}
+.idx_nav_list{ position: absolute; bottom: 44px; right: 0; width: 100px; text-align: center; transition: all 0.5s ease 0s; transform: scale(0); opacity: 0; transform-origin: right bottom;}
+.idx_nav_list::before{ content: ""; width: 0; height: 0; position: absolute;  bottom: -5px; right: 15px; border-top: 5px solid #F1950B; border-left: 5px solid transparent; border-right: 5px solid transparent;}
+.idx_nav:hover .idx_nav_list{ transform: scale(1); opacity: 1;}
+.idx_nav_item{ line-height: 30px; border-top: 1px solid #ffffff; background: #F1950B; display: block; color: #ffffff;}
+a.idx_nav_item{color: #ffffff!important;}
+.idx_nav_item:first-child{ border:none;}
+</style>

src/components/fangxincha/map.vue

@@ -15,6 +15,7 @@
     },
     data () {
       return {
+        zindex:101,
         list:[],
       }
     },
@@ -45,8 +46,8 @@
       //     this.setMarkers(list)
       //   });
       // },
-      getInfo(id){
-        this.$parent.getChainInfo(id)
+      getInfo(id,marker){
+        this.$parent.getChainInfo(id,marker)
         this.$parent.getChainTemperature(id)
       },
       initMap () {
@@ -91,7 +92,13 @@
             marker.on("click",function(e){
               var extData = e.target.De.extData
               var id = extData.id
-              that.getInfo(id)
+              that.zindex = that.zindex+1
+              this.setzIndex(that.zindex)
+              // this.setLabel({
+              //   content:extData.NAME + '<br>' + extData.address,
+              //   direction:'top'
+              // })
+              that.getInfo(id,this)
             })
             markers.push(marker)
           }
@@ -103,6 +110,7 @@
 </script>
 <style>
   .mappage_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
-  .mappage_con .amap-marker-label{background: rgba(35,4,194,0.6);font-size: 0.8vw; border: 1px solid #51FFFF; color: #ffffff; border-radius: 5px;}
+  .mappage_con .amap-marker-label{background:transparent;font-size: 0.8vw; border: none;}
+  /* .mappage_con .amap-marker-label{background: rgba(35,4,194,0.6);font-size: 0.8vw; border: 1px solid #51FFFF; color: #ffffff; border-radius: 5px;} */
   .amap-logo{ display: none!important;;}
 </style>

src/components/signIn/SignIn.vue

@@ -69,15 +69,23 @@
         </el-col>
       </el-row>
     </el-main>
+    
+    <div class="idx_nav">
+      <span  @click="goPage('/')">返回</span>
+    </div>
   </el-container>
 </template>
 
 <script>
 // import md5 from "js-md5";
 // import { JSEncrypt } from "jsencrypt";
+import menus from "../../components/common/menus";
 import { loginByPwd } from '@/api/screen'
 export default {
   name: "SignIn",
+  components:{
+    menus
+  },
   data() {
     const validatePhone = (rule, value, callback) => {
       let patter = new RegExp("^1[3|4|5|7|8][0-9]\\d{8}$");
@@ -118,6 +126,11 @@ export default {
     };
   },
   methods: {
+    goPage(path){
+      this.$router.push({
+        path,
+      });
+    },
     submitForm(formName) {
       var _this = this;
       _this.$refs[formName].validate((valid) => {

src/main.js

@@ -28,6 +28,7 @@ Vue.use(VueCookies);
 Vue.use(VCharts)
 Vue.use(Echarts)
 Vue.use(VueAMap);
+
 new Vue({
   store,
   router,