<template>
  <v-scale-screen width="1920" height="1080">
    <div id="cultrue">
      <!-- 左侧 -->
      <div class="leftbox">
        <div class="lb_wht">
          <span class="wh_big_tit">文化</span>
          <span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span>
        </div>
        <!-- 总计进馆总人数 -->
        <div class="inszone">
          <span class="institle">总计进馆人数</span>
          <!-- 今日进馆人数 -->
          <div class="insval">
            <img src="../../assets/wh/td_ins.png" />
            <span id="insv" class="insv">234,098</span>
            <span class="inst">今日进馆人数</span>
          </div>
          <!-- 本月进馆人数 -->
          <div class="insval">
            <img src="../../assets/wh/tm_ins.png" />
            <span id="insv2" class="insv">234,098</span>
            <span class="inst">本月进馆人数</span>
          </div>
          <!-- 本年进馆人数 -->
          <div class="insval">
            <img src="../../assets/wh/tyear_ins.png" />
            <span id="insv3" class="insv">234,098</span>
            <span class="inst">本年进馆人数</span>
          </div>
        </div>
        <!-- 24h ins 统计图 -->
        <div class="dinszone">
          <span class="dins_title">24小时总进馆人流趋势</span>
          <!-- 柱状统计图 -->
          <div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">
        <div class="ctop">24小时进馆人数</div>
        <div class="cmid">
          <div class="cmdiv">
            <span id="cmdval1" class="cmdval">890,098</span>
            <span class="cmdt">博物馆</span>
          </div>
          <div class="cmdiv">
            <span id="cmdval2" class="cmdval">890,098</span>
            <span class="cmdt">文化馆</span>
          </div>
        </div>
        <div class="cbuttom">
          <span id="cmdval3" class="cbval">23,334</span>
          <span class="cbt">图书馆</span>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rightbox">
        <!-- 各场馆人流趋势 -->
        <div class="pcgrliu">
          <span class="pcg_title">各场馆人流趋势</span>
          <div id="pcgchart" style="width: 100%;height: 32vh;margin-top: 20px;"></div>
        </div>
        <!-- 图书馆数据统计 -->
        <div class="tsgrliu">
          <span class="tsg_title">图书馆数据统计</span>
          <div id="tsgchart" style="width: 100%;height: 20vh;margin-top: 20px;"></div>
        </div>
      </div>

    </div>
  </v-scale-screen>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    let cc = window.document.getElementById("app");
    // 清除其他多余的classname
    if (cc.className.indexOf("wh_bg") > -1) {
      cc.className = "btgym";
    } else {
      cc.classList.add("wh_bg");
    }
    console.log(cc.classList)
    this.cultrue_bar1();
    this.cultrue_bar2();
    this.cultrue_bar3();
    this.addNumber(0,234098,'insv')
    this.addNumber(0,234098,'insv2')
    this.addNumber(0,234098,'insv3')
    this.addNumber(0,890098,'cmdval1')
    this.addNumber(0,890098,'cmdval2')
    this.addNumber(0,234098,'cmdval3')
    // var name = ['图书馆', '文化馆', '博物馆']
  },
  methods: {
    cultrue_bar1() {
      var chartDom = document.getElementById("dinschart");
      var myChart = echarts.init(chartDom);
      // var option;
      // var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];

      // var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
      // var data = [Math.random() * 300]
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + "</br>" + params[0].value
          }
        },
        // legend: {
        //   data: ['厂用电量']
        // },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '10%',
          containLabel: true
        },
        xAxis: [{
          data: [
            '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
          ],
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: true
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            // interval: 0,
            // rotate: 0
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          // name: '       今日发电量( KWh )',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: '#027eff'
            }
          },
          axisLabel: {
            color: '#0095FF',
          }
        }],
        series: [{
          // name: '厂用电量',
          type: 'bar',
          barGap: '5%',
          barWidth: '10%',
          barCategoryGap: '60%',
          stack: 1,
          itemStyle: {
            normal: {
              barBorderRadius: [30, 30, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00feff'
                },
                // {
                //   offset: 0.5,
                //   color: '#00feff'
                // },
                {
                  offset: 1,
                  color: '#0286ff'
                }
              ]
              )
            }
          },
          data: [
            14000,
            11000,
            10000,
            9000,
            8000,
            7000,
            5000,
            4000,
            3000,
          ],
          zlevel: 11
        },
        {
          // name: '厂用电量',
          type: 'scatter',
          stack: 1,
          xAxisIndex: 0,
          symbolOffset: [0, 0], //相对于原本位置的偏移量
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: '#fff'
            }
          },
          symbolSize: 13,
          zlevel: 10,
          z: 2,
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: '10%',
          barGap: '-100%',
          data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
          itemStyle: {
            normal: {
              color: '#004298',
              barBorderRadius: 30,
              // backgroundColor:'#091C24'
              // borderColor:'#00D1F0'
            }
          },
          z: 1,
        },
        ]
      }


      option && myChart.setOption(option);
    },
    cultrue_bar2() {
      var chartDom = document.getElementById("pcgchart");
      var myChart = echarts.init(chartDom);

      var option
      //       var xData = function() {
      //     var data = [];
      //     for (var i = 2011; i < 2017; i++) {
      //         data.push(i + "年");
      //     }
      //     return data;
      // }();
      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = ['图书馆', '文化馆', '博物馆']
      var data = [
        [137, 34, 135, 161, 74, 152, 110, 100, 150],
        [174, 137, 135, 34, 152, 135, 140, 160, 100],
        [134, 74, 137, 135, 161, 137, 300, 220, 250],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
      ]

      var series = [];
      for (var i = 0; i < 6; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color[i]
              }, {
                offset: 0.8,
                color: 'rgba(255,255,255,0)'
              }], false),
              // shadowColor: 'rgba(255,255,255, 0.1)',
              shadowBlur: 10,
              opacity: 0.3,
            }
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: 'solid' //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
              barBorderRadius: 0,
              label: {
                show: false,
              },
              opacity: 0.5,
            }
          },
          data: data[i],

        })
      }
      option = {
        // backgroundColor: "#141f56",
        legend: {
          top: 0,
          left:0,
          itemGap: 25,
          itemWidth: 0,
          itemHeight:18,

          textStyle: {
            color: '#fff',
            fontSize: '14',
            padding: [1, 12]
          },
          data: name
        },
        title: {
          // text: "负面言论分领域趋势",
          textStyle: {
            color: '#fff',
            fontSize: '22',
            fontWeight: 'normal',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',

          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], //内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        },
        grid: {
          borderWidth: 0,
          top: 250,
          bottom: 250,
          right:15,
          left:30,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#32346c ',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#0095FF',
              fontWeight: 'normal',
              fontSize: '12',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

      option && myChart.setOption(option);
    },
    cultrue_bar3() {
      var chartDom = document.getElementById("tsgchart");
      var myChart = echarts.init(chartDom);
      var option;

      var data = [{
        name: '今日办证人数',
        value: 323,
      },
      {
        name: '今日还书册数',
        value: 209,
      },
      {
        name: '今日借书册数',
        value: 323,
      },
        // {
        //   name: 'user4',
        //   value: 44,
        //   sum: 60
        // }, {
        //   name: 'user1',
        //   value: 10,
        //   sum: 10
        // },
        // {
        //   name: 'user2',
        //   value: 20,
        //   sum: 10
        // },
        // {
        //   name: 'user3',
        //   value: 53,
        //   sum: 50
        // },
        // {
        //   name: 'user4',
        //   value: 24,
        //   sum: 60
        // }, {
        //   name: 'user1',
        //   value: 10,
        //   sum: 10
        // },
        // {
        //   name: 'user2',
        //   value: 20,
        //   sum: 10
        // }
      ];
      var getArrByKey = (data, k) => {
        let key = k || "value";
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      };
      var getSymbolData = (data) => {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: 'end'
          })
        }
        return arr;
      }
      // var opt = {
      //     index: 0
      //   }
      // var color = ['#A71A2B'];
      // data = data.sort((a, b) => {
      //   return b.value - a.value
      // });

      console.log(getSymbolData(data));
      option = {
        // backgroundColor: '#000000',
        grid: {
          top: '2%',
          bottom: -15,
          right: -48,
          left: 30,
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          // inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            interval: 0,
            color: '#fff',
            align: 'left',
            margin: 80,
            fontSize: 12,
            formatter: function (value) {
              return '{title|' + value + '}'
            },
            rich: {
              title: {
                width: 165
              }
            }
          },
        }, {
          triggerEvent: true,
          show: true,
          // inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            shadowOffsetX: '-20px',
            color: '#fff',
            align: 'right',
            verticalAlign: 'bottom',
            lineHeight: 30,
            fontSize: 16,
            formatter: function (value, index) {
              return data[index].value + ' 册 '
            },
          }
        }],
        series: [{
          name: 'XXX',
          type: 'pictorialBar',
          symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: '#14b1eb'
            }
          },
          data: getSymbolData(data)
        }, {
          name: '条',
          type: 'bar',
          showBackground: true,
          barBorderRadius: 30,
          yAxisIndex: 0,
          data: data,
          barWidth: 10,
          // align: left,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [{
                  offset: 0,
                  color: '#A71A2B'
                },
                {
                  offset: 0.7,
                  color: '#A71A2B'
                },
                {
                  offset: 1,
                  color: '#5EDEE5'
                }
                ],

                false
              ),
              barBorderRadius: 10
            },
            // color: '#A71A2B',
            barBorderRadius: 4,
          },
          label: {
            normal: {
              color: '#fff',
              show: true,
              position: [0, '-20px'],
              textStyle: {
                fontSize: 16
              },
              formatter: function (a) {
                return a.name
              }
            }
          }
        }]
      };

      option && myChart.setOption(option);
    },
    addNumber(start, end, id) {
      var o = document.getElementById(id);
      var i = start;
      var Interval;
      if (i < end) {
        Interval = setInterval(function () {
          i += 4000; // 设置每次增加的动态数字，可调整
          if (i > end) {
            clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
            o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
            i = 0;
          } else {
            o.innerHTML = i.toLocaleString();
          }
        }, 10); // 数据跳转的速度控制
      }
    }
  },
};
</script>
<style lang="scss" scoped="scoped">
#cultrue {
  width: 100%;
  // height: 100%;
  /* float: left; */
  margin: 0 auto;
}

/* 左边 */
.leftbox {
  width: 25%;
  float: left;
  color: #fff;
}

.leftbox .lb_wht {
  background-image: url("../../assets/wh/wht_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 3.8rem;
  // height: vh(142.5);
}

.leftbox .lb_wht span {
  display: block;
}

.leftbox .lb_wht .wh_big_tit {
  font-size: 0.68rem;
  /* line-height: 4.2rem; */
  text-align: right;
  padding-top: 120px;
  /* padding-top: 3.2rem; */
}

.leftbox .lb_wht .wh_small {
  padding-top: 12px;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
}

/* 总计进馆人数 */
.inszone {
  width: 100%;
  float: left;
  height: 2.4rem;
  background-image: url("../../assets/wh/ins_count.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 0.48rem;
}

.inszone .institle {
  color: #00c6ff;
  padding-left: 0.5rem;
  line-height: 0.38rem;
  height: 0.38rem;
  display: block;
  font-size: 16px;
}

.inszone .insval {
  width: 30%;
  height: 1.68rem;
  float: left;
  margin-left: 0.16rem;
}

.inszone .insval:first {
  margin-left: 0;
}

.inszone .insval img {
  padding-top: 0.268rem;
  display: block;
  text-align: center;
  height: 0.78rem;
  margin-left: auto;
  margin-right: auto;
}

.inszone .insval span {
  display: block;
  width: 100%;
  text-align: center;
}

.inszone .insval .insv {
  height: 0.48rem;
  line-height: 0.48rem;
  font-size: 22px;
}

.inszone .insval .inst {
  color: #6a6c7c;
  font-size: 12px;
  height: 0.12rem;
  line-height: 0.12rem;
}

/* 24小时进馆总趋势 */
.dinszone {
  margin-top: 0.22rem;
  width: 100%;
  height: 0.48rem;
  float: left;
}

.dinszone .dins_title {
  display: block;
  height: 0.38rem;
  line-height: 0.28rem;
  color: #fff;
  font-size: 0.186rem;
  background-image: url('../../assets/wh/dins_title_bg.png');
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-left: 0.66rem;
}

/* 中间部位 */
.center {
  margin-top: 4vh;
  width: 50%;
  float: left;
  height: 74vh;
  padding-top: 2vh;
  background-image: url('../../assets/wh/center_bg.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

.center .ctop {
  margin-top: 0.5vh;
  height: 4vh;
  line-height: 4vh;
  color: #fff;
  font-size: 24px;
  text-align: center;
}

/* 中间中部 */
.center .cmid {
  padding-top: 32vh;
  width: 100%;
  height: 12vh;
}

.center .cmid .cmdiv {
  width: 60%;
  float: left;
  padding-top: 3vh;
}

.center .cmid .cmdiv span {
  display: block;
  width: 100%;
  float: left;
}

.center .cmid .cmdiv .cmdval {
  color: #fff;
  font-size: 36px;
  padding-left: 12%;
}

.center .cmid .cmdiv .cmdt {
  color: #00c6ff;
  font-size: 14px;
  width: 6vw;
  height: 2vh;
  text-align: center;
  background: url('../../assets/wh/ct_bg.png') no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  margin-left: 15%;
}

.center .cmid .cmdiv:nth-child(2) {
  padding-right: 10%;
  text-align: right;
  width: 20%;
  padding-left: 9.8%;
}

.center .cmid .cmdiv:nth-child(2) .cmdval {
  text-align: right;
  padding-right: 30% !important;
  margin-right: 16%;
}

.center .cmid .cmdiv:nth-child(2) .cmdt {
  /* padding-right:30% !important; */
  margin-right: 25%;
  margin-left: 40%;
}

/* 中间底部 */
.center .cbuttom {
  margin-top: 12vh;
  padding-top: 3.5vh;
  height: 6vh;
  line-height: 6vh;
  text-align: center;
}

.center .cbuttom span {
  display: block;
  float: left;
}

.center .cbuttom .cbval {
  padding-top: 3vh;
  font-size: 36px;
  color: #fff;
  height: 2vh;
  line-height: 2vh;
  width: 100%;
}

.center .cbuttom .cbt {
  color: #00c6ff;
  height: 2vh;
  line-height: 2vh;
  background: url('../../assets/wh/ct_bg.png') no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  width: 6vw;
  margin-left: 45%;
  margin-top: 1vh;
}

/* 右边 */
.rightbox {
  width: 25%;
  float: left;
}

.rightbox .pcgrliu {
  margin-top: 10vh;
  height: 26vh;
}

.rightbox .pcgrliu .pcg_title {
  display: block;
  height: 4vh;
  line-height: 3vh;
  background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
  background-size: 100% 100%;
  background-position: 0 center;
  padding-left: 0.68rem;
  color: #fff;
  font-size: 16px;
}

.rightbox .tsgrliu {
  margin: 14vh 0 0 0;
  height: 26vh;
}

.rightbox .tsgrliu .tsg_title {
  display: block;
  height: 4vh;
  line-height: 3vh;
  background: url('../../assets/wh/tsg_t_bg.png') no-repeat;
  background-size: 100% 100%;
  background-position: 0 center;
  padding-left: 0.68rem;
  color: #fff;
  font-size: 16px;
}

/* 全局背景 */
.wh_bg {
  clear: both;
  background-image: url("../../assets/wh/whbg.jpg") !important;
}


.screen-box {
  background: none !important;
}
</style>