1159 lines
36 KiB
Vue
1159 lines
36 KiB
Vue
<template>
|
||
<div class="fullHeight resilience" style="min-height: 600px">
|
||
<div class="fullHeight" v-show="type!='project'">
|
||
|
||
|
||
<!-- <vue-scroll class="fullHeight"> -->
|
||
<div class="left">
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">组织机构</div>
|
||
<el-table class="devTable" ref="devTable"
|
||
:data="tableData"
|
||
height="200"
|
||
show-summary
|
||
>
|
||
<el-table-column prop="name" label="组织名称">
|
||
<template slot-scope="scope">
|
||
<span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="totalProjectNum" label="项目总数" >
|
||
</el-table-column>
|
||
<el-table-column prop="totalProjectAcreage" label="项目面积(m²)">
|
||
</el-table-column>
|
||
<el-table-column prop="totalSurveyNum" label="实测构件数量">
|
||
</el-table-column>
|
||
<el-table-column prop="abnormalSurveyNum" label="异常构件数量">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">回弹数据情况</div>
|
||
<div class="chart" ref="ageChart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<!-- <div class="pageTitle">质量省份排名</div> -->
|
||
<!-- <div class="chart" ref="provinceChart"></div> -->
|
||
<div class="pageTitle">浇筑令预警</div>
|
||
<el-table class="devTable devTable2"
|
||
:data="tableData3"
|
||
height="200"
|
||
>
|
||
<el-table-column prop="name" label="分公司">
|
||
<template slot-scope="scope">
|
||
<span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="amount1" label="项目"></el-table-column>
|
||
<el-table-column prop="amount2" label="部位">
|
||
</el-table-column>
|
||
<el-table-column prop="amount3" label="浇筑申请日期" width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="amount3" label="超期天数">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="top">
|
||
<div class="mapBox">
|
||
<div class="mapTitle">·地图总览·</div>
|
||
<div id="map" style="height: calc(100% - 50px)" ref="mapChart"></div>
|
||
|
||
<div class="mapDialog" v-show="showMapDialog">
|
||
<i class="el-icon-error" @click="showMapDialog=false"></i>
|
||
<vue-scroll style="height:100%">
|
||
<div class="selectItem">
|
||
<p class="title">{{provincesName}}</p>
|
||
<div class="datas">
|
||
<div class="numBox2">
|
||
<p>{{mapDialogData.count.projectNum}}</p>
|
||
<p>项目数</p>
|
||
</div>
|
||
<div class="numBox2">
|
||
<p>{{mapDialogData.count.totalSurveyNum}}</p>
|
||
<p>测量构件数</p>
|
||
</div>
|
||
<div class="numBox2">
|
||
<p>{{mapDialogData.count.abnormalSurveyNum}}</p>
|
||
<p>异常构件数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="selectItem" v-for="(item,index) in mapDialogData.list" :key="index">
|
||
<p class="title">{{item.name}}</p>
|
||
<div class="datas">
|
||
<div class="numBox2">
|
||
<p>{{item.totalSurveyNum}}</p>
|
||
<p>测量构件数</p>
|
||
</div>
|
||
<div class="numBox2">
|
||
<p>{{item.abnormalSurveyNum}}</p>
|
||
<p>异常构件数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="whiteBlock">
|
||
<div class="blockInner nestContent">
|
||
<div class="nestBox">
|
||
<img src="@/assets/images/nest.png" alt="" srcset="" />
|
||
<div class="numBox numBox1">
|
||
<div class="topTxt">
|
||
<img src="@/assets/images/xm_num.png" />在施项目
|
||
</div>
|
||
<p class="num">{{statictisData.zsProjectNum}}</p>
|
||
</div>
|
||
<div class="numBox numBox2">
|
||
<div class="topTxt">
|
||
<img src="@/assets/images/xmyqy_num.png" />启用项目
|
||
</div>
|
||
<p class="num">{{statictisData.enableProjectNum}}</p>
|
||
</div>
|
||
<div class="numBox numBox3">
|
||
<div class="topTxt">
|
||
<img src="@/assets/images/yicgj_num.png" />异常构件数
|
||
</div>
|
||
<p class="num">{{statictisData.abnormalSurveyNum}}</p>
|
||
</div>
|
||
<div class="numBox numBox4">
|
||
<div class="topTxt">
|
||
<img src="@/assets/images/gjcl_num.png" />测量构件数
|
||
</div>
|
||
<p class="num">{{statictisData.totalSurveyNum}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">实测预警</div>
|
||
<el-table class="devTable devTable2"
|
||
:data="tableData2"
|
||
height="200"
|
||
>
|
||
<el-table-column prop="name" label="分公司">
|
||
<template slot-scope="scope">
|
||
<span class="name" @click="JumpToNext(scope.row)">{{scope.row.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="amount1" label="项目"></el-table-column>
|
||
<el-table-column prop="amount2" label="部位">
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="amount3" label="测量强度">
|
||
</el-table-column> -->
|
||
<!-- <el-table-column prop="amount3" label="浇筑申请日期" width="120">
|
||
</el-table-column> -->
|
||
<el-table-column prop="amount3" label="设计强度">
|
||
</el-table-column>
|
||
<el-table-column prop="amount3" label="测量强度">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="whiteBlock">
|
||
<div class="blockInner">
|
||
<div class="pageTitle">设备连接情况</div>
|
||
<div class="chart" ref="devConnectChart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </vue-scroll> -->
|
||
</div>
|
||
<buildManage :sn='searchsn' v-if="type=='project'"></buildManage>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import buildManage from "@/views/projectFront/qualitySpringback/buildManage"
|
||
import {selectMassReboundSurveyAreaStatisticsApi,selectProjectListByProvinceApi,selectProvinceMassReboundSurveyAreaCountListApi} from "@/assets/js/api/quality.js"
|
||
export default {
|
||
components:{buildManage},
|
||
data() {
|
||
return {
|
||
mapDialogLocation:{x:0,y:0},
|
||
showMapDialog:false,
|
||
tableData: [],
|
||
tableData2: [],
|
||
tableData3: [],
|
||
type:'zgs',
|
||
searchsn:'',
|
||
backArr:[],
|
||
provincesCode:'',
|
||
provincesName:'',
|
||
statictisData:{
|
||
abnormalSurveyNum: 0,
|
||
enableProjectNum: 0,
|
||
totalProjectAcreage: 0,
|
||
totalProjectNum: 0,
|
||
totalSurveyNum: 0,
|
||
zsProjectNum: 0
|
||
},
|
||
mapDialogData:{
|
||
count:{
|
||
abnormalSurveyNum: 0,
|
||
projectNum: 0,
|
||
totalSurveyNum: 0
|
||
},list:[]
|
||
},
|
||
company:'',
|
||
};
|
||
},
|
||
mounted() {
|
||
this.company = COMPANY;
|
||
this.loadMap();
|
||
this.initData()
|
||
},
|
||
watch: {
|
||
'$store.state.mapBackArr':function(){
|
||
this.initData();
|
||
}
|
||
},
|
||
methods: {
|
||
JumpToNext(item){
|
||
var json = {
|
||
sn: item.sn,
|
||
name: item.name
|
||
}
|
||
this.backArr.push(json)
|
||
this.$store.commit('setMapBackArr', this.backArr)
|
||
this.initData()
|
||
},
|
||
initData(type) {
|
||
this.backArr = this.$store.state.mapBackArr
|
||
//
|
||
if(this.backArr.length>0){
|
||
this.searchsn=this.backArr[this.backArr.length-1].sn
|
||
}else{
|
||
switch (this.$store.state.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn=this.$store.state.userInfo.headquartersSn
|
||
break;
|
||
case 3:
|
||
this.searchsn=this.$store.state.userInfo.sn
|
||
break;
|
||
case 4:
|
||
this.searchsn=this.$store.state.userInfo.sn
|
||
break;
|
||
}
|
||
}
|
||
|
||
if(this.backArr.length==4){
|
||
this.type='project'
|
||
}else{
|
||
this.type='zgs'
|
||
this.getData1()
|
||
// this.getData3()
|
||
}
|
||
},
|
||
getData1(){
|
||
selectMassReboundSurveyAreaStatisticsApi({sn:this.searchsn}).then(res=>{
|
||
this.tableData=res.result.list
|
||
this.$nextTick(() => {
|
||
this.$refs['devTable'].doLayout();
|
||
})
|
||
this.statictisData=res.result.count
|
||
var arr1 = [];
|
||
var arr2 = [],xData=[],arr3 = [];
|
||
this.tableData.forEach(element => {
|
||
arr1.push(element.totalSurveyNum)
|
||
arr2.push(element.abnormalSurveyNum)
|
||
arr3.push(element.totalDevNum)
|
||
xData.push(element.name)
|
||
});
|
||
this.createdAgeCharts(arr1,arr2,xData);
|
||
this.createdDevConnectChartCharts(arr3,xData);
|
||
})
|
||
},
|
||
getData2(){
|
||
selectProjectListByProvinceApi({sn:this.searchsn,provincesCode:this.provincesCode}).then(res=>{
|
||
this.mapDialogData = res.result
|
||
})
|
||
},
|
||
getData3(){
|
||
selectProvinceMassReboundSurveyAreaCountListApi({sn:this.searchsn}).then(res=>{
|
||
var DATA = res.result
|
||
var arr2 = [],xData=[],arr1 = [];
|
||
DATA.forEach(element => {
|
||
if(element.provinceName){
|
||
xData.push(element.provinceName)
|
||
arr1.push(element.totalSurveyNum)
|
||
arr2.push(element.abnormalSurveyNum)
|
||
}
|
||
|
||
});
|
||
this.createdProvinceCharts(arr1,arr2,xData);
|
||
})
|
||
},
|
||
getSummaries(param) {
|
||
const { columns, data } = param;
|
||
const sums = [];
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
sums[index] = "合计";
|
||
return;
|
||
}
|
||
const values = data.map((item) => Number(item[column.property]));
|
||
if (!values.every((value) => isNaN(value))) {
|
||
sums[index] = values.reduce((prev, curr) => {
|
||
const value = Number(curr);
|
||
if (!isNaN(value)) {
|
||
return prev + curr;
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0);
|
||
sums[index] += "";
|
||
} else {
|
||
sums[index] = "--";
|
||
}
|
||
});
|
||
|
||
return sums;
|
||
},
|
||
loadMap() {
|
||
var uploadedDataURL = "/js/data-1528971808162-BkOXf61WX.json";
|
||
var that = this
|
||
/**
|
||
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
|
||
|
||
默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
|
||
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
|
||
|
||
http://echarts.baidu.com/option.html#series-map.geoIndex
|
||
|
||
并且加了pin气泡图标以示数值大小
|
||
*/
|
||
// var points = [
|
||
// { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } },
|
||
// { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
|
||
// { value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } },
|
||
// { value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } },
|
||
// { value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } },
|
||
// { value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } },
|
||
// { value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } },
|
||
// { value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } },
|
||
// { value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } },
|
||
// { value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } },
|
||
// { value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } },
|
||
// { value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } },
|
||
// { value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } },
|
||
// { value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } },
|
||
// { value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } },
|
||
// { value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } },
|
||
// { value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } },
|
||
// { value: [119.4543, 25.9222] },
|
||
// ];
|
||
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
|
||
// myChart.showLoading();
|
||
let index = -1;
|
||
let myChart = echarts.init(this.$refs.mapChart);
|
||
$.getJSON(uploadedDataURL, function (geoJson) {
|
||
echarts.registerMap("china", geoJson);
|
||
// myChart.hideLoading();
|
||
var option = {
|
||
// backgroundColor: "#F1F1FA",
|
||
grid: {
|
||
top: 0,
|
||
bottom: 0,
|
||
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
/* title: {
|
||
top: 20,
|
||
text: '“困难人数” - 杭州市',
|
||
subtext: '',
|
||
x: 'center',
|
||
textStyle: {
|
||
color: '#ccc'
|
||
}
|
||
},*/
|
||
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: function(params) {
|
||
// console.log(params)
|
||
// return params.name + ' : ' + params.value[2];
|
||
// }
|
||
// },
|
||
/*visualMap: {
|
||
min: 0,
|
||
max: 1000000,
|
||
right: 100,
|
||
seriesIndex: 1,
|
||
type: 'piecewise',
|
||
bottom: 100,
|
||
textStyle: {
|
||
color: '#FFFF'
|
||
},
|
||
splitList: [
|
||
{
|
||
gt: 50000,
|
||
color: '#F5222D',
|
||
label: '困难人数大于5万人'
|
||
}, //大于5万人
|
||
{
|
||
gte: 30000,
|
||
lte: 50000,
|
||
color: '#FA541C ',
|
||
label: '困难人数3-5万人'
|
||
}, //3-5万人
|
||
{
|
||
gte: 10000,
|
||
lte: 30000,
|
||
color: '#FA8C16',
|
||
label: '困难人数1-3万人'
|
||
}, //1-3万人
|
||
{
|
||
lte: 10000,
|
||
color: '#fbe1d6',
|
||
label: '困难人数小于1万人'
|
||
}
|
||
]
|
||
},*/
|
||
|
||
geo: {
|
||
map: "china",
|
||
aspectScale: 0.75, //长宽比
|
||
zoom: 1.2,
|
||
roam: true,
|
||
label: {
|
||
normal: {
|
||
formatter:function(params) {
|
||
// console.log(params.name)
|
||
if(params.name.indexOf('_')){
|
||
return params.name.split('_')[0]
|
||
}
|
||
},
|
||
show: true,
|
||
textStyle: {
|
||
color: "#132869",
|
||
fontSize: 13,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
emphasis: {
|
||
textStyle: {
|
||
color: "white",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: "rgb(255, 255, 255)",
|
||
borderWidth: 1,
|
||
areaColor: {
|
||
type: "linear",
|
||
x: 0.5,
|
||
y: 0.5,
|
||
r: 0.8,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#BCDCFF", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#92BEFB", // 100% 处的颜色
|
||
},
|
||
],
|
||
globalCoord: true, // 缺省为 false
|
||
},
|
||
},
|
||
emphasis: {
|
||
areaColor: "#92BEFB",
|
||
borderWidth: 0.1,
|
||
// color: "green",
|
||
// label: {
|
||
// show: false,
|
||
// },
|
||
},
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
areaColor: "rgba(0, 10, 52, 1)",
|
||
borderColor: "rgba(0, 10, 52, 1)",
|
||
normal: {
|
||
// opacity: 0,
|
||
label: {
|
||
show: false,
|
||
color: "#009cc9",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
series: [
|
||
// {
|
||
// type: "map",
|
||
// roam: true,
|
||
// label: {
|
||
// normal: {
|
||
// formatter:function(params) {
|
||
// console.log(params.name)
|
||
// if(params.name.indexOf('_')){
|
||
// return params.name.split('_')[0]
|
||
// }
|
||
// },
|
||
// show: true,
|
||
// textStyle: {
|
||
// color: "#132869",
|
||
// fontSize: 13,
|
||
// fontWeight: "bold",
|
||
// },
|
||
// },
|
||
// emphasis: {
|
||
// textStyle: {
|
||
// color: "white",
|
||
// },
|
||
// },
|
||
// },
|
||
|
||
// itemStyle: {
|
||
// normal: {
|
||
// borderColor: "rgb(255, 255, 255)",
|
||
// borderWidth: 1,
|
||
// areaColor: {
|
||
// type: "linear",
|
||
// x: 0.5,
|
||
// y: 0.5,
|
||
// r: 0.8,
|
||
// colorStops: [
|
||
// {
|
||
// offset: 0,
|
||
// color: "#BCDCFF", // 0% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "#92BEFB", // 100% 处的颜色
|
||
// },
|
||
// ],
|
||
// globalCoord: true, // 缺省为 false
|
||
// },
|
||
// },
|
||
// emphasis: {
|
||
// areaColor: "#92BEFB",
|
||
// // shadowColor: 'rgb(12,25,50)',
|
||
// borderWidth: 0.1,
|
||
// },
|
||
// },
|
||
// zoom: 1.2,
|
||
// roam: true,
|
||
// map: "china", //使用
|
||
// data: this.difficultData, //热力图数据 不同区域 不同的底色
|
||
// },
|
||
// {
|
||
// type: 'effectScatter',
|
||
// coordinateSystem: 'geo',
|
||
// showEffectOn: 'render',
|
||
// zlevel:1,
|
||
// rippleEffect: {
|
||
// period: 15,
|
||
// scale: 4,
|
||
// brushType: 'fill'
|
||
// },
|
||
// hoverAnimation: true,
|
||
// label: {
|
||
// normal: {
|
||
// formatter: '{b}',
|
||
// position: 'right',
|
||
// offset: [15, 0],
|
||
// color: '#1DE9B6',
|
||
// show: true
|
||
// },
|
||
// },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color:'#1DE9B6'/* function (value){ //随机颜色
|
||
// return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
||
// }*/,
|
||
// shadowBlur: 10,
|
||
// shadowColor: '#333'
|
||
// }
|
||
// },
|
||
// symbolSize: 12,
|
||
// data: points
|
||
// },
|
||
//地图线的动画效果
|
||
// {
|
||
// type: 'lines',
|
||
// zlevel: 2,
|
||
// effect: {
|
||
// show: true,
|
||
// period: 4, //箭头指向速度，值越小速度越快
|
||
// trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||
// symbol: 'arrow', //箭头图标
|
||
// symbolSize: 7, //图标大小
|
||
// },
|
||
// lineStyle: {
|
||
// normal: {
|
||
// color:'#1DE9B6'
|
||
// /* function (value){ //随机颜色
|
||
|
||
// ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
|
||
// '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
|
||
// '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
|
||
// '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
|
||
// '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
|
||
// '#52b9c7','#4fb6d2','#4ab2e5']
|
||
// return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
||
// }*/,
|
||
// width: 1, //线条宽度
|
||
// opacity: 0.1, //尾迹线条透明度
|
||
// curveness: .3 //尾迹线条曲直度
|
||
// }
|
||
// },
|
||
// data: [
|
||
// {coords: [[118.8062, 31.9208],[119.4543, 25.9222]],lineStyle:{color:'#4ab2e5'}}
|
||
// , {coords: [[127.9688, 45.368],[119.4543, 25.9222]],lineStyle:{color:'#4fb6d2'}}
|
||
// , {coords: [[110.3467, 41.4899],[119.4543, 25.9222]],lineStyle:{color:'#52b9c7'}}
|
||
// , {coords: [[125.8154, 44.2584],[119.4543, 25.9222]],lineStyle:{color:'#5abead'}}
|
||
// , {coords: [[116.4551, 40.2539],[119.4543, 25.9222]],lineStyle:{color:'#f34e2b'}}
|
||
// , {coords: [[123.1238, 42.1216],[119.4543, 25.9222]],lineStyle:{color:'#f56321'}}
|
||
// , {coords: [[114.4995, 38.1006],[119.4543, 25.9222]],lineStyle:{color:'#f56f1c'}}
|
||
// , {coords: [[117.4219, 39.4189],[119.4543, 25.9222]],lineStyle:{color:'#f58414'}}
|
||
// , {coords: [[112.3352, 37.9413],[119.4543, 25.9222]],lineStyle:{color:'#f58f0e'}}
|
||
// , {coords: [[109.1162, 34.2004],[119.4543, 25.9222]],lineStyle:{color:'#f5a305'}}
|
||
// , {coords: [[103.5901, 36.3043],[119.4543, 25.9222]],lineStyle:{color:'#e7ab0b'}}
|
||
// , {coords: [[106.3586, 38.1775],[119.4543, 25.9222]],lineStyle:{color:'#dfae10'}}
|
||
// , {coords: [[101.4038, 36.8207],[119.4543, 25.9222]],lineStyle:{color:'#d5b314'}}
|
||
// , {coords: [[103.9526, 30.7617],[119.4543, 25.9222]],lineStyle:{color:'#c1bb1f'}}
|
||
// , {coords: [[108.384366, 30.439702],[119.4543, 25.9222]],lineStyle:{color:'#b9be23'}}
|
||
// , {coords: [[113.0823, 28.2568],[119.4543, 25.9222]],lineStyle:{color:'#a6c62c'}}
|
||
// , {coords: [[102.9199, 25.46639],[119.4543, 25.9222]],lineStyle:{color:'#96cc34'}}
|
||
// ]
|
||
// }
|
||
],
|
||
};
|
||
myChart.setOption(option, true);
|
||
|
||
myChart.on('click', function (params) {
|
||
console.log(params)
|
||
// that.mapDialogLocation.x=params.event.offsetX
|
||
// that.mapDialogLocation.y=params.event.offsetY
|
||
that.showMapDialog=true
|
||
that.provincesCode=params.name.split('_')[1]
|
||
that.provincesName=params.name.split('_')[0]
|
||
that.getData2()
|
||
// console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
||
// myChart.dispatchAction({
|
||
// type: 'dataZoom',
|
||
// startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
||
// endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
|
||
// });
|
||
});
|
||
});
|
||
},
|
||
//设备连接情况---图表
|
||
createdDevConnectChartCharts(arr3,xData) {
|
||
|
||
let that = this;
|
||
let ageChart = echarts.init(this.$refs.devConnectChart);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 0,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: ["#5181F6", "#61D2B9"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: "right",
|
||
top: 5,
|
||
right: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "设备数",
|
||
type: "bar",
|
||
data: arr3,
|
||
barWidth: 34,
|
||
// barGap: 0.1,
|
||
itemStyle: {
|
||
color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(121, 176, 254, 1)" },
|
||
{ offset: 1, color: "rgba(84, 114, 244, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
//质量省份排名---图表
|
||
createdProvinceCharts(arr1,arr2,xData) {
|
||
// var arr1 = [10, 20, 39, 60, 35, 50];
|
||
// var arr2 = [1, 4, 10, 5, 12, 22];
|
||
let that = this;
|
||
let ageChart = echarts.init(this.$refs.provinceChart);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 0,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: that.company=='longguang'?['#4378D8','#BC5D12']:["#5181F6", "#61D2B9"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: "right",
|
||
top: 5,
|
||
right: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "测量构件数",
|
||
type: "bar",
|
||
data: arr1,
|
||
barWidth: 20,
|
||
barGap: 0.1,
|
||
itemStyle: {
|
||
color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(121, 176, 254, 1)" },
|
||
{ offset: 1, color: "rgba(84, 114, 244, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
name: "异常构件数",
|
||
type: "bar",
|
||
data: arr2,
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
color: that.company=='longguang'?'#BC5D12':new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(255, 214, 164, 1)" },
|
||
{ offset: 1, color: "rgba(255, 177, 61, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
//回弹数据情况---图表
|
||
createdAgeCharts(arr1,arr2,xData) {
|
||
|
||
|
||
let that = this;
|
||
let ageChart = echarts.init(this.$refs.ageChart);
|
||
// ageChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 40,
|
||
left: 0,
|
||
bottom: 0,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: that.company=='longguang'?['#4378D8','#BC5D12']:["#5181F6", "#61D2B9"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: "right",
|
||
top: 5,
|
||
right: 0,
|
||
itemWidth: 13,
|
||
itemHeight: 5,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "测量构件数",
|
||
type: "bar",
|
||
data: arr1,
|
||
barWidth: 20,
|
||
barGap: 0.1,
|
||
itemStyle: {
|
||
color:that.company=='longguang'?'#4378D8': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(121, 176, 254, 1)" },
|
||
{ offset: 1, color: "rgba(84, 114, 244, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
name: "异常构件数",
|
||
type: "bar",
|
||
data: arr2,
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
color: that.company=='longguang'?'#BC5D12': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(255, 214, 164, 1)" },
|
||
{ offset: 1, color: "rgba(255, 177, 61, 1)" },
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
ageChart.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.chart {
|
||
width: 100%;
|
||
height: calc(100% - 22px);
|
||
margin-top: -15px;
|
||
}
|
||
.left {
|
||
width: 35%;
|
||
float: left;
|
||
margin-right: 15px;
|
||
height: 100%;
|
||
.whiteBlock {
|
||
height: calc(33.33% - 10px);
|
||
margin-bottom: 15px;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: calc(65% - 15px);
|
||
float: left;
|
||
height: 100%;
|
||
.top {
|
||
margin-bottom: 15px;
|
||
height: calc(66.66% - 5px);
|
||
overflow: hidden;
|
||
width: 100%;
|
||
.mapBox {
|
||
float: left;
|
||
width: calc(65% - 15px);
|
||
margin-right: 15px;
|
||
height: 100%;
|
||
position: relative;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 204, 204, 0.14) 0%,
|
||
rgba(80, 111, 255, 0.14) 100%
|
||
);
|
||
}
|
||
.whiteBlock {
|
||
width: 35%;
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
}
|
||
.bottom {
|
||
width: 100%;
|
||
height: calc(33.33% - 10px);
|
||
overflow: hidden;
|
||
.whiteBlock {
|
||
width: 50%;
|
||
height: 100%;
|
||
float: left;
|
||
&:first-child{
|
||
width: 58%;
|
||
}
|
||
&:last-child{
|
||
width: calc(42% - 15px);
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.blockInner {
|
||
padding: 15px;
|
||
position: relative;
|
||
height: calc(100% - 30px);
|
||
}
|
||
.mapTitle {
|
||
width: 374px;
|
||
height: 50px;
|
||
background: linear-gradient(180deg, #79b1fe 0%, #5371f3 100%);
|
||
border-radius: 0px 0px 43px 43px;
|
||
text-shadow: 1px 1px 0px #0032e0;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
margin: 0 auto;
|
||
// position: absolute;
|
||
// left: 50%;
|
||
// top: 0;
|
||
// transform: translateX(-50%);
|
||
}
|
||
.nestContent {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.nestBox {
|
||
display: inline-block;
|
||
position: relative;
|
||
.numBox {
|
||
position: absolute;
|
||
.topTxt {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
color: rgba(44, 51, 80, 0.7);
|
||
white-space: nowrap;
|
||
img {
|
||
margin-right: 7px;
|
||
}
|
||
}
|
||
.num {
|
||
font-size: 34px;
|
||
color: rgba(255, 151, 0, 1);
|
||
padding-left: 28px;
|
||
}
|
||
}
|
||
.numBox1 {
|
||
top: -30px;
|
||
left: -30px;
|
||
}
|
||
.numBox2 {
|
||
top: 0px;
|
||
left: 200px;
|
||
}
|
||
.numBox3 {
|
||
top: 200px;
|
||
left: 180px;
|
||
}
|
||
.numBox4 {
|
||
bottom: -50px;
|
||
left: 20px;
|
||
}
|
||
}
|
||
/deep/.devTable{
|
||
&::before{
|
||
display: none;
|
||
}
|
||
th{
|
||
padding: 10px 0;
|
||
border-bottom: none;
|
||
background-color: rgba(212, 224, 255, 1);
|
||
font-size: 13px;
|
||
color: rgba(38, 45, 71, 1);
|
||
font-weight: normal;
|
||
}
|
||
td{
|
||
padding: 10px 0;
|
||
border-bottom: none;
|
||
color: rgba(81, 129, 246, 1);
|
||
}
|
||
.name{
|
||
color: rgba(38, 45, 71, 1);
|
||
cursor: pointer;
|
||
}
|
||
.el-table__footer-wrapper td{
|
||
padding: 8px 0;
|
||
color: rgba(255, 151, 0, 1);
|
||
background-color: rgba(1, 21, 82, 0.05);
|
||
border: none;
|
||
}
|
||
}
|
||
/deep/.devTable2{
|
||
td{
|
||
color: rgba(38, 45, 71, 1)!important;
|
||
background-color: rgba(250, 250, 250, 0.83);
|
||
}
|
||
}
|
||
|
||
.mapDialog{
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
background-color: #fff;
|
||
width: 230px;
|
||
// height: calc(100% - 60px);
|
||
height: 300px;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
position: absolute;
|
||
z-index: 9999;
|
||
.selectItem{
|
||
cursor: pointer;
|
||
}
|
||
.title{
|
||
margin: 0px 0 5px;
|
||
font-weight: 600;
|
||
}
|
||
.datas{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
font-size: 12px;
|
||
height: 40px;
|
||
background-color: #fbfbfb;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
.numBox2{
|
||
p:first-child{
|
||
color: @--color-primary;
|
||
}
|
||
}
|
||
}
|
||
.el-icon-error{
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style> |