|
|
|
|
@ -54,25 +54,22 @@
|
|
|
|
|
</transition>
|
|
|
|
|
<transition name="fade">
|
|
|
|
|
<div class="carousel-img" v-show="type === 'img'">
|
|
|
|
|
<div class="data-panel">
|
|
|
|
|
<div class="data-panel__title">
|
|
|
|
|
<i class="el-icon-arrow-left" @click="areaClick('prev')"></i>
|
|
|
|
|
<div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>
|
|
|
|
|
<i class="el-icon-arrow-right" @click="areaClick('next')"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<dv-scroll-board
|
|
|
|
|
ref="scrollBoard"
|
|
|
|
|
:key="scrollBoardKey"
|
|
|
|
|
:config="areaConfig"
|
|
|
|
|
style="width: 100%; height: 400px; margin-top: 16px"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<dv-flyline-chart
|
|
|
|
|
dev
|
|
|
|
|
:config="flyingConfig"
|
|
|
|
|
style="width: 100%; height: 100%"
|
|
|
|
|
<!-- <div class="data-panel">-->
|
|
|
|
|
<!-- <div class="data-panel__title">-->
|
|
|
|
|
<!-- <i class="el-icon-arrow-left" @click="areaClick('prev')"></i>-->
|
|
|
|
|
<!-- <div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>-->
|
|
|
|
|
<!-- <i class="el-icon-arrow-right" @click="areaClick('next')"></i>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<dv-scroll-board
|
|
|
|
|
ref="scrollBoard"
|
|
|
|
|
:key="scrollBoardKey"
|
|
|
|
|
:config="areaConfig"
|
|
|
|
|
style="width: 350px; height: 240px; position: absolute;z-index: 998;bottom: 22px;left: 22px;background-color: #031e6099;border: 2px solid #53c2f4;border-radius: 10px;"
|
|
|
|
|
/>
|
|
|
|
|
<div style="width: 100%; height: 100%" class="map-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
@ -203,6 +200,8 @@ import { getList as longInsuranceIndex } from "@/api/longInsurance"
|
|
|
|
|
import { getList as scheduleListChecksIndex } from "@/api/scheduleListChecks"
|
|
|
|
|
import { getList } from "@/api/bigScreen";
|
|
|
|
|
import gsap from "gsap";
|
|
|
|
|
import '../china'
|
|
|
|
|
import echarts from "echarts";
|
|
|
|
|
import dataPreview from "@/views/bigSreen/component/dataPreview.vue";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
@ -266,13 +265,190 @@ export default {
|
|
|
|
|
activeColors: ['#8537d8','#159138', '#4b72dc', '#c92d40'],
|
|
|
|
|
selectData: {},
|
|
|
|
|
isShowPreview: false,
|
|
|
|
|
|
|
|
|
|
companies: [],
|
|
|
|
|
mapOptions: {
|
|
|
|
|
backgroundColor: '#132675',
|
|
|
|
|
title: {},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: function(val) {
|
|
|
|
|
return val.name
|
|
|
|
|
},
|
|
|
|
|
}, //左侧小导航图标
|
|
|
|
|
geo: {
|
|
|
|
|
map: "china",
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
layoutCenter: ["50%", "50%"],
|
|
|
|
|
layoutSize: "120%",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor: {
|
|
|
|
|
type: "linear-gradient",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 1200,
|
|
|
|
|
x2: 1000,
|
|
|
|
|
y2: 0,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#152E6E", // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#0673AD", // 50% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
global: true, // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
shadowColor: "#ccc",
|
|
|
|
|
shadowOffsetX: -2,
|
|
|
|
|
shadowOffsetY: 4,
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor: "#0f5d9d",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
regions: [{
|
|
|
|
|
name: "南海诸岛",
|
|
|
|
|
itemStyle: {
|
|
|
|
|
areaColor: "rgba(0, 10, 52, 1)",
|
|
|
|
|
borderColor: "rgba(0, 10, 52, 1)",
|
|
|
|
|
normal: {
|
|
|
|
|
opacity: 0,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
color: "#009cc9",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
color: "#FFFFFF",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
//配置属性
|
|
|
|
|
series: [{
|
|
|
|
|
name: '中国',
|
|
|
|
|
type: 'map',
|
|
|
|
|
mapType: 'china',
|
|
|
|
|
roam: false,
|
|
|
|
|
aspectScale: 0.8,
|
|
|
|
|
layoutCenter: ["50%", "50%"], //地图位置
|
|
|
|
|
layoutSize: "120%",
|
|
|
|
|
zoom: 1, //当前视角的缩放比例
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true, //省份名称
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 15,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
// 地图的样式
|
|
|
|
|
normal: {
|
|
|
|
|
borderWidth: 2.5,
|
|
|
|
|
borderColor: "#67b1e3", // 省份边框颜色
|
|
|
|
|
areaColor: new echarts.graphic.LinearGradient(
|
|
|
|
|
0.5,
|
|
|
|
|
0,
|
|
|
|
|
0.5,
|
|
|
|
|
1,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#59a6da",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#142976",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
false
|
|
|
|
|
),
|
|
|
|
|
color: "#fff"
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
// 鼠标hover显示
|
|
|
|
|
show: false,
|
|
|
|
|
//areaColor: "#0D30D4",
|
|
|
|
|
areaColor: {
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 0,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "red", // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgb(218,172,113)", // 100% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
global: false, // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
color: "#fff"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: []
|
|
|
|
|
},{
|
|
|
|
|
name: 'company',
|
|
|
|
|
type:'effectScatter',
|
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
|
symbolSize: 10,
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
name: 'a',
|
|
|
|
|
value: [120.501856,36.862275]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
background: '#e97b51',
|
|
|
|
|
color: '#e97b51',
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowColor: '#81606d'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initMap() {
|
|
|
|
|
this.mapChart = echarts.init(document.querySelector('.map-container'))
|
|
|
|
|
this.mapChart.setOption(this.mapOptions)
|
|
|
|
|
},
|
|
|
|
|
todayClick(e, item, index) {
|
|
|
|
|
this.activeToday = item
|
|
|
|
|
this.activeColor = this.activeColors[index]
|
|
|
|
|
},
|
|
|
|
|
async getMapData() {
|
|
|
|
|
try {
|
|
|
|
|
const res = (
|
|
|
|
|
await getList({
|
|
|
|
|
type: 'map'
|
|
|
|
|
},false)
|
|
|
|
|
).data;
|
|
|
|
|
this.mapOptions.series[1].data = JSON.parse(res.find(i => i.key === 'points')?.value);
|
|
|
|
|
this.companies = JSON.parse(res.find(i => i.key === 'companies')?.value);
|
|
|
|
|
this.initMap()
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(err)
|
|
|
|
|
this.initMap()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getTotal() {
|
|
|
|
|
const res = (
|
|
|
|
|
await getList(
|
|
|
|
|
@ -428,30 +604,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
flyingConfig() {
|
|
|
|
|
return {
|
|
|
|
|
points: this.areas?.map(area => ({
|
|
|
|
|
position: area.point,
|
|
|
|
|
text: area.name
|
|
|
|
|
}))?.filter(i => i.text !== this.activeArea?.name) || [],
|
|
|
|
|
centerPoint: this.activeArea?.point,
|
|
|
|
|
bgImgUrl: require("@/assets/bigScreen/china.png"),
|
|
|
|
|
pointsImg: {
|
|
|
|
|
url: require("@/assets/bigScreen/points.png"),
|
|
|
|
|
},
|
|
|
|
|
centerPointImg: {
|
|
|
|
|
url: require("@/assets/bigScreen/points-a.png")
|
|
|
|
|
},
|
|
|
|
|
orbitColor: "#0000",
|
|
|
|
|
lineWidth: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
areaConfig() {
|
|
|
|
|
return {
|
|
|
|
|
oddRowBGC: "#0a1b5632",
|
|
|
|
|
evenRowBGC: "#0a1b5632",
|
|
|
|
|
rowNum: 8,
|
|
|
|
|
data: this.activeArea?.data?.map(i => [i]) || [],
|
|
|
|
|
rowNum: 5,
|
|
|
|
|
data: this.companies.map(i => [i]),
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
listConfig() {
|
|
|
|
|
@ -496,6 +654,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
document.body.addEventListener("keypress", this.keywordRegister);
|
|
|
|
|
this.getMapData()
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
document.body.removeEventListener("keypress", this.keywordRegister);
|
|
|
|
|
|
