index

src/components/bigData/index.vue

@@ -63,18 +63,18 @@
       </div>
       <div class="fxc_left_con1">
         <div class="fxc_left_ctit">标签类型</div>
-        <div class="fxc_left_ch1">
-          <pie4Chart :warningState="warningState"></pie4Chart>
+        <div class="fxc_left_ch1" @click="viewChipType(1)">
+          <pie4Chart :warningState="warningState" :id="'pie4ChartCon'"></pie4Chart>
         </div>
       </div>
       <div class="fxc_left_cline"></div>
       <div class="fxc_left_con2">
         <div class="fxc_left_ctit">预警情况</div>
         <div class="fxc_left_ch2">
-          <div>
+          <div @click="viewChipType(2)">
             <pie2Chart :warningState="warningState" :id="'pie2Chart20'"></pie2Chart>
           </div>
-          <div>
+          <div @click="viewChipType(3)">
             <pie2Chart :warningState="warningState" :id="'pie2Chart11'"></pie2Chart>
           </div>
         </div>
@@ -129,25 +129,25 @@
           更新时间：{{markerInfo.updateTime||"--"}}
         </div>
       </div>
-      <div class="fxc_mid_con2" v-if="chaintemp">
+      <div class="fxc_mid_con2" v-if="chaintemp.length">
         <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_mc2_con">
-          <lineChart :chaintemp="chaintemp"></lineChart>
+        <div class="fxc_mc2_con" @click.stop="viewChipType(4)">
+          <lineChart :chaintemp="chaintemp" :id="'lineChartCon'"></lineChart>
         </div>
       </div>
     </div>
     <div class="fxc_right1">
       <div class="fxc_tit">储运状态</div>
-      <div class="fxc_right1_con">
-        <barChart :chipStates="chipStates"></barChart>
+      <div class="fxc_right1_con" @click="viewChipType(5)">
+        <barChart :chipStates="chipStates" :id="'barchartCon'"></barChart>
       </div>
     </div>
     <div class="fxc_right2">
       <div class="fxc_tit">监测数量</div>
-      <div class="fxc_right2_con">
+      <div class="fxc_right2_con" @click="viewChipType(6)">
         <!-- <huan2d :id="'huan2d1'" :chipCountData="chipCountData"></huan2d> -->
         <huan2d :id="'huan2d1'" :chipCountData="chipCountData" :value1="1220" :value2="1000" :value3="1200"></huan2d>
       </div>
@@ -155,6 +155,21 @@
     <div class="no_login" @click="goLogin" v-if="!token">
         <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>
+      <pie2Chart :warningState="warningState" :id="'pie2Chart12'" :big="true" v-if="view == 3"></pie2Chart>
+      <lineChart :chaintemp="chaintemp" :id="'lineChartCon1'" :big="true" v-if="view == 4"></lineChart>
+      <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>
   </div>
 </template>
 <script>
@@ -194,11 +209,12 @@ export default({
       token:"",
       markers:[],
       markerInfo:"",
-      chaintemp:"",
+      chaintemp:[],
       chainStatus:{},
       warningState:{},
       chipCountData:[],
       chipStates:[],
+      view:"",
     }
   },
   created () {
@@ -222,6 +238,17 @@ export default({
     // })
   },
   methods: {
+    goPage(path){
+      this.$router.push({
+        path,
+      });
+    },
+    viewChipType(type){
+      this.view = type
+    },
+    hideView(){
+      this.view = null
+    },
     // getLoginToken(){
     //   getFxcToken().then(response => {
     //     var fxcToken = response.token
@@ -281,12 +308,12 @@ export default({
     getChainTemperature(id){
       getFxcChainTemperature({id}).then(response => {
         var data = response.data
-        this.chaintemp = data.length && data
+        this.chaintemp =data
       });
     },
     hideInfo(){
       this.markerInfo = null
-      this.chaintemp = null
+      this.chaintemp = []
     },
     changeNum(){
       const that = this
@@ -374,4 +401,11 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 .fxc_left_ch2 div{ height: 100%; width: 100%; position: relative;}
 .fxc_left_cline{ width: 21.8vw; height: 1px; background: #0653AF; margin: auto;}
 
+.chart_view{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(3,25,52, 0.95); z-index: 2;}
+.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;}
+.idx_nav_item:first-child{ border:none;}
 </style>

src/components/fangxincha/barChart.vue

@@ -1,33 +1,40 @@
 <template>
-  <div class="chart_con" id="barchartCon"></div>
+  <div class="chart_con" :id="id"></div>
 </template>
 <script>
-import { getEvvmChipStatus2 } from '@/api/screen'
 export default {
   name: 'barChart',
   props: {
+    id:{
+      type:String,
+      required:true
+    },
+    big:{
+      default:false,
+    },
     chipStates: Array
   },
+  data(){
+    return{
+      fontSize:8,
+    }
+  },
   watch: {
       chipStates(){
         this.myEcharts()
       },
   },
   methods:{
-    // getData(){
-    //   getEvvmChipStatus2().then(response => {
-    //     var data = response.data
-    //     var option = this.option
-    //     option.series[0].data[0].value = data.used
-    //     option.series[0].data[1].value = data.act
-    //     option.series[0].data[2].value = data.noAct
-    //     this.myChart.setOption(option);
-    //   });
-    // },
 	  myEcharts(){
+      var that = this
       var token = localStorage.getItem("token")
       var chipStates = this.chipStates
-		  this.myChart = this.echarts.init(document.getElementById('barchartCon'));
+      chipStates = chipStates.slice(0,5)
+      if(this.big){
+        that.fontSize = 20
+        chipStates = this.chipStates
+      }
+		  this.myChart = this.echarts.init(document.getElementById(this.id));
 		  this.option = {
         color:["#3E9DFF","#EE9C17","#E82A30"],
 			  title: {
@@ -46,10 +53,10 @@ export default {
           data:['全程温控', '实时温控', '追溯标签'],
 				  top:5,
           icon:"rect",
-          itemWidth:12,
-          itemHeight:8,
+          itemWidth:that.fontSize*1.5,
+          itemHeight:that.fontSize,
           textStyle:{
-            fontSize:8,
+            fontSize:that.fontSize,
             color:"#ffffff",
           },
 			  },

src/components/fangxincha/huan2.vue

@@ -8,8 +8,12 @@ export default {
     type:String,
     required:true
   },
+  big:{
+    default:false,
+  },
   data(){
     return{
+      fontSize:8,
       list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
     }
   },
@@ -18,6 +22,9 @@ export default {
       type:String,
       required:true
     },
+    big:{
+      default:false,
+    },
     warningState:{
       default:{},
     },
@@ -40,13 +47,17 @@ export default {
       var num2 = list.warning20
       var txt = '警报'
       var color = "#FF1E3E"
-      if(that.id == "pie2Chart11"){
+      //判断是不是放大显示
+      if(that.big){
+        that.fontSize = 20
+      }
+      if(that.id == "pie2Chart11" || that.id == "pie2Chart12"){
         color = "#F1950B"
         num1 = list.warning11
         num2 = list.warning20
-        txt = '报警'
+        txt = '预警'
       }
-      if(that.id == "pie2Chart20"){
+      if(that.id == "pie2Chart20" || that.id == "pie2Chart21"){
         color = "#FF1E3E"
         num1 = list.error11
         num2 = list.error20
@@ -71,11 +82,11 @@ export default {
           data:['全程温度 '+num2, '实时温控 '+num1],
 				  bottom:0,
           icon:"rect",
-          itemWidth:12,
-          itemHeight:8,
+          itemWidth:that.fontSize*1.5,
+          itemHeight:that.fontSize,
           orient :"vertical",
           textStyle:{
-            fontSize:8,
+            fontSize:that.fontSize,
             color:"#ffffff",
           },
 			  },
@@ -131,7 +142,7 @@ export default {
             fontSize:12,
             color:color,
             position: 'center',
-            formatter:"警报",
+            formatter:name,
           },
         },
       ]

src/components/fangxincha/huan2d.vue

@@ -12,6 +12,9 @@
         type:String,
         required:true
       },
+      big:{
+        default:false,
+      },
       value1:{
         default:1,
       },
@@ -32,6 +35,7 @@
     },
     mounted() {
       this.moreChart();
+      if(this.big)this.updataChart()
     },
     watch: {
       value1(){
@@ -51,10 +55,15 @@
       updataChart(){
         const that = this
         var token = localStorage.getItem("token")
-        if(token)this.chart.series[0].update({
-          data:that.chipCountData
-        })
-        else this.chart.series[0].update({
+        if(token){
+          var data = that.chipCountData
+          if(!this.big){
+            data = data.slice(0,5)
+          }
+          this.chart.series[0].update({
+            data
+          })
+        }else this.chart.series[0].update({
           data:[
             ['科兴',that.value1],
             ['康希诺',that.value2],

src/components/fangxincha/huan4.vue

@@ -1,15 +1,25 @@
 <template>
-  <div class="chart_con" id="pie4ChartCon"></div>
+  <div class="chart_con" :id="id"></div>
 </template>
 <script>
 export default {
   name: 'pie4Chart',
   data(){
     return{
+      fontSize:8,
+      legendRight:"5%",
+      legendTop:5,
       list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
     }
   },
   props: {
+    id:{
+      type:String,
+      required:true
+    },
+    big:{
+      default:false,
+    },
     warningState:{
       default:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600},
     },
@@ -26,7 +36,13 @@ export default {
       var list = this.list
       if(token)list = this.warningState
       list.total = list.total10 + list.total11 + list.total20
-		  this.myChart = this.echarts.init(document.getElementById('pie4ChartCon'));
+		  this.myChart = this.echarts.init(document.getElementById(this.id));
+      //判断是不是放大显示
+      if(this.big){
+        this.fontSize = 20
+        this.legendRight = "auto"
+        this.legendTop = "5%"
+      }
 		  this.option = {
         color:["#23D9E9","#7A4AFF","#FFAE36","#00C26B"],
 			  title: {
@@ -43,13 +59,13 @@ export default {
         },
 			  legend: {
           data:['总数', '全程温度', '实时温控', '追溯标签'],
-				  top:5,
           icon:"rect",
-          right:"5%",
-          itemWidth:12,
-          itemHeight:8,
+          top:this.legendTop,
+          right:this.legendRight,
+          itemWidth:this.fontSize*1.5,
+          itemHeight:this.fontSize,
           textStyle:{
-            fontSize:8,
+            fontSize:this.fontSize,
             color:"#ffffff",
           },
 			  },
@@ -90,7 +106,7 @@ export default {
             {value:num,name,itemStyle:{color:color,},
               label: {
                 show: 1,
-                fontSize:12,
+                fontSize:this.fontSize*1.5,
                 color:color,
                 position: 'center',
                 formatter:"{c}"

src/components/fangxincha/lineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chart_con" id="lineChartCon"></div>
+  <div class="chart_con" :id="id"></div>
 </template>
 <script>
 // import { getEvvmChipStatus2 } from '@/api/screen'
@@ -11,6 +11,13 @@ export default {
     }
   },
   props: {
+    id:{
+      type:String,
+      required:true
+    },
+    big:{
+      default:false,
+    },
     chaintemp: Array
   },
   methods:{
@@ -26,7 +33,7 @@ export default {
     // },
 	  myEcharts(){
       var list = this.chaintemp
-		  this.myChart = this.echarts.init(document.getElementById('lineChartCon'));
+		  this.myChart = this.echarts.init(document.getElementById(this.id));
 		  this.option = {
         color:["#23D9E9","#EE9C17","#E82A30"],
 			  title: {
@@ -116,7 +123,7 @@ export default {
                 focus: 'series'
             },
             data: list.map(o=>o.temp),//[120, 132, 101, 134, 90, 230, 210],
-            animationDuration: 5000,
+            animationDuration: 1000,
           },
           // {
           //   name: '预警',

src/components/fangxincha/map.vue

@@ -22,7 +22,7 @@
       markers(nv,ov){
         var list = nv
         this.list = list
-        this.setMarkers(list)
+        if(this.map)this.setMarkers(list)
       },
     },
     async mounted () {
@@ -67,7 +67,7 @@
         ], function(){
           map.addControl(new AMap.ControlBar());
         })
-        // this.getList()
+        this.setMarkers(this.list)
       },
       setMarkers(list){
         var that = this