|
|
@@ -0,0 +1,1247 @@
|
|
|
+<template>
|
|
|
+ <div class="visualizing-demo1">
|
|
|
+ <div class="visualizing-container">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <div class="visualizing-container-head">
|
|
|
+ <div class="visualizing-container-head-left">
|
|
|
+ <div class="visualizing-container-head-left-text">
|
|
|
+ <div class="visualizing-container-head-left-text-box">{{ state.time.txt }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-head-center">
|
|
|
+ <div class="visualizing-container-head-center-box">
|
|
|
+ <div class="visualizing-container-head-center-mainTitle">宜宾市12345数据展示</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-head-right">
|
|
|
+ <div class="visualizing-container-head-right-text">
|
|
|
+ <div class="visualizing-container-head-right-text-box">🌤 多云转晴东南风 26~30℃</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表左侧 -->
|
|
|
+ <div class="visualizing-container-content-left">
|
|
|
+ <div class="visualizing-container-content-left-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-shop"></i>
|
|
|
+ <span>受理工单概览</span>
|
|
|
+ </div>
|
|
|
+ <bv-scroll-table :config="config" class="mt5" style="width: 100%; height: 100%"></bv-scroll-table>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-left-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-promotion"></i>
|
|
|
+ <span>问题类型统计</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentLeftBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-left-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-shop"></i>
|
|
|
+ <span>部门案件办理情况</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentLeftTop" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-left-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-promotion"></i>
|
|
|
+ <span>问题高发 TOP5</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentLeftBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表中间 -->
|
|
|
+ <div class="visualizing-container-content-center">
|
|
|
+ <div class="visualizing-container-content-center-top">
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">今日案件总数</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful1">
|
|
|
+ <bv-count-to :startVal="0" :endVal="18" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">正在办理</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful2">
|
|
|
+ <bv-count-to :startVal="0" :endVal="2" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">已办案件</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful3">
|
|
|
+ <bv-count-to :startVal="0" :endVal="16" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">本年接件量</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful4">
|
|
|
+ <bv-count-to :startVal="0" :endVal="1007" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">本年办结量</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful5">
|
|
|
+ <bv-count-to :startVal="0" :endVal="987" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ <bv-border-box name="border2" class="visualizing-container-content-center-top-box"
|
|
|
+ ><p class="visualizing-container-content-center-top-box-title">累计接件量</p>
|
|
|
+ <p class="visualizing-container-content-center-top-box-value colorful6">
|
|
|
+ <bv-count-to :startVal="0" :endVal="1345123" ref="countTo" separator=""></bv-count-to>
|
|
|
+ </p>
|
|
|
+ </bv-border-box>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <div class="visualizing-container-content-center-middle">
|
|
|
+ <div ref="visualizingDemo1" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-center-bottom boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-flag"></i>
|
|
|
+ <span>办理情况 TOP5</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentCenterBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图表右侧 -->
|
|
|
+ <div class="visualizing-container-content-right">
|
|
|
+ <div class="visualizing-container-content-right-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-marketing"></i>
|
|
|
+ <span>办件状态分析</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentRightTop" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-right-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-data"></i>
|
|
|
+ <span>坐席话务实况</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentRightBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-right-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-data"></i>
|
|
|
+ <span>来源占比分析</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentRightBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="visualizing-container-content-right-flex boxBg">
|
|
|
+ <div class="visualizing-container-title">
|
|
|
+ <i class="el-icon-s-data"></i>
|
|
|
+ <span>投诉热词</span>
|
|
|
+ </div>
|
|
|
+ <div ref="visualizingContentRightBottom" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="visualizingLinkDemo1">
|
|
|
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import 'echarts/extension/bmap/bmap';
|
|
|
+import { formatDate } from '/@/utils/formatTime';
|
|
|
+import { NextLoading } from '/@/utils/loading';
|
|
|
+import { echartsMapData, echartsMapImgs, echartsMapList } from './mock/demo1';
|
|
|
+import Watermark from '/@/utils/watermark';
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const visualizingDemo1 = ref();
|
|
|
+const visualizingContentLeftTop = ref();
|
|
|
+const visualizingContentLeftBottom = ref();
|
|
|
+const visualizingContentCenterBottom = ref();
|
|
|
+const visualizingContentRightTop = ref();
|
|
|
+const visualizingContentRightBottom = ref();
|
|
|
+const state = reactive({
|
|
|
+ echartsMapList,
|
|
|
+ echartsMapData,
|
|
|
+ echartsMapImgs,
|
|
|
+ time: {
|
|
|
+ txt: '',
|
|
|
+ fun: 0,
|
|
|
+ },
|
|
|
+ myCharts: [] as EmptyArrayType,
|
|
|
+});
|
|
|
+
|
|
|
+// 初始化时间
|
|
|
+const initTime = () => {
|
|
|
+ state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
|
|
|
+ state.time.fun = window.setInterval(() => {
|
|
|
+ state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
|
|
|
+ }, 1000);
|
|
|
+};
|
|
|
+// echartsMap 将坐标信息和对应物理量的值合在一起
|
|
|
+const convertData = (data: any) => {
|
|
|
+ let res = [];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ let geoCoord = state.echartsMapData[data[i].name];
|
|
|
+ if (geoCoord) {
|
|
|
+ res.push({
|
|
|
+ name: data[i].name,
|
|
|
+ value: geoCoord.concat(data[i].value),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+};
|
|
|
+//
|
|
|
+const config = reactive({
|
|
|
+ header: ['列1', '列2', '列3'],
|
|
|
+ data: [
|
|
|
+ ['行1列1', '行1列2', '行1列3'],
|
|
|
+ ['行2列1', '行2列2', '行2列3'],
|
|
|
+ ['行3列1', '行3列2', '行3列3'],
|
|
|
+ ['行4列1', '行4列2', '行4列3'],
|
|
|
+ ['行5列1', '行5列2', '行5列3'],
|
|
|
+ ['行6列1', '行6列2', '行6列3'],
|
|
|
+ ['行7列1', '行7列2', '行7列3'],
|
|
|
+ ['行8列1', '行8列2', '行8列3'],
|
|
|
+ ['行9列1', '行9列2', '行9列3'],
|
|
|
+ ['行10列1', '行10列2', '行10列3'],
|
|
|
+ ],
|
|
|
+ headerBGC: 'rgba(0, 0, 0, .3)',
|
|
|
+ oddRowBGC: 'rgba(25, 140, 139, 0.1)',
|
|
|
+ evenRowBGC: 'rgba(25, 140, 139, 0.2)',
|
|
|
+});
|
|
|
+// 初始化 echartsMap（地图上的点）
|
|
|
+const initEchartsMap = () => {
|
|
|
+ const myChart = echarts.init(<HTMLElement>visualizingDemo1.value);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter(params: any) {
|
|
|
+ // 自定义鼠标放入样式
|
|
|
+ let item = state.echartsMapImgs.find((v: any) => v.name === params.name);
|
|
|
+ return `<div style="width: 240px;">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px" alt=""/>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ background: #51c1ff;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ margin-left: -14px;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ color: #fff;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ ${item?.name}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px; font-size: 12px">
|
|
|
+ <div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
|
|
|
+ <div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px; font-size: 12px">
|
|
|
+ <div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
|
|
|
+ <div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#ea7ccc'],
|
|
|
+ bmap: {
|
|
|
+ center: [114.064524, 22.549225],
|
|
|
+ zoom: 11,
|
|
|
+ roam: true,
|
|
|
+ mapStyle: {},
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '门票收入',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'bmap',
|
|
|
+ data: convertData(state.echartsMapList),
|
|
|
+ symbolSize: function (val: any) {
|
|
|
+ return val[2] / 10;
|
|
|
+ },
|
|
|
+ encode: {
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '门票收入',
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'bmap',
|
|
|
+ data: convertData(
|
|
|
+ state.echartsMapList
|
|
|
+ .sort(function (a: any, b: any) {
|
|
|
+ return b.value - a.value;
|
|
|
+ })
|
|
|
+ .slice(0, 6)
|
|
|
+ ),
|
|
|
+ symbolSize: function (val: any) {
|
|
|
+ return val[2] / 10;
|
|
|
+ },
|
|
|
+ encode: {
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ showEffectOn: 'render',
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: 'stroke',
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ label: {
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 100,
|
|
|
+ shadowColor: '#333',
|
|
|
+ },
|
|
|
+ zlevel: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+
|
|
|
+ // 地图
|
|
|
+ const map = (<any>myChart).getModel().getComponent('bmap').getBMap();
|
|
|
+ // BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
|
|
|
+ // BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
|
|
|
+ // BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
|
|
|
+ // BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ map.setMapType(BMAP_SATELLITE_MAP);
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ let bdary = new BMap.Boundary();
|
|
|
+ // 获取行政区域
|
|
|
+ bdary.get('深圳', function (rs: any) {
|
|
|
+ // 行政区域的点有多少个
|
|
|
+ let count = rs.boundaries.length;
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ let ply = new BMap.Polygon(rs.boundaries[i], {
|
|
|
+ // 设置多边形边线线粗
|
|
|
+ strokeWeight: 4,
|
|
|
+ // 设置多边形边线透明度0-1
|
|
|
+ strokeOpacity: 1,
|
|
|
+ // 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
|
|
|
+ StrokeStyle: 'dashed',
|
|
|
+ // 设置多边形边线颜色
|
|
|
+ strokeColor: '#febb50',
|
|
|
+ // 设置多边形填充颜色
|
|
|
+ fillColor: '',
|
|
|
+ });
|
|
|
+ // 建立多边形覆盖物
|
|
|
+ // 添加覆盖物
|
|
|
+ map.addOverlay(ply);
|
|
|
+ // 调整视野
|
|
|
+ map.setViewport(ply.getPath());
|
|
|
+ }
|
|
|
+ // 初始化地图，设置中心点坐标和地图级别
|
|
|
+ // new BMap.Point('深圳市', 11)
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
|
|
|
+ });
|
|
|
+};
|
|
|
+// 产业概况
|
|
|
+const initVisualizingContentLeftTop = () => {
|
|
|
+ const myChart = echarts.init(visualizingContentLeftTop.value);
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ right: 0,
|
|
|
+ bottom: 50,
|
|
|
+ left: 30,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '价格',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.3)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.02)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '预购队列',
|
|
|
+ type: 'line',
|
|
|
+ data: [200, 85, 112, 275, 305, 415],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最新成交价',
|
|
|
+ type: 'line',
|
|
|
+ data: [50, 85, 22, 155, 170, 25],
|
|
|
+ itemStyle: {
|
|
|
+ color: '#febb50',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+};
|
|
|
+// A级风景区对比
|
|
|
+const initVisualizingContentLeftBottom = () => {
|
|
|
+ const myChart = echarts.init(visualizingContentLeftBottom.value);
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ top: 10,
|
|
|
+ right: 10,
|
|
|
+ bottom: 40,
|
|
|
+ left: 30,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ color: '#16cfd0',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '销量',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.3)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.02)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '客流',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.8,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(128, 255, 165)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(1, 191, 236)',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: [140, 232, 101, 264, 90],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '天数',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.8,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(0, 221, 255)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(77, 119, 255)',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: [120, 282, 111, 234, 220],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+};
|
|
|
+// 游客驻留时长
|
|
|
+const initVisualizingContentCenterBottom = () => {
|
|
|
+ const myChart = echarts.init(visualizingContentCenterBottom.value);
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 26,
|
|
|
+ right: 10,
|
|
|
+ bottom: 66,
|
|
|
+ left: 45,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.3)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '已完成',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ barWidth: 12,
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ { offset: 0, color: 'rgba(7,165,255,0.2)' },
|
|
|
+ { offset: 1, color: 'rgba(7,165,255,1)' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '进行中',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ barWidth: 12,
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ { offset: 0, color: 'rgba(41,244,236,0)' },
|
|
|
+ { offset: 1, color: 'rgba(41,244,236,1)' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataset: {
|
|
|
+ source: [
|
|
|
+ { status: '已签收', value1: 33, value2: 93 },
|
|
|
+ { status: '配送中', value1: 53, value2: 32 },
|
|
|
+ { status: '已出库', value1: 78, value2: 65 },
|
|
|
+ { status: '采购中', value1: 12, value2: 35 },
|
|
|
+ { status: '接单中', value1: 90, value2: 52 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+};
|
|
|
+// 当日游客趋势分析
|
|
|
+const initVisualizingContentRightTop = () => {
|
|
|
+ const myChart = echarts.init(visualizingContentRightTop.value);
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ right: 30,
|
|
|
+ bottom: 50,
|
|
|
+ left: 20,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.5)',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '亿元',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.3)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.02)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '同比',
|
|
|
+ position: 'right',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{value}%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.02)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '销售水量',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ showAllSymbol: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#058cff',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#058cff',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(5,140,255, 0.2)',
|
|
|
+ },
|
|
|
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '主营业务',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 15,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#00FFE3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#4693EC',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+};
|
|
|
+// 当月游客趋势分析
|
|
|
+const initVisualizingContentRightBottom = () => {
|
|
|
+ const myChart = echarts.init(visualizingContentRightBottom.value);
|
|
|
+ const option = {
|
|
|
+ grid: {
|
|
|
+ top: 50,
|
|
|
+ right: 10,
|
|
|
+ bottom: 40,
|
|
|
+ left: 30,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '人数(万)',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.3)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(22, 207, 208, 0.02)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#16cfd0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '预购队列',
|
|
|
+ type: 'line',
|
|
|
+ data: [20, 15, 40, 55, 65, 85],
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EA7CCC',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最新成交价',
|
|
|
+ type: 'line',
|
|
|
+ data: [30, 45, 65, 85, 60, 105],
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FAC958',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ state.myCharts.push(myChart);
|
|
|
+};
|
|
|
+// 批量设置 echarts resize
|
|
|
+const initEchartsResize = () => {
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ for (let i = 0; i < state.myCharts.length; i++) {
|
|
|
+ state.myCharts[i].resize();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+// 页面加载时
|
|
|
+onMounted(async () => {
|
|
|
+ NextLoading.done();
|
|
|
+ initTime();
|
|
|
+ await initEchartsMap();
|
|
|
+ await initVisualizingContentLeftTop();
|
|
|
+ await initVisualizingContentLeftBottom();
|
|
|
+ await initVisualizingContentCenterBottom();
|
|
|
+ await initVisualizingContentRightTop();
|
|
|
+ await initVisualizingContentRightBottom();
|
|
|
+ await initEchartsResize();
|
|
|
+ Watermark.del(); // 清除水印
|
|
|
+});
|
|
|
+// 页面卸载时
|
|
|
+onUnmounted(() => {
|
|
|
+ window.clearInterval(state.time.fun);
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+// 左右两侧图表宽度
|
|
|
+$lrWidth: 467px;
|
|
|
+// 中部底部图表高度
|
|
|
+$cbHeight: calc(25% - 23px);
|
|
|
+// 中部顶部图标高度
|
|
|
+$ctHeight: 68px;
|
|
|
+// 标题宽度
|
|
|
+$titleWidth: 240px;
|
|
|
+// 盒子之间的间距
|
|
|
+$boxSpace: 7px;
|
|
|
+// 盒子背景样式
|
|
|
+.boxBg {
|
|
|
+ background: rgba(6, 64, 63, 0.6);
|
|
|
+ box-shadow: 0 5px 45px 5px #06130b;
|
|
|
+ border: 2px solid rgba(41, 211, 212, 0.2);
|
|
|
+ padding: 5px 15px;
|
|
|
+}
|
|
|
+.visualizing-demo1 {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: #06130b;
|
|
|
+ :deep(.BMap_cpyCtrl) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ :deep(.anchorBL) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .visualizing-container {
|
|
|
+ .visualizing-container-head {
|
|
|
+ height: 60px;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
|
|
|
+ z-index: 3;
|
|
|
+ .visualizing-container-head-left {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 60px;
|
|
|
+ .visualizing-container-head-left-text {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.6;
|
|
|
+ width: 93%;
|
|
|
+ padding-left: 15px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ .visualizing-container-head-left-text-box {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 15px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ height: 20px;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background: linear-gradient(to right, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
|
|
|
+ top: -1px;
|
|
|
+ left: 0;
|
|
|
+ transform: skew(30deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ height: 3px;
|
|
|
+ background: linear-gradient(-90deg, #16cfd0, transparent);
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ top: 1px;
|
|
|
+ right: 33px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ top: 41px;
|
|
|
+ right: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-head-center {
|
|
|
+ height: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 60px;
|
|
|
+ background: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.02) 70%);
|
|
|
+ .visualizing-container-head-center-box {
|
|
|
+ margin: auto;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .visualizing-container-head-center-mainTitle {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #d3dbeb;
|
|
|
+
|
|
|
+ background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ min-width: 21%;
|
|
|
+ height: 29px;
|
|
|
+ top: 2px;
|
|
|
+ opacity: 0.3;
|
|
|
+ border-top: 1px solid #16cfd0;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ left: -70px;
|
|
|
+ border-right: 2px solid #16cfd0;
|
|
|
+ transform: skew(50deg);
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ right: -70px;
|
|
|
+ border-left: 2px solid #16cfd0;
|
|
|
+ transform: skew(-50deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 36px;
|
|
|
+ height: 17px;
|
|
|
+ top: -8px;
|
|
|
+ border-bottom: 2px solid rgba(22, 207, 208, 0.7);
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ transform: skew(32deg);
|
|
|
+ left: -89px;
|
|
|
+ border-left: 3px solid rgba(22, 207, 208, 0.7);
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ transform: skew(-32deg);
|
|
|
+ right: -89px;
|
|
|
+ border-right: 3px solid rgba(22, 207, 208, 0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ min-width: 50%;
|
|
|
+ height: 15px;
|
|
|
+ bottom: 0;
|
|
|
+ border-bottom: 4px solid #16cfd0;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ transform: skew(60deg);
|
|
|
+ left: 13px;
|
|
|
+ border-left: 5px solid #16cfd0;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ transform: skew(-60deg);
|
|
|
+ right: 13px;
|
|
|
+ border-right: 5px solid #16cfd0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-head-right {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 60px;
|
|
|
+ .visualizing-container-head-right-text {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.6;
|
|
|
+ width: 93%;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 15px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ .visualizing-container-head-right-text-box {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 15px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ height: 20px;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background: linear-gradient(to left, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
|
|
|
+ top: -1px;
|
|
|
+ right: 0;
|
|
|
+ transform: skew(-30deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ height: 3px;
|
|
|
+ background: linear-gradient(90deg, #16cfd0, transparent);
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ top: 1px;
|
|
|
+ left: 33px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ top: 41px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-title {
|
|
|
+ max-width: $titleWidth;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ background: linear-gradient(0deg, #ffffff 0%, #8ccaca 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ i {
|
|
|
+ padding-right: 5px;
|
|
|
+ color: orange;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-content-left {
|
|
|
+ width: $lrWidth;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
|
|
|
+ padding-top: 60px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .visualizing-container-content-left-flex {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: $boxSpace;
|
|
|
+ margin-bottom: $boxSpace;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-content-center {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
|
|
|
+ z-index: 1;
|
|
|
+ .visualizing-container-content-center-top {
|
|
|
+ width: calc(100% - #{$lrWidth * 2});
|
|
|
+ height: $ctHeight;
|
|
|
+ left: $lrWidth;
|
|
|
+ top: 60px;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 $boxSpace;
|
|
|
+ .visualizing-container-content-center-top-box {
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 $boxSpace;
|
|
|
+ .visualizing-container-content-center-top-box-title {
|
|
|
+ color: #bdd9d9;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 9px;
|
|
|
+ }
|
|
|
+ .visualizing-container-content-center-top-box-value {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .colorful1 {
|
|
|
+ color: #d1904b;
|
|
|
+ background: linear-gradient(0deg, #fff846 28.6865234375%, #ffffff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .colorful2 {
|
|
|
+ color: #5896e2;
|
|
|
+ background: linear-gradient(0deg, #53a0ff 28.6865234375%, #ffffff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .colorful3 {
|
|
|
+ color: #2ffdfd;
|
|
|
+ background: linear-gradient(0deg, #dafaff 0%, #30ae48 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .colorful4 {
|
|
|
+ color: #179090;
|
|
|
+ background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .colorful5 {
|
|
|
+ color: #179090;
|
|
|
+ background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ .colorful6 {
|
|
|
+ color: #179090;
|
|
|
+ background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-content-center-middle {
|
|
|
+ position: absolute;
|
|
|
+ left: $lrWidth;
|
|
|
+ top: calc(60px + #{$ctHeight});
|
|
|
+ right: $lrWidth;
|
|
|
+ bottom: calc(#{$cbHeight} + #{$boxSpace});
|
|
|
+ }
|
|
|
+ .visualizing-container-content-center-bottom {
|
|
|
+ width: calc(100% - #{$lrWidth * 2} - #{$boxSpace * 2});
|
|
|
+ height: $cbHeight;
|
|
|
+ left: $lrWidth;
|
|
|
+ bottom: 0;
|
|
|
+ position: absolute;
|
|
|
+ margin: 0 $boxSpace $boxSpace $boxSpace;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visualizing-container-content-right {
|
|
|
+ width: $lrWidth;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ padding-top: 60px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
|
|
|
+ z-index: 2;
|
|
|
+ .visualizing-container-content-right-flex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: $boxSpace;
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: $boxSpace;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhangchong