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>
</template>

<script>
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 {
     timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {
     this.timeFn();
    this.cancelLoading();
      this.china_map();
  },
   beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    //中国地图
    china_map() {
      debugger
      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;
    }
  }
</style>