fxc_desktop/src/components/bigData/index.vue

<template>
  <div class="mot_page">
    <div class="mot_head">放芯查数据展示平台</div>
    <div class="fxc_top">
      <div class="fxc_top_item">
        <img src="../../assets/images/fxc_img2.png">
        <div class="fxc_top_txt">
          <div class="fxc_top_num">
            <numCard v-for="(item,index) in ''+produced" :key="index" :num="item || 0" :color="'#3AB46D'"></numCard>
          </div>
          <div class="fxc_top_type">已生产(个)</div>
        </div>
      </div>
      <div class="fxc_top_item">
        <img src="../../assets/images/fxc_img3.png">
        <div class="fxc_top_txt">
          <div class="fxc_top_num">
            <numCard v-for="(item,index) in ''+finished" :key="index" :num="item || 0" :color="'#EF4598'"></numCard>
          </div>
          <div class="fxc_top_type">已出库(个)</div>
        </div>
      </div>
      <div class="fxc_top_item">
        <img src="../../assets/images/fxc_img4.png">
        <div class="fxc_top_txt">
          <div class="fxc_top_num">
            <numCard v-for="(item,index) in ''+transit" :key="index" :num="item || 0" :color="'#F8B30E'"></numCard>
          </div>
          <div class="fxc_top_type">已入库(个)</div>
        </div>
      </div>
      <div class="fxc_top_item">
        <img src="../../assets/images/fxc_img5.png">
        <div class="fxc_top_txt">
          <div class="fxc_top_num">
            <numCard v-for="(item,index) in ''+used" :key="index" :num="item || 0" :color="'#3E9DFF'"></numCard>
          </div>
          <div class="fxc_top_type">已结束(个)</div>
        </div>
      </div>
    </div>
    <div class="fxc_left">
      <div class="fxc_tit">温度监测</div>
      <div class="fxc_left_top">
        <div class="fxc_lt_item">
          <div class="fxc_lt_num">
            <numCard v-for="(item,index) in ''+normal" :key="index" :num="item || 0"></numCard>
          </div>
          <div class="fxc_lt_type">正常</div>
        </div>
        <div class="fxc_lt_item">
          <div class="fxc_lt_num">
            <numCard v-for="(item,index) in ''+warning" :key="index" :num="item || 0" :color="'#3AB46D'"></numCard>
          </div>
          <div class="fxc_lt_type">预警</div>
        </div>
        <div class="fxc_lt_item">
          <div class="fxc_lt_num">
            <numCard v-for="(item,index) in ''+error" :key="index" :num="item || 0" :color="'#3AB46D'"></numCard>
          </div>
          <div class="fxc_lt_type">报警</div>
        </div>
      </div>
      <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>
        <div class="fxc_lb_con">
          <div class="fxc_lb_item">
            <i></i>全程温度<span>{{1220}}</span>
          </div>
          <div class="fxc_lb_item">
            <i></i>实时温控<span>{{1000}}</span>
          </div>
          <div class="fxc_lb_item">
            <i></i>追溯标签<span>{{1200}}</span>
          </div>
        </div>
      </div>
      <div class="fxc_left_btm">
        <img class="fxc_left_btm_img" src="../../assets/images/fxc_img11.png">
        <pie3d :id="'pie3d2'" :value1="1230" :value2="1100" :value3="1200"></pie3d>
        <div class="fxc_left_btm_txt">报警</div>
        <div class="fxc_lb_con">
          <div class="fxc_lb_item">
            <i></i>全程温度<span>{{1220}}</span>
          </div>
          <div class="fxc_lb_item">
            <i></i>实时温控<span>{{1000}}</span>
          </div>
          <div class="fxc_lb_item">
            <i></i>追溯标签<span>{{1200}}</span>
          </div>
        </div>
      </div> -->
    </div>
    <div class="fxc_mid" @click="hideInfo">
      <div class="fxc_map">
        <mapPage :markers="markers"></mapPage>
      </div>
      <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>
        <div class="fxc_win_icon4"></div>
        <div class="fxc_mc1_txt">
          检测对象：{{markerInfo.name||"--"}}<br>
          当前温度：{{markerInfo.lastTemperature||"--"}}℃<br>
          最低温度：{{markerInfo.minTemperature||"--"}}℃<br>
          检测状态：{{markerInfo.statusStr||"--"}}<br>
          更新时间：{{markerInfo.updateTime||"--"}}
        </div>
      </div>
      <div class="fxc_mid_con2" v-if="chaintemp">
        <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>
      </div>
    </div>
    <div class="fxc_right1">
      <div class="fxc_tit">储运状态</div>
      <div class="fxc_right1_con">
        <barChart :chipStates="chipStates"></barChart>
      </div>
    </div>
    <div class="fxc_right2">
      <div class="fxc_tit">监测数量</div>
      <div class="fxc_right2_con">
        <!-- <huan2d :id="'huan2d1'" :chipCountData="chipCountData"></huan2d> -->
        <huan2d :id="'huan2d1'" :chipCountData="chipCountData" :value1="1220" :value2="1000" :value3="1200"></huan2d>
      </div>
    </div>
    <div class="no_login" @click="goLogin" v-if="!token">
        <div>去登录</div>
    </div>
  </div>
</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,getFxcWarningState,getFxcProductChipState,getFxcChainStatus,getFxcChainInfo,getFxcChainTemperature } from '@/api/screen'
export default({
  name:"Shop",
  components: {
    NumCard,
    Pie3d,
    MapPage,
    LineChart,
    BarChart,
    Huan3d,
    Huan2d,
    pie4Chart,
    pie2Chart,
  },
  data () {
    return {
      attrs:["produced","finished","transit","used","normal","warning","error"],
      produced:6780,
      finished:6780,
      transit:6780,
      used:6780,
      normal:6780,
      warning:6780,
      error:6780,
      token:"",
      markers:[],
      markerInfo:"",
      chaintemp:"",
      chainStatus:{},
      warningState:{},
      chipCountData:[],
      chipStates:[],
    }
  },
  created () {
    this.token = localStorage.getItem("token");
    if(this.token){
      this.getListChainLocal()
      this.getProductTypeChipCount()
      this.getProductChipState()
      this.getChainStatus()
      this.getWarningState()
    }else{
      this.changeNum()
    }
    // this.randomNum()
    // this.getLoginToken()
    // this.$store.dispatch("FxcLogin").then((res)=>{
    //   var fxcToken = this.$store.getters.fxcToken
    //   this.getListChainLocal(fxcToken)
    //   this.getProductTypeChipCount(fxcToken)
    //   this.getProductChipState(fxcToken)
    // })
  },
  methods: {
    // getLoginToken(){
    //   getFxcToken().then(response => {
    //     var fxcToken = response.token
    //     this.getListChainLocal(fxcToken)
    //     this.getProductTypeChipCount(fxcToken)
    //     this.getProductChipState(fxcToken)
    //     this.getChainStatus(fxcToken)
    //   });
    // },
    getListChainLocal(){
      getFxclistChainLocal().then(response => {
        this.markers = response.data
      });
    },
    getWarningState(){
      getFxcWarningState().then(response => {
        this.warningState = response.data
      });
    },
    getProductChipState(){
      getFxcProductChipState().then(response => {
        this.chipStates = response.data
      });
    },
    getProductTypeChipCount(){
      getFxcProductTypeChipCount().then(response => {
        var data = response.data
        var list = []
        for(var i in data){
          list[i] = []
          list[i][0] = data[i].productTypeName
          list[i][1] = data[i].num
        }
        this.chipCountData = list
      });
    },
    getChainStatus(){
      getFxcChainStatus().then(response => {
        var data = response.data
        this.produced = data.total
        this.finished = data.inTrans
        this.transit = data.inStore
        this.used = data.inEnd
        this.normal = data.temperatureDTO.normal
        this.warning = data.temperatureDTO.warning
        this.error = data.temperatureDTO.alarm

      });
    },
    getChainInfo(id){
      getFxcChainInfo({id}).then(response => {
        var data = response.data
        data.status && (data.statusStr = {"00": "已入库", "10": "已出库", "20": "已结束"}[data.status])
        this.markerInfo = data
      });
    },
    getChainTemperature(id){
      getFxcChainTemperature({id}).then(response => {
        var data = response.data
        this.chaintemp = data.length && data
      });
    },
    hideInfo(){
      this.markerInfo = null
      this.chaintemp = null
    },
    changeNum(){
      const that = this
      var list = that.attrs
      for(var i in list){
        that.randomNum(list[i])
      }
    },
    randomNum(key){
      const that = this
        that[key+"Timer"] = window.setInterval(()=>{
          //数字每次变化1-10之间
          var rdNum = Math.floor(1+Math.random()*9)
          that[key]=that[key]+rdNum
        },2000)
    },
    goLogin(){
      this.$router.push({
        name: 'SignIn',
      })
    },
  }
})
</script>
<style>
html{ font-size:calc(100vw / 19.2);}
body{ font-size:14px; background: #031934;}
.mot_page{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(../../assets/images/opt_bg.png); background-size: 100% 100%; }
.fxc_page{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(../../assets/images/fxc_bg1.png); background-size: 100% 100%; }
.mot_head{ position: absolute; top: 0; left: 0; width: 100%; height: 11vh; line-height: 11vh; color: #53A0FF; font-size:2vw; text-align: center;font-weight: bold;
background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-background-clip:text;background-clip: text;-webkit-text-fill-color:transparent;
/*-webkit-text-stroke:1px #ffffff; font-style: italic;*/letter-spacing:1vw;}
.fxc_head{ position: absolute; top: 0; left: 0; width: 100%; height: 11vh; display: flex; align-items: center; justify-content: center;}
.fxc_head img{ width: 27vw;}
.fxc_top{ position: absolute; top: 0; left: 0; right: 0;}
.fxc_top_item{ position: absolute; left: 2.4vw; top: 3.7vh; width: 12.6vw; height: 11.1vh; background:url(../../assets/images/fxc_img9.png); background-size: 100% 100%;  display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 0 0 0.6vw;}
.fxc_top_item img{ width: 2.6vw; height: 2.6vw; margin: 0 0.5vw 0 0;}
.fxc_top_num{ font-size:1.25vw; line-height: 1em; font-weight: bold; display: flex;}
.fxc_top_type{ font-size: 1vw; color: #65A3F7;}
.fxc_top_item:nth-child(2){ left: 16.3vw;}
.fxc_top_item:nth-child(3){ left: 71.1vw;}
.fxc_top_item:nth-child(4){ left: 85.1vw;}
.fxc_left{position: absolute; padding: 2vh 0 0 0; top: 23.1vh; left: 2.7vw; width: 25.8vw; height: 73.4vh; background: rgba(14, 97, 182, 0.14);border: 2px solid;border-image: linear-gradient(90deg, #093B77, #3E8EFF, #0C4480) 2 2;}
.fxc_tit{ position: absolute; height: 4.4vh; width: 22vw; top: -4.3vh; background: url(../../assets/images/fxc_img1.png); background-size: 100% 100%; left: 50%; font-size: 0.9vw; font-weight: bold; color: #C6DFFF; margin: 0 -11vw; text-align: center; line-height: 4.4vh;}
.fxc_left_top{ width: 21.7vw; margin: auto; height: 16.5vh; display: flex; justify-content: space-between; align-items: center;background: url(../../assets/images/fxc_img12.png); background-size: 100% 100%;}
.fxc_left_btm{ width: 90%; height: 26vh; position: relative; margin:0 0;}
.fxc_lt_item{ flex: auto; width: 100%; text-align: center; border-left: 1px solid #3089F3;}
.fxc_lt_item:nth-child(1){ border: none;}
.fxc_lt_num{ display: flex; justify-content: center; align-items: center; font-size: 1.8vw;}
.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_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;}
.fxc_win_icon2::after{ content: ""; position: absolute; bottom:-4px; left:-4px; height: 2px; width: 1vw; background: #2DC1FF;}
.fxc_win_icon3::before{ content: ""; position: absolute; top:-4px; right:-4px; width: 2px; height: 1vw; background: #2DC1FF;}
.fxc_win_icon3::after{ content: ""; position: absolute; top:-4px; right:-4px; height: 2px; width: 1vw; background: #2DC1FF;}
.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_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;}

.fxc_right2{ position: absolute; top:62.1vh; 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_lb_con{position: absolute; top: 10px; bottom:20px; right: 10px; display: flex; flex-direction: column; align-items: center; justify-content:center;}
.fxc_lb_item{ margin: 6px auto; color: #ffffff; font-size: 0.18rem; line-height: 0.18rem;}
.fxc_lb_item i{ display: inline-block; width:0.2rem; height: 0.12rem; margin-right:0.08rem;}
.fxc_lb_item span{ margin-left: 0.08rem;}
.fxc_lb_item:nth-child(1) i{background: #23D9E9;}
.fxc_lb_item:nth-child(2) i{background: #89D44B;}
.fxc_lb_item:nth-child(3) i{background: #E82A30;}
.fxc_lb_item:nth-child(1) span{color: #23D9E9;}
.fxc_lb_item:nth-child(2) span{color: #89D44B;}

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