7 changed files with 1711 additions and 7 deletions
@ -0,0 +1,66 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
export default { |
|||
|
|||
// 左侧数据总览
|
|||
getProjectDaily: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getProjectDailyNew', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 库存分析图 ,
|
|||
getReportInventory: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getReportInventoryNew', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 获取基础信息 ,
|
|||
getProjectBySid: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getProjectBySid?projectSid='+data, |
|||
method: 'get', |
|||
data: data |
|||
}); |
|||
}, |
|||
|
|||
// 获取仓库sid,
|
|||
getProjectIsJk: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getProjectIsJk?projectSid='+data, |
|||
method: 'get' |
|||
}); |
|||
}, |
|||
|
|||
// 获取摄像头 设备列表,
|
|||
getOtherList: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getOtherList?type=1&ckId='+data, |
|||
method: 'get' |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 实时监控 ,
|
|||
getVedioPcLiveById: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getVedioPcLiveByIdNew?id=' + data, |
|||
method: 'get' |
|||
}); |
|||
}, |
|||
|
|||
|
|||
// 回放监控 ,
|
|||
getVedioPcRecById: function(data) { |
|||
return request({ |
|||
url: '/datacenter/getVedioPcRecByIdNew?id=' + data, |
|||
method: 'get' |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<div :class="className" :style="{ height: height, width: width }" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from "./mixins/resize"; |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: "chart", |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val); |
|||
}, |
|||
}, |
|||
height: { |
|||
deep: true, |
|||
handler(val) { |
|||
console.log(val); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart(); |
|||
}); |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return; |
|||
} |
|||
this.chart.dispose(); |
|||
this.chart = null; |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, "macarons"); |
|||
this.setOptions(this.chartData); |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
xAxis, |
|||
series, |
|||
legend, |
|||
unit, |
|||
rotate, |
|||
time, |
|||
serviceData, |
|||
serviceData2, |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid:{ |
|||
show:false, |
|||
top:'20%', |
|||
right:'5%', |
|||
bottom:'10%', |
|||
left:'20%' |
|||
}, |
|||
legend: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16, |
|||
padding: [0, 10] |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: this.chartData.date, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16, |
|||
} |
|||
} |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: '人民币/元', |
|||
min: 10000, |
|||
max: 250000000, |
|||
interval: 50000000, |
|||
axisLabel: { |
|||
formatter: '{value} 元', |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 18, |
|||
|
|||
} |
|||
}, |
|||
align:'right',//看这里 |
|||
}], |
|||
series: [{ |
|||
data: this.chartData.amount, |
|||
type: 'bar' |
|||
}] |
|||
}); |
|||
this.chart.on("click", function(param) { |
|||
this.callParents(param); |
|||
}); |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit("pieChartFunction", name); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,168 @@ |
|||
<template> |
|||
<div :class="className" :style="{ height: height, width: width }" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from "./mixins/resize"; |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: "chart", |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: "100%", |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val); |
|||
}, |
|||
}, |
|||
height: { |
|||
deep: true, |
|||
handler(val) { |
|||
console.log(val); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart(); |
|||
}); |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return; |
|||
} |
|||
this.chart.dispose(); |
|||
this.chart = null; |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, "macarons"); |
|||
this.setOptions(this.chartData); |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
xAxis, |
|||
series, |
|||
legend, |
|||
unit, |
|||
rotate, |
|||
time, |
|||
serviceData, |
|||
serviceData2, |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: [ |
|||
{ |
|||
text: this.chartData.pledgeRatePercent+"%", |
|||
subtext: "质押率 " + this.chartData.bankPledgeRate + "%", |
|||
textStyle:{ |
|||
fontSize:20, |
|||
color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc" |
|||
|
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 18, |
|||
color: '#bbbaba' |
|||
}, |
|||
textAlign:"center", |
|||
x: '30%', |
|||
y: '48%', |
|||
}], |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter:function (parms){ |
|||
var str= |
|||
parms.marker+""+parms.data.name+"</br>"+ |
|||
"价值："+ parms.data.value+"</br>"+ |
|||
"占比："+ parms.percent+"%"; |
|||
return str ; |
|||
} |
|||
}, |
|||
legend: { |
|||
type:"plain", |
|||
icon:'rect', |
|||
y: 'center', |
|||
x:"right", |
|||
orient: 'vertical', |
|||
left:'65%', |
|||
align:'left', |
|||
top:'50', |
|||
itemGap:50, |
|||
padding:[20,0,20,10], |
|||
textStyle: { |
|||
color:'#fff', |
|||
fontSize:18, |
|||
padding:[0,5] |
|||
}, |
|||
height:'auto', |
|||
itemWidth:20, |
|||
itemHeight:20 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name:'标签', |
|||
type:'pie', |
|||
center: ['31%', '55%'], |
|||
radius: ['45%', '70%'], |
|||
clockwise: false, //饼图的扇区是否是顺时针排布 |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
} |
|||
}, |
|||
|
|||
labelLine: { |
|||
normal: { |
|||
length:5, |
|||
length2:3, |
|||
smooth:true, |
|||
} |
|||
}, |
|||
data: this.chartData.data |
|||
// [ |
|||
// {value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}}, |
|||
// {value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}}, |
|||
// {value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}}, |
|||
// {value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}}, |
|||
// {value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}}, |
|||
|
|||
// ] |
|||
} |
|||
] |
|||
}); |
|||
this.chart.on("click", function (param) { |
|||
this.callParents(param); |
|||
}); |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit("pieChartFunction", name); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue