<template>
<div class="kanbanapp-main">
<div class="showhead">
<div style="width: 470px;margin: auto;">
<span class="headname">数字化管理系统</span>
</div>
<img src="../../assets/images/kanban/returnbtn.png" alt="" class="Exitbtn pointer" @click="Exit()">
</div>
<div class="zongchang">
<el-row :gutter="20" class="pdtlr">
<el-col :span="6">
<div class="left_div">
<div class="mb-10">
<img src="../../assets/images/kanban/leftarrow.png" alt="" srcset="">
<span class="kbtitle">项目数据统计</span>
</div>
<div class="mt-20">
<span class="Subtitle">项目总数</span>
<span class="projectNum">{{projectData.total}}</span>
</div>
<div class="mt-20" v-for="item in projectData.data" :key="item.id">
<span class="Subtitle"></span>
<span class="prochart">
<el-progress :text-inside="true" :stroke-width="20" :percentage="item.percent" status="success"></el-progress>
</span>
<span class="fontfff ml-10 ft14">{{item.name}}<span class="ml-10 proProportion">{{ item.count }}</span>/{{item.total}}</span>
</div>
<div class="mt-20">
<span class="Subtitle">设备数</span>
<span class="equipmentNum">{{driveDeviceData.total}}</span>
</div>
<div class="mt-20" v-for="item in driveDeviceData.data" :key="item.id">
<span class="Subtitle"></span>
<span class="equimentchart">
<el-progress :text-inside="true" :stroke-width="20" :percentage="item.percent" status="success"></el-progress>
</span>
<span class="fontfff ml-10 ft14">{{item.name}}<span class="ml-10 equipmentProportion">{{ item.count }}</span>/{{item.total}}</span>
</div>
<div class="mt-20">
<span class="Subtitle">物联网关</span>
<span class="gatewayNum">{{linkDeviceData.total}}</span>
</div>
<div class="mt-20" v-for="item in linkDeviceData.data" :key="item.id">
<span class="Subtitle"></span>
<span class="gatewaychart">
<el-progress :text-inside="true" :stroke-width="20" :percentage="item.percent" status="success"></el-progress>
</span>
<span class="fontfff ml-10 ft14">{{item.name}}<span class="ml-10 gatewayProportion">{{ item.count }}</span>/{{item.total}}</span>
</div>
<div class="mt-20">
<span class="Subtitle">SIM卡</span>
<span class="simNum">{{simCardData.total}}</span>
</div>
<div class="mt-20" v-for="item in simCardData.data" :key="item.id">
<span class="Subtitle"></span>
<span class="simchart">
<el-progress :text-inside="true" :stroke-width="20" :percentage="item.percent" status="success"></el-progress>
</span>
<span class="fontfff ml-10 ft14">{{item.name}}<span class="ml-10 simProportion">{{ item.count }}</span>/{{item.total}}</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="echart-map" ref="myEchart" @click.stop="clickOther()" @mousedown="mousedown" @mouseup="mouseup"></div>
<!-- <div class='color_fff tuli'>
<div><span style='width: 10px;height: 10px; display: inline-block; background: #fff; border-radius: 10px;'></span><span class='ml-10 '>地图图例</span></div>
<div class='mt-10'><img src="../../../public/map/1.png" style='width: 20px;height: 25px;'><span style='position: absolute;' class='ml-10 ft14'>开机状态</span></div>
<div><img src="../../../public/map/2.png" style='width: 20px;height: 25px;'><span style='position: absolute;' class='ml-10 ft14'>关机状态</span></div>
</div> -->
</el-col>
<el-col :span="6">
<div class="rightdiv" v-show="statistics">
<!-- <div class="bg000 p15">
<img src="../../assets/images/kanban/searchicon.png" alt="" srcset="" class="searchico">
<el-input v-model="proname" placeholder="请输入项目名称" size="small" style="width: 80%;" class="ml-10"></el-input>
</div> -->
<div class="bg000 p15 mt-10">
<div class="kbtitle"><span class="icon1">|</span><span class="name1 ml-10">项目到期统计</span></div>
<div class="Subtitle"><span class="icon2"></span><span class="name2 ml-10">项目状态统计</span><span class="fr fontfff">单位：个</span></div>
<div class="Proportion_chart mt-10" id="Proportion_chart"></div>
<div class="Subtitle"><span class="icon2"></span><span class="name2 ml-10">项目临期Top5</span></div>
<div class="" v-if="projectList.length>0">
<el-table :data="projectList" style="width: 100%" height="270px" class="imgTable">
<el-table-column prop="projectId" label="项目编号" width="100" />
<el-table-column
label="项目名称"
width="100">
<template slot-scope="scope">
<span class="emergent pointer"style='color: #0F6EFF;' @click="todetail(scope.row)">{{scope.row.projectName}}</span>
</template>
</el-table-column>
<el-table-column prop="expireTime" label="到期时间" width="100" />
<el-table-column
label="剩余天数"
width="100">
<template slot-scope="scope">
<span style='color: #FF4747;'>{{scope.row.remainDays}}</span>
</template>
</el-table-column>
</el-table>
</div>
<div v-else style="height:270px;position: relative;">
<div class="color_fff" style="position: absolute; top: 50%;left: 45%;">暂无数据</div>
</div>
</div>
<div class="bg000 p15 mt-10">
<div class="kbtitle"><span class="icon1">|</span><span class="name1 ml-10">设备弱信号统计</span></div>
<!-- <div class=""><span class="fr fontfff">弱信号设备数：<span style="color: #FFFE00;font-weight: bold;font-size: 26px;">234</span>个</span></div> -->
<div v-if="deviceList.length>0">
<el-table :data="deviceList" style="width: 100%" height="270px" class="imgTable">
<!-- <el-table-column prop="shijian" label="所属项目" width="100" /> -->
<el-table-column
label="所属项目"
width="100">
<template slot-scope="scope">
<span class="emergent pointer"style='color: #0F6EFF;' @click="todetail(scope.row)">{{scope.row.projectName}}</span>
</template>
</el-table-column>
<el-table-column prop="driveDeviceName" label="设备名称" width="100" />
<el-table-column prop="serialNumber" label="SIM卡" width="100" />
<el-table-column
label="信号强度"
width="100">
<template slot-scope="scope">
<div v-if="scope.row.signalStrength==0"><svg-icon icon-class="Nosignal" style="font-size: 20px;"/></div>
<div v-else-if="scope.row.signalStrength==1"><svg-icon icon-class="1signal" style="font-size: 20px;"/></div>
<div v-else-if="scope.row.signalStrength==2"><svg-icon icon-class="2signal" style="font-size: 20px;"/></div>
<div v-else-if="scope.row.signalStrength==3"><svg-icon icon-class="3signal" style="font-size: 20px;"/></div>
<div v-else-if="scope.row.signalStrength==4"><svg-icon icon-class="4signal" style="font-size: 20px;"/></div>
<div v-else-if="scope.row.signalStrength==5"><svg-icon icon-class="5signal" style="font-size: 20px;"/></div>
</template>
</el-table-column>
</el-table>
</div>
<div v-else style="height:270px;position: relative;">
<div class="color_fff" style="position: absolute; top: 50%;left: 45%;">暂无数据</div>
</div>
</div>
</div>
<!-- <el-table-column
label="紧急程度"
width="100">
<template slot-scope="scope">
<span v-if="scope.row.chengdu==1" class="ordinary">普通</span>
<span v-else-if="scope.row.chengdu==0" class="emergent">紧急</span>
</template>
</el-table-column> -->
<!-- 详情 -->
<div class="rightdiv" v-show="details">
<div class="bg000 p15 mt-10">
<div class="pointer fontfff ft28" @click="tostatistics()"><i class="el-icon-arrow-left"></i></div>
<div class="kbtitle mt-10"><span class="icon1">|</span><span class="name1 ml-10">项目基础信息</span></div>
<div class="fontfff mt-10 pl20 ft14">
<el-row :gutter="20">
<el-col :span="12"><span>项目编号</span><span class="ml-10">{{proinfodata.projectId}}</span></el-col>
<el-col :span="12"><span>项目名称</span><span class="ml-10">{{proinfodata.projectName}}</span></el-col>
</el-row>
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>生效时间</span><span class="ml-10">{{proinfodata.effectiveTime}}</span></el-col>
<el-col :span="12"><span>截止时间</span><span class="ml-10">{{proinfodata.expireTime}}</span></el-col>
</el-row>
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>剩余天数</span><span class="ml-10">{{proinfodata.remainDays}}</span></el-col>
<el-col :span="12"><span>所在位置</span><span class="ml-10">{{proinfodata.location}}</span></el-col>
</el-row>
</div>
<div class="kbtitle mt-20"><span class="icon1">|</span><span class="name1 ml-10">项目设备信息</span></div>
<div class="fontfff mt-10">
<!-- 看板滚动条 -->
<div style="height: 60vh;" class="scroll_wrap ft14">
<el-scrollbar style="height: 100%;" class="scrolldiv">
<div v-if="deviceprolist.length>0">
<div class="infodiv" v-for="item in deviceprolist" :key="item.id">
<div><span>设备状态</span><span class="ml-10" style="color: #6DEFDE;">
<span v-if="item.driveDeviceInfo.driveDeviceStatus=='normal'"><el-button type="success" style="width: 85px;" plain size="mini">{{item.driveDeviceInfo.driveDeviceStatusName}}</el-button></span>
<span v-else-if="item.driveDeviceInfo.driveDeviceStatus=='expired_unlock'"><el-button style="width: 85px;" type="warning" plain size="mini">{{item.driveDeviceInfo.driveDeviceStatusName}}</el-button></span>
<span v-else-if="item.driveDeviceInfo.driveDeviceStatus=='expired_locked'"><el-button style="width: 85px;" type="primary" plain size="mini">{{item.driveDeviceInfo.driveDeviceStatusName}}</el-button></span>
<span v-else-if="item.driveDeviceInfo.driveDeviceStatus=='wait_release'"><el-button style="width: 85px;" type="danger" plain size="mini">{{item.driveDeviceInfo.driveDeviceStatusName}}</el-button></span>
</span></div>
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>设备编号</span><span class="ml-10">{{item.driveDeviceInfo.driveDeviceId}}</span></el-col>
<el-col :span="12"><span>设备名称</span><span class="ml-10">{{item.driveDeviceInfo.driveDeviceName}}</span></el-col>
</el-row>
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>设备型号</span><span class="ml-10">{{item.driveDeviceInfo.driveDeviceModel}}</span></el-col>
<el-col :span="12"><span>工艺位置</span><span class="ml-10">{{item.driveDeviceInfo.processLocation}}</span></el-col>
</el-row>
<img class="mt-20" src="../../assets/images/kanban/separate.png" alt="">
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>SIM卡    </span><span class="ml-10">{{item.driveDeviceInfo.simCardNumber}}</span></el-col>
<el-col :span="12"><span>信号强度</span><span class="ml-10">
<span v-if="item.driveDeviceInfo.signalStrength==0"><svg-icon icon-class="Nosignal" style="font-size: 20px;"/></span>
<span v-else-if="item.driveDeviceInfo.signalStrength==1"><svg-icon icon-class="1signal" style="font-size: 20px;"/></span>
<span v-else-if="item.driveDeviceInfo.signalStrength==2"><svg-icon icon-class="2signal" style="font-size: 20px;"/></span>
<span v-else-if="item.driveDeviceInfo.signalStrength==3"><svg-icon icon-class="3signal" style="font-size: 20px;"/></span>
<span v-else-if="item.driveDeviceInfo.signalStrength==4"><svg-icon icon-class="4signal" style="font-size: 20px;"/></span>
<span v-else-if="item.driveDeviceInfo.signalStrength==5"><svg-icon icon-class="5signal" style="font-size: 20px;"/></span>
</span></el-col>
</el-row>
<el-row :gutter="20" class="mt-10">
<el-col :span="12"><span>到期时间</span><span class="ml-10">{{item.driveDeviceInfo.simCardExpireTime}}</span></el-col>
</el-row>
<img class="mt-20 mb-10" src="../../assets/images/kanban/separate.png" alt="">
<el-row :gutter="20" class="mt-10 ft14">
<el-col :span="12" v-for="item1 in item.monitorPointList" :key="item1.id" class="mb-10"><span class="name">{{ item1.displayName }}：</span><span class="ml-10"><span class="number">{{ item1.displayValue }}</span></span></el-col>
</el-row>
</div>
</div>
<div v-else style="height:270px;position: relative;">
<div class="color_fff" style="position: absolute; top: 50%;left: 45%;">暂无数据</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js';
import {projectinfo,projectlistAll} from "@/api/Dataarchives/index";
import {devicelist} from "@/api/Projectcontrol/index";
import {provinceNameArr, cityNameData, provinceNameChineseToEng, cityNameChineseToEng} from '@/libs/geoNameDictionary.js'; // 引入省市对应英文名字
import '../../../src/assets/js/china'
import { summaryoverview,summarproject,summardevice} from "@/api/bulletinboard/index";
import vueSeamlessScroll from 'vue-seamless-scroll'
// import colorBg from '@/assets/images/kanban/color-bg.png'
// import {coAvg,assetTotalWork,onlineStatus,assetLoadRateStatistics,assetMap,getassetMap,Pm25ByCityId,assetInfodata} from "@/api/kanbanshow/datashow";
export default {
name: 'bulletinboard',
data() {
return {
proinfodata:{},
deviceprolist:[],
projectData:{
"total": 0,
"data": []
},
driveDeviceData:{
"total": 0,
"data": []
},
linkDeviceData:{
"total": 0,
"data": []
},
simCardData:{
"total": 0,
"data": []
},
statusSummary:{},
projectList:[],
deviceList:[],
statistics:true,
details:false,
// statistics:false,
// details:true,
proname:'',
pmshow:false,
covalue:null,
totalPower:null,
totalAir:null,
"startNum": null,
"endNum": null,
"totalNum": null,
bgcolor:'',
chegnshiming:"--",
pmvalue:"--",
infodata:{},
pointTimeDataList:[
{
"pointName":"电机绕组维度W",
"pointUnit":"℃",
"pointValue":null,
},
{
"pointName":"电机前轴温度",
"pointUnit":"℃",
"pointValue":null,
},
{
"pointName":"测点测试（李江浩）",
"pointUnit":"℃",
"pointValue":"0.167878639074363",
},
{
"pointName":"测试（胡一洋）",
"pointUnit":"℃",
"pointValue":"0.18819780124761404",
}
],
echart: null,
// echart地图的配置项
option: {},
// 地图拖动起止位置（用于拖动不触发返回事件）
mouse_position: {
beginX: '',
beginY: '',
endX: '',
endY: '',
},
// 地区类型：country, province, city
placeType: 'country',
// 当前省
province: {
name: '',
code: '',
},
// 当前市
city: {
name: '',
code: '',
},
data:[
// {
// "name": "石家庄市",
// "coordinate": [
// 114.521565,
// 38.048326
// ],
// "cityName": "河北省石家庄市"
// },
// {
// "name": "南京市",
// "coordinate": [
// 118.891156,
// 32.015914
// ],
// "cityName": "江苏省南京市"
// },
// {
// "name": "济南市",
// "coordinate": [
// 117.702817,
// 36.204351
// ],
// "cityName": "山东省济南市"
// },
// {name: '鄂尔多斯市', coordinate:[109.781327,39.608266],cityName:'内蒙古自治区鄂尔多斯市'},
// {name: '舟山市', coordinate:[122.207216,29.985295],cityName:'浙江省舟山市'},
// {name: '齐齐哈尔市', coordinate:[123.97,47.33],cityName:'黑龙江省齐齐哈尔'},
],
}
},
computed: {
optionSingleHeight() {
return {
singleHeight: 33 // 这里要变成你的一行表格的高度 可以审查元素
}
},
seamlessScrollOption() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
components: {
vueSeamlessScroll
},
beforeDestroy() {
if (!this.echart) {
return;
}
this.echart.dispose();
this.echart = null;
},
activated() {
this.getsummaryoverview()
this.getsummarproject()
this.getsummardevice()
// this.chinaConfigure();
this.getprojectlistAll()
// this.drawProportion_chart()
// this.getcoAvg()
// this.getassetTotalWork()
// this.getonlineStatus()
// this.getassetLoadRateStatistics()
// this.getassetMap()
// this.realRefresh =setInterval(()=>{
// this.getcoAvg()
// this.getassetTotalWork()
// this.getonlineStatus()
// this.getassetLoadRateStatistics()
// },30*1000)
},
methods: {
// 项目地图
getprojectlistAll(){
projectlistAll().then((response) => {
console.log('-----',response.data)
this.data = response.data
this.chinaConfigure();
})
},
// 项目整体统计(左侧)
getsummaryoverview(){
summaryoverview().then((response) => {
this.projectData=response.data.projectData
this.driveDeviceData=response.data.driveDeviceData
this.linkDeviceData=response.data.linkDeviceData
this.simCardData=response.data.simCardData
})
},
// 项目数据统计(右上)
getsummarproject(){
summarproject().then((response) => {
this.statusSummary=response.data.statusSummary
this.projectList=response.data.projectList
this.$nextTick(()=>{
this.drawProportion_chart()
})
})
},
getsummardevice(){
summardevice().then((response) => {
this.deviceList=response.data
})
},
todetail(row){
this.statistics=false
this.details=true
projectinfo(row.projectId).then(response => {
this.proinfodata=response.data
});
let data={
projectId:row.projectId
}
devicelist(data).then((response) => {
this.deviceprolist=response.data
})
},
tostatistics(){
this.statistics=true
this.details=false
},
// 项目状态统计
drawProportion_chart() {
let myChart = echarts.init(document.getElementById("Proportion_chart"));
var option = {
title: {
text: this.statusSummary.total,
subtext: "总数",
left: "24%",
y: "center",
textAlign: "center",
textStyle: {
fontSize: 20,
fontWeight: "normal",
color: '#fff',
},
subtextStyle: {
color: "#fff",
fontSize: 14,
},
},
legend: {
orient: 'vertical',
y: 'center',
left: 'right',
align:'left',
textStyle: {
color: '#fff' // 文字颜色
},
itemGap:20, //图例之间的距离
icon: 'circle',
// data: ['正常','即将到期','已到期','未到'],
data:this.statusSummary.legendData,
formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return name + ' ' + (oa[i].value/num * 100).toFixed(2) + '%' + ' ' + oa[i].value;
}
}
}
},
tooltip: {
show: true,
trigger: "item",
formatter: "{b}:{c}({d}%)"
},
series: [
{
type: "pie",
// type: 'gauge',
selectedMode: "single",
radius: ["70%", "98%"],
center: ['25%', '50%'],
color: [
"#318BFF",
"#FCFF1C",
"#FF0000 ",
],
hoverAnimation: false,
label: {
normal: {
show: false,
position: "inner",
formatter: "{c}",
textStyle: {
color: "#fff",
fontWeight: "bold",
fontSize: 14,
},
},
},
labelLine: {
normal: {
show: false,
},
},
data:this.statusSummary.data
// data: [{
// value: 23,
// name: '正常'
// }, {
// value: 43,
// name: '即将到期'
// }, {
// value: 23,
// name: '已到期'
// },]
},
],
};
myChart.setOption(option, true);
},
lookpm(){
this.pmshow=!this.pmshow
},
Exit(){
this.$router.push({ path: '/index'});
},
// 判断一个城市是否在这个省内
cityIsInclude(provinceEngName, cityName, cityNameEng) {
let cities = cityNameData[`cityName_${provinceEngName}`]
for (let city in cities) {
if ((!cityNameEng && city.indexOf(cityName) !== -1) || (cityNameEng && city.indexOf(cityName) !== -1 && cities[city] === cityNameEng)) {
return true
}
}
return false
},
// 将data在坐标点上展示，同时在省市情况下，过滤掉范围外的点
convertData(data, provinceEngName, cityNameEng) {
var res = [];
for (var i = 0; i < data.length; i++) {
// 构造数据
if (provinceEngName) {
let ret = this.cityIsInclude(provinceEngName, data[i].city, cityNameEng)
if (ret) {
res.push({
// name: data[i].name,
// value: data[i].coordinate.concat(data[i].status),
// cityName:data[i].cityName,
name: data[i].city,
value: data[i].coordinates.concat(data[i].status),
cityName:data[i].projectName,
projectId:data[i].projectId
// {
// "name": "石家庄市",
// "coordinate": [
// 114.521565,
// 38.048326
// ],
// "cityName": "河北省石家庄市"
// },
})
}
} else {
res.push({
name: data[i].city,
value: data[i].coordinates.concat(data[i].status),
cityName:data[i].projectName,
projectId:data[i].projectId
});
}
}
return res;
},
// 设置地图的option配置项
setMapOption(place = 'china', center = undefined) {
this.option = {
// backgroundColor: "rgb(42,49,90)",
tooltip : { // 鼠标移到图里面的浮动提示框悬浮框内容
// trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0.3)', // 设置悬浮框的背景颜色为半透明红色
borderColor: '#FFFF00', // 设置边框颜色
borderWidth: 1, // 设置边框宽度
textStyle: { // 文本样式
color: '#FFFF00'
},
formatter: function (params) {
// console.log('parms', params)
var str = `${params.data.cityName}`
return str
}
},
// 3d地图样式
geo: [
{
top: '10.5%',
z: 4,
// map: 'hanzhou',
map: place,
// zoom: 1.1,
z:2,
center: center,
aspectScale: 0.75, // 地图长宽比
scaleLimit: { // 放大缩小最大比例限制
min: 0.8,
max: 3,
},
// 地图上显示地名
label: {
normal: {
show: false,
fontSize: '12',
color: '#fff'
},
emphasis: {
color:'#010D39',
},
},
// 地图拖拽
roam: false,
// 区域颜色
itemStyle: {
areaColor: '#004b75',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
borderColor: '#195175',
borderWidth: 2,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
// normal: {
// areaColor:'rgb(29,81,147)',//区域颜色
// borderWidth:1,//设置外层边框
// borderType:'dotted',//地图边框虚线
// borderColor:'rgb(133,213,255)' //边界颜色
// },
// // 悬浮颜色
// emphasis: {
// areaColor: '#2AB8FF',
// borderWidth: 0,
// color: 'green',
// label: {
// show: false
// }
// }
},
regions: [
{ // 隐藏南海诸岛,因为顶层已经添加过了
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false
}
}
],
},
{
top: '9%',//根据自己需要来设置
z: 5,//变小，也就是被压在下面
// map: 'hanzhou',
map: place,
// zoom: 1.1,
z:2,
center: center,
aspectScale: 0.75, // 地图长宽比
scaleLimit: { // 放大缩小最大比例限制
min: 0.8,
max: 3,
},
// 地图上显示地名
label: {
normal: {
show: true,
fontSize: '12',
color: '#fff'
},
emphasis: {
color:'#010D39',
},
},
// 地图拖拽
roam: false,
// 区域颜色
itemStyle: {
normal: {
borderColor:'rgb(133,213,255)', //边界颜色
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y:1100,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: 'rgb(17,150,230)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(9,86,187)', // 100% 处的颜色B3F6F0
},
],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
show: false
}
}
},
}
],
series: [
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData(this.data),
encode: {
value: 2
},
symbol: function (params) {
return "image://" + process.env.BASE_URL + "map/propoint.png";
}, // svg图标
z: 2,
symbolSize: [20, 20], // symbols图标大小
hoverAnimation: true,
itemStyle: {
normal: {
color: '#00CF8B',
}
},
zlevel: 1
},
]
};
},
// 鼠标拖动事件（使拖动不触发返回事件）
mousedown(e) {
this.mouse_position.beginX = e.clientX;
this.mouse_position.beginY = e.clientY;
},
mouseup(e) {
this.mouse_position.endX = e.clientX;
this.mouse_position.endY = e.clientY;
},
// 判断是否拖动，当前允许存在4px误差
isdrag(x1,y1,x2,y2) {
if(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) <= 4) {
return false;
}
return true;
},
// 点击其他区域，返回上一页
clickOther() {
// console.log(this.mouse_position);
this.details=false
this.statistics=true
this.chegnshiming="--"
this.pmvalue="--"
this.bgcolor=''
if (!this.isdrag(this.mouse_position.beginX, this.mouse_position.beginY, this.mouse_position.endX, this.mouse_position.endY)) {
if (this.placeType == 'city' && this.province.name) {
// 从市返回省
this.placeType = 'province';
this.city.code = '';
this.city.name = '';
this.setMapOption(this.province.name);
this.option.series[0].data = this.convertData(this.data, provinceNameChineseToEng(this.province.name));
// this.option.series[1].data = this.convertData(this.data.sort(function (a, b) {
// return b.value - a.value;
// }).slice(0, 5), provinceNameChineseToEng(this.province.name));
this.echart.setOption(this.option);
} else if (this.placeType == 'province') {
// 从省返回国家
this.placeType = 'country';
this.province.code = '';
this.province.name = '';
this.city.code = '';
this.city.name = '';
this.setMapOption();
this.echart.setOption(this.option);
}
}
},
// 渲染echart地图
chinaConfigure() {
// console.log(this.userJson)
this.echart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
window.onresize = this.echart.resize;
// echart配置项
this.setMapOption();
this.echart.setOption(this.option);
// 点击事件
// 使用剪头函数，函数内部的this会指向调用函数时的this，而不是函数体内
this.echart.on('click', (params) => {
event.stopPropagation(); // 阻止冒泡
// console.log("点击",params);
// 对点击的省或者市做不同的处理
let province = provinceNameArr.find(item => item.chineseName === params.name);
// console.log("对点击的省或者市做不同的处理", this.placeType);
// return false
if (this.placeType == 'country' && province) {
this.setProvinceMap(province.chineseName, province.code);
} else if (this.placeType === 'province') {
// console.log("this.province.name",this.province.name)
// 直辖市判断
if(this.province.name=='北京'||this.province.name=='天津'||this.province.name=='上海'||this.province.name=='重庆'){
if (params.componentType=="series") {
this.chegnshiming=params.data.cityName
// console.log("params.data",params.data)
this.statistics=false
this.details=true
projectinfo(params.data.projectId).then(response => {
this.proinfodata=response.data
});
let data={
projectId:params.data.projectId
}
devicelist(data).then((response) => {
this.deviceprolist=response.data
})
}
}else{
let cityCode = cityNameData[`cityName_${provinceNameChineseToEng(this.province.name)}`][params.name];
this.setCityMap(params.name, cityCode);
}
} else if (this.placeType === 'city') {
// 点击县，不做处理
// console.log("切换?????",params)
if (params.componentType=="series") {
// console.log("切换左侧部分显示隐藏",params)
this.chegnshiming=params.data.cityName
// console.log("params.data",params.data)
this.statistics=false
this.details=true
projectinfo(params.data.projectId).then(response => {
this.proinfodata=response.data
});
let data={
projectId:params.data.projectId
}
devicelist(data).then((response) => {
this.deviceprolist=response.data
})
}
} else if (this.placeType === 'province' && !cityNameData[`cityName_${provinceNameChineseToEng(this.province.name)}`]) {
// 点击直辖市、香港澳门台湾的内部，不做处理
console.log("对点击的省或点击直辖市、香港澳门台湾的内", this.placeType);
} else {
// alert('1地图资源错误，请联系管理员!');
}
})
},
// 设置省份地图
setProvinceMap(name, code) {
// console.log("code",code)
axios.get(`/json/geometryProvince/${code}.json`).then(res => {
this.placeType = 'province';
this.province.name = name;
this.province.code = code;
this.setMapOption(name, res.data.cp);
this.option.series[0].data = this.convertData(this.data, provinceNameChineseToEng(name));
echarts.registerMap(name, res.data);
this.echart.setOption(this.option);
}, response => {
// console.log('数据加载失败')
})
},
// 设置城市地图
setCityMap(name, code) {
axios.get(`/json/geometryCouties/${code}.json`).then(res => {
this.placeType = 'city';
this.city.name = name;
this.city.code = code;
this.setMapOption(name, res.data.cp);
// console.log("---设置城市地图--",this)
this.option.series[0].data = this.convertData(this.data, provinceNameChineseToEng(this.province.name), code);
echarts.registerMap(name, res.data);
this.echart.setOption(this.option);
}, response => {
// console.log('数据加载失败')
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" >
$boxbg:#2F3D85;
.scrolldiv {
.el-scrollbar__thumb {
background-color: #0A4CB9;
}
}
.fontfff{
color: #fff;
}
.pl20{
padding-left: 20px;
}
.ft28{
font-size: 28px;
}
.p15{
padding: 10px;
}
.bg000{
background: #000;
}
.ft14{
font-size: 14px;
}
.infodiv{
padding: 20px;
background: url('../../assets/images/kanban/bodeetop.png');
background-size: 100% 100%;
img{
width: 100%;
}
.name{
width: 100px;
display: inline-block;
}
.number{
display: inline-block;
width: 60px;
border-radius: 3px;
height: 23px;
line-height: 23px;
background: #0F6EFF;
text-align: center;
margin-right: 10px;
}
}
.el-progress-bar__innerText{
color: #000;
}
.el-progress-bar__outer{
background-color:rgb(105, 113, 135)
}
.Proportion_chart{
height: 150px;
}
.imgTable.el-table::before {
height: 0;
}
.imgTable {
background: transparent!important;
}
.imgTable tr {
background-color: transparent!important;
}
.imgTable .el-table__body tr:hover>td.el-table__cell {
background-color: transparent!important;
}
.imgTable td.el-table__cell {
border: 0;
color: #ffffff;
text-align: center;
font-size: 14px;
}
.imgTable .el-table__body tr:nth-child(odd) {
// background-color: rgb(9,39,104) !important;
background-image: url('../../assets/images/kanban/tableBack.png');
background-size: 100% 100%;
background-origin: center;
background-repeat: no-repeat;
}
.imgTable th {
border: 0;
color: #84919A;
text-align: center;
font-size: 15px;
font-weight: 400;
}
.imgTable th.is-leaf {
border: 0;
color: #84919A;
text-align: center;
background: #000;
font-size: 14px;
font-weight: 400;
}
.imgTable .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.imgTable .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-thumb {
width: 6px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #8398BC;
background: rgba(0,0,0,0.2);
}
.imgTable .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-track {
width: 2px;
-webkit-box-shadow: inset 0 0 5px #8398BC;
border-radius: 0;
background:#000;
}
.imgTable .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-corner {
width: 0;
height: 0;
}
.rightdiv{
.searchico{
width: 18px;
height: 15px;
}
.el-input--small .el-input__inner{
background: #000;
border: none;
color: #fff;
}
.kbtitle{
.icon1{
color: #519AFF;
font-size: 26px;
}
.name1{
color: #fff;
font-size: 18px;
}
}
.Subtitle{
margin-top: 15px;
margin-left: 20px;
font-size: 14px;
.icon2{
display: inline-block;
width: 10px;
height: 10px;
background: #519AFF;
}
.name2{
color: #fff;
}
}
}
.left_div{
img{
width: 25px;
height: 25px;
}
.kbtitle{
color: #fff;
font-size: 30px;
margin-left: 15px;
}
.Subtitle{
color: #CBD3FF;
font-size: 16px;
display: inline-block;
width: 100px;
}
.gatewaychart{
width: 230px;
display: inline-block;
.el-progress.is-success .el-progress-bar__inner{
background-color:#29CC97
}
}
.gatewayProportion{
color: #29CC97;
}
.simchart{
width: 230px;
display: inline-block;
.el-progress.is-success .el-progress-bar__inner{
background-color:#FF8D2B
}
}
.equimentchart{
width: 230px;
display: inline-block;
.el-progress.is-success .el-progress-bar__inner{
background-color:#FFFF00
}
}
.prochart{
width: 230px;
display: inline-block;
.el-progress.is-success .el-progress-bar__inner{
background-color:#519AFF
}
}
.equipmentProportion{
color: #FFFF00;
}
.simProportion{
color: #FF8D2B;
}
.proProportion{
color: #519AFF;
}
.projectNum{
color: #519AFF;
font-size: 22px;
font-weight: bold;
}
.equipmentNum{
color: #FFFF00;
font-size: 22px;
font-weight: bold;
}
.gatewayNum{
color: #00FFC4;
font-size: 22px;
font-weight: bold;
}
.simNum{
color: #FF8D2B;
font-size: 22px;
font-weight: bold;
}
}
.returnbtn{
padding: 10px;
font-size: 28px;
}
.p20{
padding: 20px;
}
.tuli{
width: 140px;
height: 110px;
background: #3C4255;
border-radius: 10px 10px 10px 10px;
padding: 15px;
position: absolute;
bottom: 20px;
}
// .el-progress-bar__inner{
// background-color: transparent !important;
// background-image: linear-gradient(-135deg,
// transparent 0%,transparent 25%,
// rgba(255, 255, 255, 1) 25%,rgba(255, 255, 255, 1) 50%,
// transparent 50%, transparent 75%,
// rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
// background-size: 28px 28px;
// }
// .el-progress-bar__outer{
// // width: 237px;
// height: 13px;
// // background-image: linear-gradient(to right, rgb(255,255,0), rgb(236, 236, 16),);
// background-image: linear-gradient(to right, #5E71FF, #1CB0FF);
// z-index: 999;
// }
.yunxingbox{
width: 425px;
margin: auto;
position: relative;
top: 18%;
}
.lineblock{
display: inline-block;
}
.chart300{
height: 300px;
}
.ml5{
margin-left: 5%;
}
.pdtlr{
padding: 20px 20px 0px 20px;
}
.showhead{
background: url('../../assets/images/kanban/header_bg.png');
height: 60px;
width: 1000px;
margin: auto;
background-size: 100% 100%;
.headname{
color: #74D9FF;
font-size: 20px;
}
.el-input input{
background: none;
// background: rgb(22, 187, 66);
color: #74D9FF;
border: none;
font-size: 24px;
}
.headselectstyle{
width: 200px;
margin-left: 60px;
}
}
.disinlineblock{
display: inline-block
}
.echart-map {
width: 100%;
height: 90vh;
}
</style>
07-18
340
340
07-17
568
568
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
