yiliangyiyun-pc-jj/src/views/home/index.vue

<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="winseaview-view">
    <div class="host-body">
      <div class="d-flex jc-center title_wrap">
        <div class="zuojuxing"></div>
        <div class="youjuxing"></div>
        <div class="guang"></div>
        <div class="d-flex jc-center">
          <div class="title">
            <span class="title-text">易粮易运大数据分析平台</span>
          </div>
        </div>
        <div class="timers ">

          {{ dateYear }} {{ dateWeek }} {{ dateDay }}
          <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
        </div>
      </div>
    </div>
    <div class="contents ">
      <div class="contetn_left">
        <div class="pagetab">
          <!-- <div class="item">实时监测</div> -->

        </div>
        <ItemWrap class="contetn_left-top contetn_lr-item" title="在途信息统计">
          <LeftTop :listData="leftTopDataList"/>
        </ItemWrap>
        <ItemWrap class="contetn_left-center contetn_lr-item" title="合营比例">
          <LeftCenter />
        </ItemWrap>
        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="在途信息" style="padding: 0 10px 16px 10px">
          <LeftBottom />
        </ItemWrap>
      </div>
      <div class="contetn_center">
        <div class="maptitle">
          <div class="zuo"></div>
          <span class="titletext">库点流向分布</span>
          <div class="you"></div>
        </div>
        <dv-border-box-13>
          <div id="china-map"></div>
        </dv-border-box-13>
        <dv-border-box-1 class="center_bottom">
          <div class="center_bottom_content">

            <div class="row1">
              <div class="item_title">
                <!-- <div class="zuo"></div> -->
                <span class="title-inner"> 头寸</span>
                <!-- <div class="you"></div> -->
              </div>
              <div>123123吨</div>
            </div>
            <div class="row2 ">
              <div class="item_title">
                <span class="title-inner"> 实际库存</span>
                <div>123123吨</div>
              </div>
              <div class="item_title">
                <div class="title-inner">采购待执行（吨）</div>
                <div>123123吨</div>
              </div>
              <div class="item_title">
                <div class="title-inner">销售待执行（吨）</div>
                <div>123123吨</div>
              </div>

            </div>
          </div>
        </dv-border-box-1>
        <!-- <CenterMap class="contetn_center_top" /> -->
        <!-- <ItemWrap class="contetn_center-bottom" title="安装计划">
        <CenterBottom />
      </ItemWrap> -->
      </div>
      <div class="contetn_right">
        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="出入库分布">
          <RightTop />
        </ItemWrap>
        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="库存排名" style="padding: 0 10px 16px 10px">
          <RightCenter />
        </ItemWrap>
        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="最新合同 ">
          <RightBottom />
        </ItemWrap>
      </div>
    </div>
  </div>
</template>

<script>
import {
  gChartsData,
} from '@/model/home/index'
import { formatTime } from '../../utils/index.js';
import LeftTop from './left-top.vue'
import LeftCenter from './left-center.vue';
import LeftBottom from './left-bottom.vue';
import RightTop from './right-top.vue';
import RightCenter from './right-center.vue';
import RightBottom from './right-bottom.vue';
// import CenterMap from "./center-map.vue";
export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftBottom,
    // CenterMap,
    RightTop,
    RightCenter,
    RightBottom
  },
  data() {
    return {
      leftTopDataList:[],
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },
  mounted() {
    gChartsData({
      compId: localStorage.getItem('ws-pf_compId'),
      loadingstatus: 1,
      seachMoth: '2022'
    }).toPromise().then(res => {
      console.log('··············', res)
      this.leftTopDataList = res[2].biViewInfoList
      this.timeFn();
      this.cancelLoading();
      this.china_map();

    })

  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    //中国地图
    china_map() {
      let mapChart = this.$echarts.init(document.getElementById('china-map')); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      let series = []; //存放循环配置项
      let res = []; //存放射线的起始点和结束点位置
      let province = []; //存放有射线的省的名字，以此来拿到对应省份的坐标
      //提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
      let chinaGeoCoordMap = {
        新疆: [86.9023, 41.148],
        西藏: [87.8695, 31.6846],
        内蒙古: [110.5977, 41.3408],
        青海: [95.2402, 35.4199],
        四川: [102.9199, 30.1904],
        黑龙江: [128.1445, 46.7156],
        甘肃: [102.7129, 38.166],
        云南: [101.0652, 24.6807],
        广西: [108.7813, 23.6426],
        湖南: [111.5332, 27.3779],
        陕西: [108.5996, 33.7396],
        广东: [113.8668, 22.8076],
        吉林: [126.1746, 43.5938],
        河北: [115.4004, 38.1688],
        湖北: [112.2363, 30.8572],
        贵州: [106.6113, 26.6385],
        山东: [118.2402, 36.2307],
        江西: [115.7156, 27.99],
        河南: [113.0668, 33.8818],
        辽宁: [123.0438, 41.0889],
        山西: [112.4121, 36.6611],
        安徽: [117.2461, 31.0361],
        福建: [118.3008, 25.9277],
        浙江: [120.498, 29.0918],
        江苏: [119.8586, 32.915],
        重庆: [107.7539, 29.8904],
        宁夏: [105.9961, 37.1096],
        海南: [109.9512, 19.2041],
        台湾: [120.8254, 23.5986],
        北京: [116.4551, 40.2539],
        天津: [117.4219, 39.4189],
        上海: [121.4648, 31.2891],
        香港: [114.6178, 22.3242],
        澳门: [113.5547, 21.6484],
      };
      //后台给的数据模拟
      let lineData = [
        {
          val: 32, //数据
          blat: [86.9023, 41.148], //发射点
          elon: [87.8695, 31.6846], //接收点
          bcitysim: '新疆', //发射省的名字
          ecitysim: '西藏', //接收省的名字
        },
        {
          val: 31,
          blat: [87.8695, 31.6846],
          elon: [95.2402, 35.4199],
          bcitysim: '西藏',
          ecitysim: '青海',
        },
        {
          val: 33,
          blat: [86.9023, 41.148],
          elon: [95.2402, 35.4199],
          bcitysim: '新疆',
          ecitysim: '青海',
        },
        {
          val: 33,
          blat: [116.4551, 40.2539],
          elon: [119.8586, 32.915],
          bcitysim: '北京',
          ecitysim: '江苏',
        },
        {
          val: 33,
          blat: [120.8254, 23.5986],
          elon: [109.9512, 19.2041],
          bcitysim: '台湾',
          ecitysim: '海南',
        },
        {
          val: 33,
          blat: [120.498, 29.0918],
          elon: [115.7156, 27.99],
          bcitysim: '浙江',
          ecitysim: '江西',
        },
        {
          val: 33,
          blat: [117.2461, 31.0361],
          elon: [119.8586, 32.915],
          bcitysim: '安徽',
          ecitysim: '江苏',
        },
        {
          val: 33,
          blat: [117.2461, 31.0361],
          elon: [105.9961, 37.1096],
          bcitysim: '安徽',
          ecitysim: '宁夏',
        },
        {
          val: 33,
          blat: [117.2461, 31.0361],
          elon: [107.7539, 29.8904],
          bcitysim: '安徽',
          ecitysim: '重庆',
        },
        {
          val: 33,
          blat: [117.2461, 31.0361],
          elon: [123.0438, 41.0889],
          bcitysim: '安徽',
          ecitysim: '辽宁',
        },
        {
          val: 33,
          blat: [119.8586, 32.915],
          elon: [102.7129, 38.166],
          bcitysim: '江苏',
          ecitysim: '甘肃',
        },
        {
          val: 33,
          blat: [119.8586, 32.915],
          elon: [128.1445, 46.7156],
          bcitysim: '江苏',
          ecitysim: '黑龙江',
        },
        {
          val: 33,
          blat: [119.8586, 32.915],
          elon: [110.5977, 41.3408],
          bcitysim: '江苏',
          ecitysim: '内蒙古',
        },
        {
          val: 33,
          blat: [119.8586, 32.915],
          elon: [101.0652, 24.6807],
          bcitysim: '江苏',
          ecitysim: '云南',
        },
        {
          val: 33,
          blat: [119.8586, 32.915],
          elon: [86.9023, 41.148],
          bcitysim: '江苏',
          ecitysim: '新疆',
        },
        {
          val: 33,
          blat: [86.9023, 41.148],
          elon: [110.5977, 41.3408],
          bcitysim: '新疆',
          ecitysim: '内蒙古',
        },
        {
          val: 33,
          blat: [86.9023, 41.148],
          elon: [102.9199, 30.1904],
          bcitysim: '新疆',
          ecitysim: '四川',
        },
      ];
      //循环拿到处理好的数据
      for (var i = 0; i < lineData.length; i++) {
        province.push(lineData[i].bcitysim); //存进去每个省的名字
        province.push(lineData[i].ecitysim); //存进去每个省的名字
        res.push({
          fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
          toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
          coords: [
            lineData[i].blat, //发射
            lineData[i].elon, //接收
          ],
          count: lineData[i].val, //数据
        });
      }
      let index_data = new Set(province); //把省的名字去重
      let data_res = []; //定义一个新的变量存放省的坐标

      //注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
      index_data.forEach((item) => {
        data_res.push({
          name: item, //每个省的名字
          value: chinaGeoCoordMap[item], //每个省的坐标
        });
      });
      //循环往series内添加配置项
      series.push(
        {
          //射线效果图层
          type: 'lines', //类型：射线
          zlevel: 1, //类似图层效果
          effect: {
            show: true, //是否显示图标
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          },
          label: {
            show: true,
          },
          lineStyle: {
            color: '#fff',
            normal: {
              color: '#00A0FF',
              width: 1, //尾迹线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.1, //尾迹线条曲直度
            },
          },
          //提示框信息
          tooltip: {
            formatter: function (param) {
              return (
                param.data.fromName +
                '>' +
                param.data.toName +
                '<br>数量：' +
                param.data.count
              );
            },
          },
          data: res, //拿到射线的起始点和结束点
        },
        //散点图
        // {
        //   type: "effectScatter",//散点图
        //   coordinateSystem: "geo",//这个不能删，删了不显示
        //   zlevel: 1,
        //   rippleEffect: {
        //     //涟漪特效
        //     period: 4, //动画时间，值越小速度越快
        //     brushType: "stroke", //波纹绘制方式 stroke, fill
        //     scale: 4, //波纹圆环最大限制，值越大波纹越大
        //   },
        //   //设置文字部分
        //   label: {
        //     normal: {
        //       show: true, //省份名显示隐藏
        //       position: "right", //省份名显示位置
        //       offset: [5, 0], //省份名偏移设置
        //       formatter: function (params) {
        //         //圆环显示省份名
        //         return params.name;  //这个名字是根据data中的name来显示的
        //       },
        //       fontSize: 12,//文字大小
        //     },
        //     emphasis: {
        //       show: true,
        //     },
        //   },
        //   symbol: "circle",//散点图
        //   symbolSize: 5,//散点大小
        //   itemStyle: {//散点样式
        //     normal: {
        //       show: true,
        //       color: "#fff",
        //     },
        //   },
        //   data: data_res, //处理好后的散点图坐标数组
        // },
        //点击高亮
        {
          type: 'map',
          mapType: 'china',
          zlevel: 1,
          roam: true,
          geoIndex: 0,
          tooltip: {
            show: true,
          },
          itemStyle: {
            areaColor: '#00196d',
            borderColor: '#0a53e9',
          },
          emphasis: {
            show: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              areaColor: '#00196d',
              borderColor: '#0a53e9',
            },
          },
        }
      );
      //配置
      let option = {
        //title可要可不要

        // title: {
        //   text: "查查的地图",
        //   textStyle: {
        //     color: "#ffffff",
        //   },
        // },
        legend: {
          show: true,
          selected: {},
          x: 'left',
          orient: 'vertical',
          textStyle: {
            color: 'white',
          },
          data: [],
        },
        //鼠标移上去的弹框
        tooltip: {
          trigger: 'item',
          show: true,
        },
        //geo：这是重点
        geo: {
          map: 'china', //中国地图
          zoom: 1.2, //缩放倍数
          roam: false, //是否允许缩放和拖拽地图
          label: {
            normal: {
              show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
              textStyle: {
                //名字的样式
                color: '#fff',
              },
            },
            emphasis: {
              show: true,
            },
          },
          //地图样式
          itemStyle: {
            normal: {
              borderColor: '#293171', //地图边框颜色
              borderWidth: '2', //地图边框粗细
              areaColor: '#0A0F33', //地图背景色
            },
            //省份地图阴影
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: '#fff',
            },
          },
        },
        series: series, //图表配置
      };
      mapChart.setOption(option); //生成图表
    },
    showSetting() {
      this.$refs.setting.init()
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
// &.pageisScale {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     transform-origin: left top;
// }
.winseaview-view {
  background: #03050C
}

.bg {
  width: 100%;
  height: 100%;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  background-image: url("../../assets/images/pageBg.png");
  background-size: cover;
  background-position: center center;
}

.host-body {

  .title_wrap {
    height: 60px;
    background-image: url("../../assets/images/top.png");
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-bottom: 4px;

    .guang {
      position: absolute;
      bottom: -26px;
      background-image: url("../../assets/images/guang.png");
      background-position: 80px center;
      width: 100%;
      height: 56px;
    }

    .zuojuxing,
    .youjuxing {
      position: absolute;
      top: -2px;
      width: 140px;
      height: 6px;
      background-image: url("../../assets/images/headers/juxing1.png");
    }

    .zuojuxing {

      left: 11%;
    }

    .youjuxing {
      right: 11%;
      transform: rotate(180deg);
    }

    .timers {
      position: absolute;
      right: 0;
      top: 30px;
      font-size: 18px;
      display: flex;
      align-items: center;

      .blq-icon-shezhi02 {
        cursor: pointer;
      }
    }
  }

  .title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 46px;

    .title-text {
      font-size: 38px;
      font-weight: 900;
      letter-spacing: 6px;
      width: 100%;
      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}


.index_home {
  .pagetab {
    position: absolute;
    top: -35px;
    display: flex;

    .item {
      width: 130px;
      height: 36px;
      border-radius: 18px 0px 0px 18px;
      color: #00FBF8;
      text-indent: 26px;
      line-height: 36px;
      font-size: 16px;
      margin-right: 20px;
      background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
    }
  }
}

.setting {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;

  .left_shu {
    color: #000;
    font-weight: 900;
    position: relative;
    text-indent: 10px;
    padding: 16px 0 10px 0;

    &::before {
      display: block;
      content: " ";
      height: 16px;
      width: 4px;
      border-radius: 2px;
      background: #0072FF;
      position: absolute;
      left: 0px;
    }
  }

  .setting_dislog {
    background-color: rgba($color: #000000, $alpha: .5);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    right: 0;
    top: 0;
  }

  .setting_inner {
    box-sizing: border-box;
    background: #FFF;
    width: 340px;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0;
    z-index: 1;
    color: #000000;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);

    .setting_header {
      font-size: 20px;
      color: rgb(0, 0, 0);
      font-weight: 900;
      text-align: center;
      line-height: 40px;
    }

    .setting_body {
      padding: 0px 16px;
      box-sizing: border-box;
      position: relative;
    }

    .setting_item {
      font-size: 14px;
      line-height: 1.5;

      // display: flex;
      .setting_label {
        color: #555454;
      }

      .setting_label_tip {
        font-size: 12px;
        color: #838282;
      }
    }
  }

  .setting_inner {
    animation: rtl-drawer-out .3s;
  }
}


.settingShow {
  .setting_inner {
    animation: rtl-drawer-in .3s 1ms;
  }

}

.yh-setting-fade-enter-active {
  animation: yh-setting-fade-in .3s;
}

.yh-setting-fade-leave-active {

  animation: yh-setting-fade-out .3s;

}

@keyframes yh-setting-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes yh-setting-fade-out {
  0% {
    opacity: 1;

  }

  100% {
    opacity: 0;
  }
}


@keyframes rtl-drawer-in {
  0% {
    transform: translate(100%, 0)
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
  }
}

@keyframes rtl-drawer-out {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(100%, 0)
  }
}

// 内容
.contents {
  width: 100%;
  display: flex;
  min-height: calc(100% - 60px);
  justify-content: space-between;

  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 720px;
  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 270px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;


  }
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}

#china-map {
  height: 540px;
  width: 100%;
  top: 0;
}

.maptitle {
  height: 60px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;

  .titletext {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 10px;
  }

  .zuo,
  .you {
    background-size: 100% 100%;
    width: 29px;
    height: 20px;
    margin-top: 8px;
  }

  .zuo {
    background: url("../../assets/images/xiezuo.png") no-repeat;
  }

  .you {
    background: url("../../assets/images/xieyou.png") no-repeat;
  }
}

.center_bottom {
  color: #fff;
  font-size: 30px;
}

.center_bottom_content {
  padding: 20px;
  box-sizing: border-box;
}

.item_title {
  display: flex;
  align-items: center;
}

.zuo,
.you {
  width: 58px;
  height: 14px;
  background-image: url("../../assets/images/titles/zuo.png");
}

.you {
  transform: rotate(180deg);
}

.title-inner {
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.row1 {
  display: flex
}
</style>