11

src/api/screen.js

@@ -63,4 +63,11 @@ export function getFxcChainStatus() {
     url: '/fxc/index/getChainStatus',
     method: 'post',
   })
+}
+//冷链运输状态查询,以及预警状态数量
+export function getFxcWarningState() {
+  return request({
+    url: '/fxc/index/warningState',
+    method: 'post',
+  })
 }

src/components/bigData/index.vue

@@ -61,7 +61,25 @@
           <div class="fxc_lt_type">报警</div>
         </div>
       </div>
-      <div class="fxc_left_btm">
+      <div class="fxc_left_con1">
+        <div class="fxc_left_ctit">标签类型</div>
+        <div class="fxc_left_ch1">
+          <pie4Chart :warningState="warningState"></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>
+            <pie2Chart :warningState="warningState" :id="'pie2Chart20'"></pie2Chart>
+          </div>
+          <div>
+            <pie2Chart :warningState="warningState" :id="'pie2Chart11'"></pie2Chart>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="fxc_left_btm">
         <img class="fxc_left_btm_img" src="../../assets/images/fxc_img11.png">
         <pie3d :id="'pie3d1'" :value1="1220" :value2="1000" :value3="1200"></pie3d>
         <div class="fxc_left_btm_txt">预警</div>
@@ -92,7 +110,7 @@
             <i></i>追溯标签<span>{{1200}}</span>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="fxc_mid" @click="hideInfo">
       <div class="fxc_map">
@@ -141,13 +159,15 @@
 </template>
 <script>
 import NumCard from "../../components/fangxincha/numberCard"//
+import pie4Chart from "../../components/fangxincha/huan4"//
+import pie2Chart from "../../components/fangxincha/huan2"//
 import Pie3d from "../../components/fangxincha/pie3d2"//
 import Huan3d from "../../components/fangxincha/huan3d"//
 import Huan2d from "../../components/fangxincha/huan2d"//
 import MapPage from "../../components/fangxincha/map"//高德地图
 import LineChart from "../../components/fangxincha/lineChart"//
 import BarChart from "../../components/fangxincha/barChart"//
-import { getFxcToken,getFxclistChainLocal,getFxcProductTypeChipCount,getFxcProductChipState,getFxcChainStatus,getFxcChainInfo,getFxcChainTemperature } from '@/api/screen'
+import { getFxcToken,getFxclistChainLocal,getFxcProductTypeChipCount,getFxcWarningState,getFxcProductChipState,getFxcChainStatus,getFxcChainInfo,getFxcChainTemperature } from '@/api/screen'
 export default({
   name:"Shop",
   components: {
@@ -158,6 +178,8 @@ export default({
     BarChart,
     Huan3d,
     Huan2d,
+    pie4Chart,
+    pie2Chart,
   },
   data () {
     return {
@@ -174,6 +196,7 @@ export default({
       markerInfo:"",
       chaintemp:"",
       chainStatus:{},
+      warningState:{},
       chipCountData:[],
       chipStates:[],
     }
@@ -185,6 +208,7 @@ export default({
       this.getProductTypeChipCount()
       this.getProductChipState()
       this.getChainStatus()
+      this.getWarningState()
     }else{
       this.changeNum()
     }
@@ -212,6 +236,11 @@ export default({
         this.markers = response.data
       });
     },
+    getWarningState(){
+      getFxcWarningState().then(response => {
+        this.warningState = response.data
+      });
+    },
     getProductChipState(){
       getFxcProductChipState().then(response => {
         this.chipStates = response.data
@@ -336,4 +365,13 @@ background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-backgro
 
 .no_login{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1; display: flex; justify-content: center; align-items: center;}
 .no_login>div{ width: auto; padding: 20px; background: #ffffff; font-size: 20px; line-height: 36px; border-radius: 5px; color: #2DC1FF;}
+
+.fxc_left_con1{ width: 23vw; height: 1.5rem; margin: auto; position: relative;}
+.fxc_left_con2{ width: 23vw; height: 1.66rem; 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_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;}
+
 </style>

src/components/fangxincha/barChart.vue

@@ -22,6 +22,7 @@ export default {
 	  myEcharts(){
       var token = localStorage.getItem("token")
       var chipStates = this.chipStates
+      console.log(chipStates)
 		  this.myChart = this.echarts.init(document.getElementById('barchartCon'));
 		  this.option = {
         color:["#3E9DFF","#EE9C17","#E82A30"],
@@ -100,7 +101,6 @@ export default {
             name: '全程温控',
             type: 'bar',
             barMaxWidth:15,
-            barMinWidth :10,
             barMinHeight :5,
             data: token?chipStates.map(o=>o.state10):[120, 132, 101, 134, 90, 230, 210]
           },
@@ -108,7 +108,6 @@ export default {
             name: '实时温控',
             type: 'bar',
             barMaxWidth:15,
-            barMinWidth :10,
             barMinHeight :5,
             data: token?chipStates.map(o=>o.state11):[120, 132, 101, 134, 90, 230, 210]
           },
@@ -116,7 +115,6 @@ export default {
             name: '追溯标签',
             type: 'bar',
             barMaxWidth:15,
-            barMinWidth :10,
             barMinHeight :5,
             data: token?chipStates.map(o=>o.state20):[120, 132, 101, 134, 90, 230, 210]
           },

src/components/fangxincha/huan2.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="chart_con" :id="id"></div>
+</template>
+<script>
+export default {
+  name: 'pie2Chart',
+  id:{
+    type:String,
+    required:true
+  },
+  data(){
+    return{
+      list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
+    }
+  },
+  props: {
+    id:{
+      type:String,
+      required:true
+    },
+    warningState:{
+      default:{},
+    },
+  },
+  watch: {
+      warningState(){
+        this.myEcharts()
+      },
+  },
+  methods:{
+	  myEcharts(){
+      var that = this
+      var token = localStorage.getItem("token")
+      var list = this.list
+      // if(token)list = this.warningState
+      list.total = list.total10 + list.total11 + list.total20
+      var num1 = list.warning11
+      var total1 = list.total11
+      var total2 = list.total20
+      var num2 = list.warning20
+      var txt = '警报'
+      var color = "#FF1E3E"
+      if(that.id == "pie2Chart11"){
+        color = "#F1950B"
+        num1 = list.warning11
+        num2 = list.warning20
+        txt = '报警'
+      }
+      if(that.id == "pie2Chart20"){
+        color = "#FF1E3E"
+        num1 = list.error11
+        num2 = list.error20
+        txt = '警报'
+      }
+		  this.myChart = this.echarts.init(document.getElementById(that.id));
+		  this.option = {
+        color:["#7A4AFF","#FFAE36"],
+			  title: {
+				  show:false
+			  },
+        grid:{
+          top:"22%",
+          left:"5%",
+          right:"5%",
+          bottom:"12%",
+        },
+			  tooltip: {
+				  show:true
+        },
+			  legend: {
+          data:['全程温度', '实时温控'],
+				  bottom:0,
+          icon:"rect",
+          itemWidth:12,
+          itemHeight:8,
+          orient :"vertical",
+          textStyle:{
+            fontSize:8,
+            color:"#ffffff",
+          },
+			  },
+			  series: [
+          ...that.setOptItem(color,list.total11,list.total20,num2,num1,txt),
+        ]
+		  };
+		  this.myChart.setOption(this.option);
+    },
+    setOptItem(color,total1,total2,num2,num1,name){
+      return [{
+          type: 'pie',
+          silent:1,
+          radius: ['60%', '62%'],
+          center: ["50%", '40%'],
+          label:{
+            show:false,
+          },
+          labelLine:0,
+          data: [
+            {value:1,itemStyle:{color:"#1ECAFF",}},
+            {value:0,itemStyle:{color:"#1ECAFF",}},
+          ],
+          animation:0,
+        },
+        {
+          type: 'pie',
+          silent:1,
+          radius: ['25%', '35%'],
+          center: ["50%", '40%'],
+          label:{
+            show:false,
+          },
+          data: [
+            {value:num2,name,itemStyle:{color:"#7A4AFF",}},
+            {value:(num2==0?1:(total2-num2)),name:"全程温度",itemStyle:{color:"#1C5FA5",}},
+          ],
+        },
+        {
+          type: 'pie',
+          silent:1,
+          radius: ['40%', '50%'],
+          center: ["50%", '40%'],
+          label:{
+            show:false,
+          },
+          data: [
+            {value:num1,name:"实时温控",itemStyle:{color:"#FFAE36",},},
+            {value:(num1==0?1:(total1-num1)),name:"",itemStyle:{color:"#1C5FA5",}},
+          ],
+          label: {
+            show: 1,
+            fontSize:12,
+            color:color,
+            position: 'center',
+            formatter:"警报",
+          },
+        },
+      ]
+    },
+
+  },
+  mounted() {
+  	this.myEcharts();
+  }
+}
+</script>
+<style>
+  .chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
+</style>

src/components/fangxincha/huan4.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="chart_con" id="pie4ChartCon"></div>
+</template>
+<script>
+export default {
+  name: 'pie4Chart',
+  data(){
+    return{
+      list:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600}
+    }
+  },
+  props: {
+    warningState:{
+      default:{error11: 100, warning20: 100, warning11:100, total11: 500, total10: 300, error20: 100, total20: 600},
+    },
+  },
+  watch: {
+      warningState(){
+        this.myEcharts()
+      },
+  },
+  methods:{
+	  myEcharts(){
+      var that = this
+      var token = localStorage.getItem("token")
+      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.option = {
+        color:["#23D9E9","#7A4AFF","#FFAE36","#00C26B"],
+			  title: {
+				  show:false
+			  },
+        grid:{
+          top:"22%",
+          left:"5%",
+          right:"5%",
+          bottom:"12%",
+        },
+			  tooltip: {
+				  show:true
+        },
+			  legend: {
+          data:['总数', '全程温度', '实时温控', '追溯标签'],
+				  top:5,
+          icon:"rect",
+          right:"5%",
+          itemWidth:12,
+          itemHeight:8,
+          textStyle:{
+            fontSize:8,
+            color:"#ffffff",
+          },
+			  },
+			  series: [
+          ...that.setOptItem("#23D9E9","12%",list.total,list.total,'总数'),
+          ...that.setOptItem("#7A4AFF","37%",list.total11,list.total,'全程温度'),
+          ...that.setOptItem("#FFAE36","62%",list.total20,list.total,'实时温控'),
+          ...that.setOptItem("#00C26B","87%",list.total10,list.total,'追溯标签'),
+        ]
+		  };
+		  this.myChart.setOption(this.option);
+    },
+    setOptItem(color,pos,num,total,name){
+      return [{
+          type: 'pie',
+          silent:1,
+          radius: ['60%', '62%'],
+          center: [pos, '60%'],
+          label:{
+            show:false,
+          },
+          labelLine:0,
+          data: [
+            {value:1,itemStyle:{color:color,}},
+            {value:0,itemStyle:{color:color,}},
+          ],
+          animation:0,
+        },
+        {
+          type: 'pie',
+          silent:1,
+          radius: ['35%', '50%'],
+          center: [pos, '60%'],
+          label:{
+            show:false,
+          },
+          data: [
+            {value:num,name,itemStyle:{color:color,},
+              label: {
+                show: 1,
+                fontSize:12,
+                color:color,
+                position: 'center',
+                formatter:"{c}"
+              },
+            },
+            {value:(num==0?1:(total-num)),name:"",itemStyle:{color:"#1C5FA5",}},
+          ],
+        },]
+    },
+
+  },
+  mounted() {
+  	this.myEcharts();
+  }
+}
+</script>
+<style>
+  .chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: transparent;}
+</style>