Merge remote-tracking branch 'origin/dev-cq' into dev
# Conflicts: # sgzb-ui/src/api/claimAndRefund/receive.js # sgzb-ui/src/views/claimAndRefund/receiveByCq/receiveApplyAddByCq.vue # sgzb-ui/src/views/claimAndRefund/receiveByCq/receiveExamineByCq.vue # sgzb-ui/src/views/claimAndRefund/receiveByCq/receiveManage.vue # sgzb-ui/src/views/claimAndRefund/return/returnApplyAddByCq.vue
This commit is contained in:
commit
8b433a699e
|
|
@ -6,8 +6,8 @@ var prodEnv = require('./prod.env')
|
||||||
// var testUrl = '14.29.196.32:8802'
|
// var testUrl = '14.29.196.32:8802'
|
||||||
// var testUrl = '10.14.16.165:8802'
|
// var testUrl = '10.14.16.165:8802'
|
||||||
// var testUrl = '112.29.103.165:21624' //线上
|
// var testUrl = '112.29.103.165:21624' //线上
|
||||||
var testUrl = '192.168.0.14:21626' //线上
|
// var testUrl = '192.168.0.14:21626' //线上
|
||||||
// var testUrl = '192.168.0.166:8080'
|
var testUrl = '10.40.92.8:8080'
|
||||||
// var testUrl = '223.243.184.53:8480'
|
// var testUrl = '223.243.184.53:8480'
|
||||||
// var testUrl = 'www.lingyangplat.com'
|
// var testUrl = 'www.lingyangplat.com'
|
||||||
// var testUrl = ''
|
// var testUrl = ''
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,9 @@ module.exports = {
|
||||||
cssSourceMap: true,
|
cssSourceMap: true,
|
||||||
proxyTable: {
|
proxyTable: {
|
||||||
'/screen': {
|
'/screen': {
|
||||||
target: 'http://112.29.103.165:21624',
|
// target: 'http://112.29.103.165:21626',//重庆
|
||||||
|
target: 'http://192.168.0.14:21624',//测试
|
||||||
|
// target: 'http://10.40.92.74:8080',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
// secure: true, //如果是https接口，需要配置这个参数
|
// secure: true, //如果是https接口，需要配置这个参数
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
|
|
|
||||||
|
|
@ -22,4 +22,6 @@ export const getTotalOwnershipApi = params => POST(`/screen/base/largeScreen/hom
|
||||||
export const getCarUseByMonthApi = params => POST(`/screen/base/largeScreen/home/getCarUseByMonth?maType=${params.maType}`,)
|
export const getCarUseByMonthApi = params => POST(`/screen/base/largeScreen/home/getCarUseByMonth?maType=${params.maType}`,)
|
||||||
// 当月使用车辆
|
// 当月使用车辆
|
||||||
export const getMaintenanceWarningApi = params => POST(`/screen/base/largeScreen/home/getMaintenanceWarning`,)
|
export const getMaintenanceWarningApi = params => POST(`/screen/base/largeScreen/home/getMaintenanceWarning`,)
|
||||||
|
//各公司机具保有量
|
||||||
|
export const getTotalOwnershipByCompany = params => POST(`/screen/base/largeScreen/home/getTotalOwnershipByCompany`)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,471 @@
|
||||||
|
<template>
|
||||||
|
<div class="centerTopPage">
|
||||||
|
<div class="mapBox">
|
||||||
|
<div id="mapEcharts"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
let mapChinaJson = require('@/untils/china.json')
|
||||||
|
let ningxiaJson = require('@/untils/ningxia.json')
|
||||||
|
import { getEquipmentDisByMapApi } from "../../api/screen";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'centerTopPage',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: 1,
|
||||||
|
zoom: 1.39,
|
||||||
|
zoom2: 1.2,
|
||||||
|
mapEcharts: null,
|
||||||
|
mapEcharts2: null,
|
||||||
|
mapJson: null,
|
||||||
|
pointArea: [],
|
||||||
|
pointAll: [],
|
||||||
|
companyList: [],
|
||||||
|
companyAreaList: [],
|
||||||
|
isCity: 0,
|
||||||
|
cityCount: [],
|
||||||
|
gozoom: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.getCompanyList()
|
||||||
|
// this.getCompanyAreaList()
|
||||||
|
// this.getCityCount()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.getEquipmentDisByMapApiPage()
|
||||||
|
this.getInitData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getEquipmentDisByMapApiPage() {
|
||||||
|
getEquipmentDisByMapApi().then(res => {
|
||||||
|
console.log('res=====', res);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCompanyList() {
|
||||||
|
let params = {
|
||||||
|
provinceId: ''
|
||||||
|
}
|
||||||
|
getCompanyListByProvinceId(params).then(res => {
|
||||||
|
if (res.success && res.data) {
|
||||||
|
this.companyList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCompanyAreaList() {
|
||||||
|
let params = {
|
||||||
|
areaId: ''
|
||||||
|
}
|
||||||
|
getCompanyListByAreaId(params).then(res => {
|
||||||
|
if (res.success && res.data) {
|
||||||
|
this.companyAreaList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
getInitData() {
|
||||||
|
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
||||||
|
this.mapJson = mapChinaJson
|
||||||
|
echarts.registerMap('china', this.mapJson)
|
||||||
|
this.setMapOption('china')
|
||||||
|
// this.setMapOption2()
|
||||||
|
},
|
||||||
|
setMapOption(name) {
|
||||||
|
var option = {
|
||||||
|
backgroundColor: 'rgba(0,0,0,0)',
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'MAP',
|
||||||
|
type: 'map3D',
|
||||||
|
map: name,
|
||||||
|
zlevel: -10,
|
||||||
|
boxWidth: 150,
|
||||||
|
boxHeight:60,
|
||||||
|
boxDepth: 90,//地图倾斜度
|
||||||
|
regionHeight: 5,//地图厚度
|
||||||
|
label: {
|
||||||
|
show: true,//是否显示市
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",//文字颜色
|
||||||
|
fontSize: 14,//文字大小
|
||||||
|
// fontFamily: '微软雅黑',
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//三维视觉属性
|
||||||
|
itemStyle: {
|
||||||
|
opacity:1,
|
||||||
|
color: 'rgba(35, 72, 174,0.5)',//地图颜色
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderColor: 'rgb(125, 239, 250)'
|
||||||
|
},
|
||||||
|
// 鼠标hover高亮
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,//是否显示标签
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',//高亮文字颜色
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: '微软雅黑'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#7BE7FC',
|
||||||
|
borderColor:'#7BE7FC',
|
||||||
|
borderWidth:3,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
|
||||||
|
// 'color' 只显示颜色，不受光照等其它因素的影响。
|
||||||
|
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
|
||||||
|
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
|
||||||
|
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
|
||||||
|
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
|
||||||
|
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
|
||||||
|
light: {
|
||||||
|
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
|
||||||
|
main: {
|
||||||
|
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
||||||
|
color: '#fff', // 主光源的颜色。[ default: #fff ]
|
||||||
|
intensity: 1.2, // 主光源的强度。[ default: 1 ]
|
||||||
|
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
|
||||||
|
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
|
||||||
|
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
|
||||||
|
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
|
||||||
|
},
|
||||||
|
ambient: {
|
||||||
|
// 全局的环境光设置。
|
||||||
|
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
||||||
|
intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
groundplane: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
viewControl: {
|
||||||
|
//distance: 150,// 地图视角 控制初始大小
|
||||||
|
//rotateSensitivity: 1,// 旋转
|
||||||
|
//zoomSensitivity: 1,// 缩放
|
||||||
|
projection: 'perspective',
|
||||||
|
autoRotate: false,
|
||||||
|
damping: 0,
|
||||||
|
rotateSensitivity: 2,//旋转操作的灵敏度
|
||||||
|
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
|
||||||
|
zoomSensitivity:2, //缩放操作的灵敏度
|
||||||
|
panSensitivity:2, //平移操作的灵敏度
|
||||||
|
panMouseButton: 'right', //平移操作使用的鼠标按键
|
||||||
|
distance:40, //默认视角距离主体的距离
|
||||||
|
minDistance: 100,
|
||||||
|
maxDistance: 170,
|
||||||
|
minAlpha:30,
|
||||||
|
maxAlpha:80,
|
||||||
|
minBeta:-25,
|
||||||
|
maxBeta:45,
|
||||||
|
center:[0,0,0],
|
||||||
|
animation: true,
|
||||||
|
animationDurationUpdate: 1000,
|
||||||
|
animationEasingUpdate: 'cubicInOut'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.mapEcharts.setOption(option);
|
||||||
|
},
|
||||||
|
setMapOption2(){
|
||||||
|
var option = {
|
||||||
|
geo: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
zlevel: 0,
|
||||||
|
zoom: 1,
|
||||||
|
aspectScale: 0.96,
|
||||||
|
layoutCenter: ['50%', '50.2%'],
|
||||||
|
layoutSize: '150%',
|
||||||
|
roam: false,
|
||||||
|
silent: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#7BE7FC',
|
||||||
|
shadowColor: '#244AAF',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowOffsetY: 0,
|
||||||
|
shadowBlur: 50,
|
||||||
|
areaColor: '#458FD6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
zlevel: -1,
|
||||||
|
zoom: 1,
|
||||||
|
aspectScale: 0.96,
|
||||||
|
layoutCenter: ['50%', '51.4%'],
|
||||||
|
layoutSize: '150%',
|
||||||
|
roam: false,
|
||||||
|
silent: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: 'rgba(44, 89, 199,1)',
|
||||||
|
shadowColor: 'rgba(195,26,59,0.5)',
|
||||||
|
shadowOffsetY: 0,
|
||||||
|
shadowBlur: 25,
|
||||||
|
areaColor: 'rgba(44, 89, 199,0.1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
zlevel: -2,
|
||||||
|
zoom: 1,
|
||||||
|
aspectScale: 0.96,
|
||||||
|
layoutCenter: ['50%', '52.8%'],
|
||||||
|
layoutSize: '150%',
|
||||||
|
roam: false,
|
||||||
|
silent: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: 'rgba(123, 231, 252,1)',
|
||||||
|
shadowColor: 'rgba(195,26,59,0.5)',
|
||||||
|
shadowOffsetY: 0,
|
||||||
|
shadowBlur: 20,
|
||||||
|
areaColor: 'rgba(5,21,35,0.1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
zlevel: -3,
|
||||||
|
zoom: 1,
|
||||||
|
aspectScale: 0.96,
|
||||||
|
layoutCenter: ['50%', '54.2%'],
|
||||||
|
layoutSize: '150%',
|
||||||
|
roam: false,
|
||||||
|
silent: true,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: 'rgba(123, 231, 252,1)',
|
||||||
|
shadowColor: 'rgba(195,26,59,0.8)',
|
||||||
|
shadowOffsetY: 0,
|
||||||
|
shadowBlur: 15,
|
||||||
|
areaColor: 'rgba(5,21,35,0.1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
mapType: 'china',
|
||||||
|
aspectScale: 0.96,
|
||||||
|
layoutCenter: ['50%', '50%'],
|
||||||
|
layoutSize: '150%',
|
||||||
|
zoom: 1,
|
||||||
|
roam: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: '#2C59C7',
|
||||||
|
borderColor: '#7BE7FC',
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#7BE7FC',
|
||||||
|
// areaColor: {
|
||||||
|
// type: 'linear',
|
||||||
|
// x: 0,
|
||||||
|
// y: 0,
|
||||||
|
// x2: 0,
|
||||||
|
// y2: 1,
|
||||||
|
// colorStops: [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: '#0C1D75', // 0% 处的颜色
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: '#7BE7FC', // 100% 处的颜色
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// globalCoord: false, // 缺省为 false
|
||||||
|
// },
|
||||||
|
borderColor: '#7BE7FC',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.mapEcharts.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.centerTopPage {
|
||||||
|
width: 100%;
|
||||||
|
height: 627px;
|
||||||
|
// background:palegoldenrod;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
padding: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.iconMap {
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.buttonTop {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.buttom1 {
|
||||||
|
width: 110px;
|
||||||
|
height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #55f3fb;
|
||||||
|
// background: url(../../assets/img/checked.png) no-repeat center;
|
||||||
|
background-size: 110px 32px;
|
||||||
|
margin-right: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.buttom1.on {
|
||||||
|
color: #0095ff;
|
||||||
|
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
||||||
|
background-size: 110px 32px;
|
||||||
|
}
|
||||||
|
.mapBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 97%;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
#mapEcharts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#mapEcharts2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.label-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 40px;
|
||||||
|
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 10px 15px;
|
||||||
|
.item {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.item:before {
|
||||||
|
content: '';
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #06bbf2;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.itemColor1:before {
|
||||||
|
background: #06bbf2;
|
||||||
|
}
|
||||||
|
.itemColor2:before {
|
||||||
|
background: #2df0fe;
|
||||||
|
}
|
||||||
|
.itemColor3:before {
|
||||||
|
background: #10e0a5;
|
||||||
|
}
|
||||||
|
.itemColor4:before {
|
||||||
|
background: #dcef4e;
|
||||||
|
}
|
||||||
|
.itemColor5:before {
|
||||||
|
background: #f48413;
|
||||||
|
}
|
||||||
|
.itemColor6:before {
|
||||||
|
background: #fc5403;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.scrollTooltip::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.scrollTooltip::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #1653a6;
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
||||||
|
}
|
||||||
|
.itemColor {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 15px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.itemColor:before {
|
||||||
|
content: '';
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #06bbf2;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.itemColor1:before {
|
||||||
|
background: #06bbf2;
|
||||||
|
}
|
||||||
|
.itemColor2:before {
|
||||||
|
background: #2df0fe;
|
||||||
|
}
|
||||||
|
.itemColor3:before {
|
||||||
|
background: #10e0a5;
|
||||||
|
}
|
||||||
|
.itemColor4:before {
|
||||||
|
background: #dcef4e;
|
||||||
|
}
|
||||||
|
.itemColor5:before {
|
||||||
|
background: #f48413;
|
||||||
|
}
|
||||||
|
.itemColor6:before {
|
||||||
|
background: #fc5403;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -42,7 +42,7 @@ export default {
|
||||||
isCollapse: false,
|
isCollapse: false,
|
||||||
newArrOne: [
|
newArrOne: [
|
||||||
{ name: '施工机具总保有量', value: 9999 },
|
{ name: '施工机具总保有量', value: 9999 },
|
||||||
{ url: GROUP, name: '工器具总保有量', value: 9999 },
|
// { url: GROUP, name: '工器具总保有量', value: 9999 },
|
||||||
],
|
],
|
||||||
newArr: [
|
newArr: [
|
||||||
{ url: GROUP, name: '在库机具', value: 999 },
|
{ url: GROUP, name: '在库机具', value: 999 },
|
||||||
|
|
@ -75,7 +75,7 @@ export default {
|
||||||
getTotalOwnershipApi().then(res => {
|
getTotalOwnershipApi().then(res => {
|
||||||
this.newArrOne.push(
|
this.newArrOne.push(
|
||||||
{ name: '施工机具总保有量', value: res.data[0].totalOwnershipNum },
|
{ name: '施工机具总保有量', value: res.data[0].totalOwnershipNum },
|
||||||
{ url: GROUP, name: '工器具总保有量', value: res.data[1].totalOwnershipNum },
|
// { url: GROUP, name: '工器具总保有量', value: res.data[1].totalOwnershipNum },
|
||||||
)
|
)
|
||||||
this.newArr.push(
|
this.newArr.push(
|
||||||
{ url: GROUP, name: '在库机具', value: res.data[0].stockNum },
|
{ url: GROUP, name: '在库机具', value: res.data[0].stockNum },
|
||||||
|
|
@ -83,11 +83,11 @@ export default {
|
||||||
{ url: GROUP, name: '在用机具', value: res.data[0].useNum },
|
{ url: GROUP, name: '在用机具', value: res.data[0].useNum },
|
||||||
{ url: GROUP, name: '在修机具', value: res.data[0].repairNum },
|
{ url: GROUP, name: '在修机具', value: res.data[0].repairNum },
|
||||||
{ url: GROUP, name: '报废机具', value: res.data[0].scrapNum },
|
{ url: GROUP, name: '报废机具', value: res.data[0].scrapNum },
|
||||||
{ url: GROUP, name: '在库工器具', value: res.data[1].stockNum },
|
// { url: GROUP, name: '在库工器具', value: res.data[1].stockNum },
|
||||||
{ url: GROUP, name: '待入库工器具', value: res.data[1].storedNum },
|
// { url: GROUP, name: '待入库工器具', value: res.data[1].storedNum },
|
||||||
{ url: GROUP, name: '在用工器具', value: res.data[1].useNum },
|
// { url: GROUP, name: '在用工器具', value: res.data[1].useNum },
|
||||||
{ url: GROUP, name: '在修工器具', value: res.data[1].repairNum },
|
// { url: GROUP, name: '在修工器具', value: res.data[1].repairNum },
|
||||||
{ url: GROUP, name: '报废工器具', value: res.data[1].scrapNum },
|
// { url: GROUP, name: '报废工器具', value: res.data[1].scrapNum },
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<!-- 各公司机具保有量 -->
|
||||||
|
<template>
|
||||||
|
<div class="access-rate-page">
|
||||||
|
<div class="access-rate-box">
|
||||||
|
<div class="access-rate-box-title-bg">
|
||||||
|
<h5 class="access-rate-box-title">各公司机具保有量</h5>
|
||||||
|
</div>
|
||||||
|
<div id="deviceInventory"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import CountFlopOne from './countFlopOne.vue'
|
||||||
|
import { getTotalOwnershipByCompany } from "../../api/screen";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'accessRatePage',
|
||||||
|
components: {
|
||||||
|
CountFlopOne
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nameList: [],
|
||||||
|
valueList2: [],
|
||||||
|
valueList: [],
|
||||||
|
maType: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$eventBus.$on('maType', (maType) => {
|
||||||
|
this.maType = maType
|
||||||
|
this.getScrapAnalysisByMonthApiPage()
|
||||||
|
});
|
||||||
|
setInterval(() => {
|
||||||
|
this.getScrapAnalysisByMonthApiPage()
|
||||||
|
}, 60 * 1000);
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.$eventBus.$off('maType');
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getScrapAnalysisByMonthApiPage() {
|
||||||
|
// let params = {
|
||||||
|
// maType: this.maType
|
||||||
|
// }
|
||||||
|
this.nameList = []
|
||||||
|
this.valueList2 = []
|
||||||
|
this.valueList = []
|
||||||
|
getTotalOwnershipByCompany().then(res => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.nameList = res.data.map(item => item.companyName)
|
||||||
|
this.valueList = res.data.map(item => item.totalOwnershipNum)
|
||||||
|
// this.nameList.push(item)
|
||||||
|
// })
|
||||||
|
// res.data.nameList.map(item => {
|
||||||
|
// this.nameList.push(item)
|
||||||
|
// })
|
||||||
|
// res.data.valueList.map(item => {
|
||||||
|
// this.valueList.push(item)
|
||||||
|
// })
|
||||||
|
// res.data.valueList2.map(item => {
|
||||||
|
// this.valueList2.push(item)
|
||||||
|
// })
|
||||||
|
this.getInitData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getInitData() {
|
||||||
|
var echartOption = {
|
||||||
|
grid: {
|
||||||
|
left: "5%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "5%",
|
||||||
|
top: "10%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// trigger: "axis",
|
||||||
|
// axisPointer: {
|
||||||
|
// type: "none",
|
||||||
|
// },
|
||||||
|
// formatter: function (params) {
|
||||||
|
// return (
|
||||||
|
// params[0].name +
|
||||||
|
// "<br/>" +
|
||||||
|
// "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||||
|
// params[0].seriesName +
|
||||||
|
// " : " +
|
||||||
|
// Number(
|
||||||
|
// (params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||||
|
// ).toLocaleString() +
|
||||||
|
// "<br/>"
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
show: true,
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: this.nameList,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
axisTick: "none",
|
||||||
|
axisLine: "none",
|
||||||
|
show: true,
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: "12",
|
||||||
|
},
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value >= 10000) {
|
||||||
|
return (value / 10000).toLocaleString() +'万';
|
||||||
|
} else {
|
||||||
|
return value.toLocaleString();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.valueList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "保有量",
|
||||||
|
type: "bar",
|
||||||
|
zlevel: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 0,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#133062",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#60CBF9",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 20,
|
||||||
|
data: this.valueList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
let myCharts = echarts.init(document.querySelector('#deviceInventory'));
|
||||||
|
myCharts.setOption(echartOption)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.access-rate-page {
|
||||||
|
margin-bottom: 31px;
|
||||||
|
.access-rate-box {
|
||||||
|
.access-rate-box-title-bg {
|
||||||
|
width: 433px;
|
||||||
|
height: 50px;
|
||||||
|
background: url(../../assets/img/myImage/title_left.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
.access-rate-box-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 6%;
|
||||||
|
top: 28%;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 23px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#deviceInventory {
|
||||||
|
width: 433px;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
<div class="access-rate-box-title-bg">
|
<div class="access-rate-box-title-bg">
|
||||||
<h5 class="access-rate-box-title">领料数据</h5>
|
<h5 class="access-rate-box-title">领料数据</h5>
|
||||||
</div>
|
</div>
|
||||||
<CountFlopOne :val="num" sonTitle="施工工具今日出库"></CountFlopOne>
|
<CountFlopOne :val="num" sonTitle="施工机具今日出库"></CountFlopOne>
|
||||||
<div class="access-rate-box-top">
|
<!-- <div class="access-rate-box-top">
|
||||||
<CountFlopOne :val="num2" sonTitle="工器具今日出库"></CountFlopOne>
|
<CountFlopOne :val="num2" sonTitle="工器具今日出库"></CountFlopOne>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
<div class="access-rate-box-title-bg">
|
<div class="access-rate-box-title-bg">
|
||||||
<h5 class="access-rate-box-title">退料数据</h5>
|
<h5 class="access-rate-box-title">退料数据</h5>
|
||||||
</div>
|
</div>
|
||||||
<CountFlopTwo :val="num" sonTitle="施工机具今日退库"></CountFlopTwo>
|
<CountFlopTwo :val="num" sonTitle="施工机具今日入库"></CountFlopTwo>
|
||||||
<div class="access-rate-box-top">
|
<!-- <div class="access-rate-box-top">
|
||||||
<CountFlopTwo :val="num2" sonTitle="工器具今日退料"></CountFlopTwo>
|
<CountFlopTwo :val="num2" sonTitle="工器具今日退料"></CountFlopTwo>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -8,7 +8,9 @@
|
||||||
<div class="leftModuleBox">
|
<div class="leftModuleBox">
|
||||||
<LeftOne></LeftOne>
|
<LeftOne></LeftOne>
|
||||||
<LeftTwo></LeftTwo>
|
<LeftTwo></LeftTwo>
|
||||||
<LeftThree></LeftThree>
|
<!-- <LeftThree></LeftThree> -->
|
||||||
|
<LeftFour></LeftFour>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 中间3D效果展示 -->
|
<!-- 中间3D效果展示 -->
|
||||||
|
|
@ -17,12 +19,15 @@
|
||||||
<CenterFold></CenterFold>
|
<CenterFold></CenterFold>
|
||||||
</div>
|
</div>
|
||||||
<div class="center-top">
|
<div class="center-top">
|
||||||
<CountryMap></CountryMap>
|
<!-- 宁夏地图 -->
|
||||||
|
<!-- <CountryMap></CountryMap> -->
|
||||||
|
<!-- 重庆地图 -->
|
||||||
|
<Center3DMap></Center3DMap>
|
||||||
</div>
|
</div>
|
||||||
<div class="center-bottom">
|
<div class="center-bottom">
|
||||||
<CenterBottom></CenterBottom>
|
<CenterBottom></CenterBottom>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttom-box">
|
<!-- <div class="buttom-box">
|
||||||
<div class="buttonTop">
|
<div class="buttonTop">
|
||||||
<div
|
<div
|
||||||
:class="maType == 1 ? 'on' : ''"
|
:class="maType == 1 ? 'on' : ''"
|
||||||
|
|
@ -39,14 +44,15 @@
|
||||||
工器具
|
工器具
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧数据模块列表 -->
|
<!-- 右侧数据模块列表 -->
|
||||||
<div class="rightModuleBox">
|
<div class="rightModuleBox">
|
||||||
<RightOne></RightOne>
|
<RightOne></RightOne>
|
||||||
<rightTwo></rightTwo>
|
<rightTwo></rightTwo>
|
||||||
<rightThree></rightThree>
|
<rightThree></rightThree>
|
||||||
<RightFour></RightFour>
|
<LeftThree></LeftThree>
|
||||||
|
<!-- <RightFour></RightFour> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 获取天气 -->
|
<!-- 获取天气 -->
|
||||||
|
|
@ -83,12 +89,14 @@
|
||||||
import LeftOne from '../../components/home/leftOne.vue'
|
import LeftOne from '../../components/home/leftOne.vue'
|
||||||
import LeftTwo from '../../components/home/leftTwo.vue'
|
import LeftTwo from '../../components/home/leftTwo.vue'
|
||||||
import LeftThree from '../../components/home/leftThree.vue'
|
import LeftThree from '../../components/home/leftThree.vue'
|
||||||
|
import LeftFour from '../../components/home/leftFour.vue'
|
||||||
import RightOne from '../../components/home/rightOne.vue'
|
import RightOne from '../../components/home/rightOne.vue'
|
||||||
import rightTwo from '../../components/home/rightTwo.vue'
|
import rightTwo from '../../components/home/rightTwo.vue'
|
||||||
import rightThree from '../../components/home/rightThree.vue'
|
import rightThree from '../../components/home/rightThree.vue'
|
||||||
import RightFour from '../../components/home/rightFour.vue'
|
import RightFour from '../../components/home/rightFour.vue'
|
||||||
import CenterBottom from '../../components/home/centerBottom.vue'
|
import CenterBottom from '../../components/home/centerBottom.vue'
|
||||||
import CenterTop from '../../components/home/centerTop.vue'
|
import CenterTop from '../../components/home/centerTop.vue'
|
||||||
|
import Center3DMap from '../../components/home/Center3DMap.vue'
|
||||||
import CountryMap from '../../components/home/countryMap.vue'
|
import CountryMap from '../../components/home/countryMap.vue'
|
||||||
import CenterFold from '../../components/home/centerFold.vue'
|
import CenterFold from '../../components/home/centerFold.vue'
|
||||||
import { getMaintenanceWarningApi } from "../../api/screen";
|
import { getMaintenanceWarningApi } from "../../api/screen";
|
||||||
|
|
@ -97,11 +105,13 @@ export default {
|
||||||
LeftOne,
|
LeftOne,
|
||||||
LeftTwo,
|
LeftTwo,
|
||||||
LeftThree,
|
LeftThree,
|
||||||
|
LeftFour,
|
||||||
RightOne,
|
RightOne,
|
||||||
rightTwo,
|
rightTwo,
|
||||||
rightThree,
|
rightThree,
|
||||||
RightFour,
|
RightFour,
|
||||||
CenterBottom,
|
CenterBottom,
|
||||||
|
Center3DMap,
|
||||||
CenterTop,
|
CenterTop,
|
||||||
CountryMap,
|
CountryMap,
|
||||||
CenterFold
|
CenterFold
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue