修改中建四局页面(双碳管理)细节处理
This commit is contained in:
parent
6b45d5dcba
commit
0b7a2c7e80
BIN
src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/images/common/bg_sby.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
@ -49,7 +49,14 @@ export default {
|
|||||||
// 默认为直线,可选为:'line' | 'shadow'
|
// 默认为直线,可选为:'line' | 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
grid: {
|
||||||
|
// 图表距离边框的距离,可用百分比和数字(px)配置
|
||||||
|
top: '15%',
|
||||||
|
left: '2%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '17%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
|
|||||||
@ -1,15 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="containerBox">
|
<div class="containerBox">
|
||||||
<div class="right1">
|
<div class="right1">
|
||||||
<span @click="change(0)" :class="number == 0 ? 'newStyle':'btn_anniu'">实时数据</span>
|
<span @click="change(0)" :class="number == 0 ? 'newStyle' : 'btn_anniu'">实时数据</span>
|
||||||
<span @click="change(1)" :class="number == 1 ? 'newStyle':'btn_anniu'">零碳展厅</span>
|
<span @click="change(1)" :class="number == 1 ? 'newStyle' : 'btn_anniu'">零碳展厅</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right3">
|
<div class="right3">
|
||||||
|
<div class="dropDown" v-show="0 === number">
|
||||||
|
<el-dropdown>
|
||||||
|
<span class="el-dropdown-link"> 设备一<i class="el-icon-arrow-down el-icon--right"></i> </span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item>设备二</el-dropdown-item>
|
||||||
|
<el-dropdown-item>设备三</el-dropdown-item>
|
||||||
|
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
<div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
|
<div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
|
||||||
<div class="right4" v-show="1 === number">
|
<div class="right4" v-show="1 === number">
|
||||||
<!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
|
<!-- <p><img src="@/views/projectAdmin/fourEngin/assets/images/common/video_bg.jpg"></p> -->
|
||||||
<videoPhoto class="video"></videoPhoto>
|
<videoPhoto class="video"></videoPhoto>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -18,12 +29,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
|
import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
|
||||||
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
|
// import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
|
||||||
import { environmentDevList } from "@/assets/js/api/environmentManage";
|
import { environmentDevList } from '@/assets/js/api/environmentManage'
|
||||||
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
|
import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
|
||||||
import echarts from "echarts4";
|
import echarts from 'echarts4'
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components: {
|
||||||
videoPhoto
|
videoPhoto
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -34,59 +45,57 @@ export default {
|
|||||||
offlineDevNum: 0,
|
offlineDevNum: 0,
|
||||||
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
|
||||||
plantCap: {
|
plantCap: {
|
||||||
crc: "--",
|
crc: '--',
|
||||||
humidity: "--",
|
humidity: '--',
|
||||||
noise: "--",
|
noise: '--',
|
||||||
plateHumidity: "--",
|
plateHumidity: '--',
|
||||||
plateTemperature: "--",
|
plateTemperature: '--',
|
||||||
pm10: "--",
|
pm10: '--',
|
||||||
pm25: "--",
|
pm25: '--',
|
||||||
pressure: "--",
|
pressure: '--',
|
||||||
temperature: "--",
|
temperature: '--',
|
||||||
tsp: "--",
|
tsp: '--',
|
||||||
voltage: "--",
|
voltage: '--',
|
||||||
winddirectionName: "--",
|
winddirectionName: '--',
|
||||||
windspeed: "--"
|
windspeed: '--'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.createCenterChart();
|
this.createCenterChart()
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
// this.getDevList();
|
// this.getDevList();
|
||||||
// });
|
// });
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDevList() {
|
getDevList() {
|
||||||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
|
||||||
result => {
|
console.log('列表', result)
|
||||||
console.log("列表", result);
|
this.devList = result.result
|
||||||
this.devList = result.result;
|
console.log(this.devList)
|
||||||
console.log(this.devList);
|
if (result.result.length > 0) {
|
||||||
if (result.result.length > 0) {
|
this.currentDevDetail = result.result[0]
|
||||||
this.currentDevDetail = result.result[0];
|
|
||||||
|
|
||||||
this.$emit('custClick',this.currentDevDetail)
|
this.$emit('custClick', this.currentDevDetail)
|
||||||
|
|
||||||
this.offlineDevNum = 0;
|
this.offlineDevNum = 0
|
||||||
this.onlineDevNum = 0;
|
this.onlineDevNum = 0
|
||||||
this.devList.forEach(element => {
|
this.devList.forEach(element => {
|
||||||
if (element.isClosed == 2) {
|
if (element.isClosed == 2) {
|
||||||
this.offlineDevNum++;
|
this.offlineDevNum++
|
||||||
} else {
|
} else {
|
||||||
this.onlineDevNum++;
|
this.onlineDevNum++
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
this.getRealTimeDustNoiseData();
|
this.getRealTimeDustNoiseData()
|
||||||
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
||||||
// this.getRealTimeDustNoiseData();
|
// this.getRealTimeDustNoiseData();
|
||||||
// },5000)
|
// },5000)
|
||||||
// this.selectDustNoiseData(); 近24H
|
// this.selectDustNoiseData(); 近24H
|
||||||
} else {
|
} else {
|
||||||
// this.createCenterChart();
|
// this.createCenterChart();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
);
|
})
|
||||||
},
|
},
|
||||||
/** 查询 */
|
/** 查询 */
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
@ -97,12 +106,12 @@ export default {
|
|||||||
// // 切换设备
|
// // 切换设备
|
||||||
realTimeMonitor(value) {
|
realTimeMonitor(value) {
|
||||||
if (this.realTimeDustNoiseDataTime) {
|
if (this.realTimeDustNoiseDataTime) {
|
||||||
clearInterval(this.realTimeDustNoiseDataTime);
|
clearInterval(this.realTimeDustNoiseDataTime)
|
||||||
}
|
}
|
||||||
console.log("id换了吗", value);
|
console.log('id换了吗', value)
|
||||||
this.currentDevDetail = value;
|
this.currentDevDetail = value
|
||||||
|
|
||||||
this.getRealTimeDustNoiseData();
|
this.getRealTimeDustNoiseData()
|
||||||
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
// this.realTimeDustNoiseDataTime = setInterval( () => {
|
||||||
// this.getRealTimeDustNoiseData();
|
// this.getRealTimeDustNoiseData();
|
||||||
// },5000)
|
// },5000)
|
||||||
@ -115,70 +124,68 @@ export default {
|
|||||||
let data = {
|
let data = {
|
||||||
deviceId: this.currentDevDetail.deviceId,
|
deviceId: this.currentDevDetail.deviceId,
|
||||||
projectSn: this.$store.state.projectSn
|
projectSn: this.$store.state.projectSn
|
||||||
};
|
}
|
||||||
console.log(data);
|
console.log(data)
|
||||||
getRealTimeDustNoiseDataApi(data).then(res => {
|
getRealTimeDustNoiseDataApi(data).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
console.log(res.result);
|
console.log(res.result)
|
||||||
if (res.result != null) {
|
if (res.result != null) {
|
||||||
this.plantCap = res.result;
|
this.plantCap = res.result
|
||||||
} else {
|
} else {
|
||||||
this.plantCap = {
|
this.plantCap = {
|
||||||
crc: "--",
|
crc: '--',
|
||||||
humidity: "--",
|
humidity: '--',
|
||||||
noise: "--",
|
noise: '--',
|
||||||
plateHumidity: "--",
|
plateHumidity: '--',
|
||||||
plateTemperature: "--",
|
plateTemperature: '--',
|
||||||
pm10: "--",
|
pm10: '--',
|
||||||
pm25: "--",
|
pm25: '--',
|
||||||
pressure: "--",
|
pressure: '--',
|
||||||
temperature: "--",
|
temperature: '--',
|
||||||
tsp: "--",
|
tsp: '--',
|
||||||
voltage: "--",
|
voltage: '--',
|
||||||
winddirectionName: "--",
|
winddirectionName: '--',
|
||||||
windspeed: "--"
|
windspeed: '--'
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
this.createCenterChart();
|
this.createCenterChart()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
//展示数据/视频播放切换
|
//展示数据/视频播放切换
|
||||||
change: function(index) {
|
change: function(index) {
|
||||||
console.log(111);
|
console.log(111)
|
||||||
this.number = index
|
this.number = index
|
||||||
},
|
},
|
||||||
|
|
||||||
//环境监测实时数据--图表
|
//环境监测实时数据--图表
|
||||||
createCenterChart() {
|
createCenterChart() {
|
||||||
let centerChart = echarts.init(this.$refs.centerChart);
|
let centerChart = echarts.init(this.$refs.centerChart)
|
||||||
console.log("this.$refs.centerChart");
|
console.log('this.$refs.centerChart')
|
||||||
console.log(this.$refs.centerChart.offsetHeight);
|
console.log(this.$refs.centerChart.offsetHeight)
|
||||||
centerChart.clear();
|
centerChart.clear()
|
||||||
let detailData = this.$t("message.environmentalOverview.plantCap");
|
let detailData = this.$t('message.environmentalOverview.plantCap')
|
||||||
for (let i = 0; i < detailData.length; i++) {
|
for (let i = 0; i < detailData.length; i++) {
|
||||||
if (detailData[i].id == 1) {
|
if (detailData[i].id == 1) {
|
||||||
detailData[i].value = this.plantCap.humidity; //湿度
|
detailData[i].value = this.plantCap.humidity //湿度
|
||||||
} else if (detailData[i].id == 2) {
|
} else if (detailData[i].id == 2) {
|
||||||
detailData[i].value = this.plantCap.pm25; //pm2.5
|
detailData[i].value = this.plantCap.pm25 //pm2.5
|
||||||
} else if (detailData[i].id == 3) {
|
} else if (detailData[i].id == 3) {
|
||||||
detailData[i].value = this.plantCap.temperature; //温度
|
detailData[i].value = this.plantCap.temperature //温度
|
||||||
} else if (detailData[i].id == 4) {
|
} else if (detailData[i].id == 4) {
|
||||||
detailData[i].value = this.plantCap.tsp; //tsp
|
detailData[i].value = this.plantCap.tsp //tsp
|
||||||
} else if (detailData[i].id == 5) {
|
} else if (detailData[i].id == 5) {
|
||||||
detailData[i].value = this.plantCap.windspeed; //风速
|
detailData[i].value = this.plantCap.windspeed //风速
|
||||||
} else if (detailData[i].id == 6) {
|
} else if (detailData[i].id == 6) {
|
||||||
detailData[i].value = this.plantCap.pm10; // pm10
|
detailData[i].value = this.plantCap.pm10 // pm10
|
||||||
} else if (detailData[i].id == 7) {
|
} else if (detailData[i].id == 7) {
|
||||||
detailData[i].value = this.plantCap.winddirectionName;
|
detailData[i].value = this.plantCap.winddirectionName
|
||||||
} else if (detailData[i].id == 8) {
|
} else if (detailData[i].id == 8) {
|
||||||
detailData[i].value = this.plantCap.pressure
|
detailData[i].value = this.plantCap.pressure ? this.plantCap.pressure : '--'
|
||||||
? this.plantCap.pressure
|
|
||||||
: "--";
|
|
||||||
}
|
}
|
||||||
detailData[i].value += detailData[i].unit;
|
detailData[i].value += detailData[i].unit
|
||||||
}
|
}
|
||||||
var plantCap = detailData;
|
var plantCap = detailData
|
||||||
|
|
||||||
var datalist = [
|
var datalist = [
|
||||||
{
|
{
|
||||||
@ -188,11 +195,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#29c0fb"
|
color: '#29c0fb'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#2dc5b9"
|
color: '#2dc5b9'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -203,11 +210,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#35d17e"
|
color: '#35d17e'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#49ddb2"
|
color: '#49ddb2'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -218,11 +225,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#e5d273"
|
color: '#e5d273'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#e4a37f"
|
color: '#e4a37f'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -233,11 +240,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#277aec"
|
color: '#277aec'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#57c5ec"
|
color: '#57c5ec'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -248,11 +255,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#e54948"
|
color: '#e54948'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#f08456"
|
color: '#f08456'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -263,11 +270,11 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#11c46e"
|
color: '#11c46e'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#f08456"
|
color: '#f08456'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
@ -278,21 +285,21 @@ export default {
|
|||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: "#6367E0"
|
color: '#6367E0'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: "#B667F0"
|
color: '#B667F0'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
];
|
]
|
||||||
var datas = [];
|
var datas = []
|
||||||
for (var i = 0; i < plantCap.length; i++) {
|
for (var i = 0; i < plantCap.length; i++) {
|
||||||
var item = plantCap[i];
|
var item = plantCap[i]
|
||||||
var itemToStyle = datalist[i];
|
var itemToStyle = datalist[i]
|
||||||
datas.push({
|
datas.push({
|
||||||
name: item.value + "\n" + item.name,
|
name: item.value + '\n' + item.name,
|
||||||
value: itemToStyle.offset,
|
value: itemToStyle.offset,
|
||||||
symbolSize: itemToStyle.symbolSize,
|
symbolSize: itemToStyle.symbolSize,
|
||||||
label: {
|
label: {
|
||||||
@ -310,7 +317,7 @@ export default {
|
|||||||
opacity: itemToStyle.opacity
|
opacity: itemToStyle.opacity
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
let option1 = {
|
let option1 = {
|
||||||
grid: {
|
grid: {
|
||||||
@ -321,11 +328,11 @@ export default {
|
|||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
gridIndex: 0,
|
gridIndex: 0,
|
||||||
type: "value",
|
type: 'value',
|
||||||
show: false,
|
show: false,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
max: 100,
|
||||||
nameLocation: "middle",
|
nameLocation: 'middle',
|
||||||
nameGap: 5
|
nameGap: 5
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@ -335,13 +342,13 @@ export default {
|
|||||||
min: 0,
|
min: 0,
|
||||||
show: false,
|
show: false,
|
||||||
max: 100,
|
max: 100,
|
||||||
nameLocation: "middle",
|
nameLocation: 'middle',
|
||||||
nameGap: 30
|
nameGap: 30
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "effectScatter",
|
type: 'effectScatter',
|
||||||
// symbol: 'circle',
|
// symbol: 'circle',
|
||||||
// symbolSize: 120,
|
// symbolSize: 120,
|
||||||
|
|
||||||
@ -349,36 +356,35 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
formatter: "{b}",
|
formatter: '{b}',
|
||||||
color: "#fff",
|
color: '#fff',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "20"
|
fontSize: '20'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "#00acea"
|
color: '#00acea'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: datas
|
data: datas
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
}
|
||||||
centerChart.setOption(option1);
|
centerChart.setOption(option1)
|
||||||
window.onresize = centerChart.resize;
|
window.onresize = centerChart.resize
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch: {
|
||||||
'plantCap':{
|
plantCap: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
if (newVal != oldVal) {
|
if (newVal != oldVal) {
|
||||||
this.createCenterChart();
|
this.createCenterChart()
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -394,7 +400,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 35%;
|
margin-left: 35%;
|
||||||
|
|
||||||
|
|
||||||
.btn_anniu {
|
.btn_anniu {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// margin-top: 5px;
|
// margin-top: 5px;
|
||||||
@ -410,7 +415,6 @@ export default {
|
|||||||
margin: 0 10px 0 0;
|
margin: 0 10px 0 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.newStyle {
|
.newStyle {
|
||||||
@ -430,32 +434,49 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right3 {
|
.right3 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
.centerChart {
|
.centerChart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 22px);
|
height: calc(100% - 22px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#right2{
|
#right2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
.right4 {
|
||||||
.right4{
|
width: 100%;
|
||||||
width: 100%;
|
height: 100%;
|
||||||
height: 100%;
|
.video {
|
||||||
.video{
|
margin-bottom: -50px;
|
||||||
margin-bottom: -50px;
|
display: inline-block;
|
||||||
display: inline-block;
|
margin-left: 25px;
|
||||||
margin-left: 25px;
|
width: 850px;
|
||||||
width: 850px;
|
height: 550px;
|
||||||
height: 550px;
|
}
|
||||||
|
}
|
||||||
|
.dropDown {
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 40px;
|
||||||
|
margin-top: -20px;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: #305c6d;
|
||||||
|
background-image: url(../assets/images/common/bg_sby.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
font-size: 8px;
|
||||||
|
.el-dropdown-link {
|
||||||
|
color: #Fff;
|
||||||
|
}
|
||||||
|
.el-icon-arrow-down{
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,7 +3,9 @@
|
|||||||
<div class="electricityBox">
|
<div class="electricityBox">
|
||||||
<div class="electricityTop">
|
<div class="electricityTop">
|
||||||
<span class="text1">今日发电</span>
|
<span class="text1">今日发电</span>
|
||||||
<span class="numTop" ><span class="numText">10</span></span>
|
<span class="numTop" >
|
||||||
|
<span class="numText">10</span>
|
||||||
|
</span>
|
||||||
<span class="texts">度</span>
|
<span class="texts">度</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="electricityBottom">
|
<div class="electricityBottom">
|
||||||
@ -180,7 +182,7 @@ export default {
|
|||||||
span{
|
span{
|
||||||
color: #6EE4F0 ;
|
color: #6EE4F0 ;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
opacity: 0.7;
|
// opacity: 0.7;
|
||||||
}
|
}
|
||||||
.numTop{
|
.numTop{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -193,13 +195,14 @@ export default {
|
|||||||
background-size: 80%;
|
background-size: 80%;
|
||||||
//font-size: 40px;
|
//font-size: 40px;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
color: #fff !important;
|
// color: #fff !important;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-right: -15px;
|
margin-right: -15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.numText{
|
.numText{
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #fff;
|
color: #fff !important;
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
}
|
}
|
||||||
.text1{
|
.text1{
|
||||||
|
|||||||
@ -91,10 +91,10 @@ export default {
|
|||||||
color:#72bdc9;
|
color:#72bdc9;
|
||||||
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
|
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
opacity: 0.8;
|
//opacity: 0.8;
|
||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
color: #c5c7cc;
|
color: #FFF;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,11 +52,12 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
color: #c5c7cc;
|
color: #c5c7cc;
|
||||||
.air {
|
.air {
|
||||||
|
margin-top: 25px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
margin-top: 10px;
|
margin-top: -20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20%;
|
height: 20%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -71,7 +71,7 @@ export default {
|
|||||||
grid: {
|
grid: {
|
||||||
// 图表距离边框的距离,可用百分比和数字(px)配置
|
// 图表距离边框的距离,可用百分比和数字(px)配置
|
||||||
top: '5%',
|
top: '5%',
|
||||||
left: '0%',
|
left: '4%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
bottom: '25%',
|
bottom: '25%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
|
|||||||
@ -283,7 +283,7 @@ export default {
|
|||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
color: #6ee4f0;
|
color: #6ee4f0;
|
||||||
opacity: 0.8;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.span1{
|
.span1{
|
||||||
|
|||||||
@ -75,7 +75,7 @@ export default {
|
|||||||
var dataArr = 80;
|
var dataArr = 80;
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
// backgroundColor: "#FFFFFF",
|
// backgroundColor: "#162235",
|
||||||
title: {
|
title: {
|
||||||
show: true,
|
show: true,
|
||||||
text: '优',
|
text: '优',
|
||||||
@ -84,8 +84,8 @@ var option = {
|
|||||||
z: 8,
|
z: 8,
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#458efd',
|
color: '#42A6DD ',
|
||||||
fontSize: 20,
|
fontSize: 15,
|
||||||
fontWeight: 'normal'
|
fontWeight: 'normal'
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -94,15 +94,15 @@ var option = {
|
|||||||
name: "内部(环形)进度条",
|
name: "内部(环形)进度条",
|
||||||
type: "gauge",
|
type: "gauge",
|
||||||
// center: ['30%', '40%'],
|
// center: ['30%', '40%'],
|
||||||
radius: '50%',
|
radius: '60%',
|
||||||
splitNumber: 20,
|
splitNumber: 20,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: [
|
color: [
|
||||||
[dataArr / 80, '#6acdc9'],
|
[dataArr / 100, '#6acdc9'],
|
||||||
[1]
|
[1]
|
||||||
],
|
],
|
||||||
width: 5
|
width: 3.5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
@ -123,7 +123,7 @@ var option = {
|
|||||||
name: '外部刻度',
|
name: '外部刻度',
|
||||||
type: 'gauge',
|
type: 'gauge',
|
||||||
// center: ['20%', '50%'],
|
// center: ['20%', '50%'],
|
||||||
radius: '62%',
|
radius: '70%',
|
||||||
min: 0, //最小刻度
|
min: 0, //最小刻度
|
||||||
max: 100, //最大刻度
|
max: 100, //最大刻度
|
||||||
splitNumber: 10, //刻度数量
|
splitNumber: 10, //刻度数量
|
||||||
@ -133,7 +133,7 @@ var option = {
|
|||||||
show: true,
|
show: true,
|
||||||
// 仪表盘刻度线
|
// 仪表盘刻度线
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 1,
|
width: 0.5,
|
||||||
color: [
|
color: [
|
||||||
[1]
|
[1]
|
||||||
]
|
]
|
||||||
@ -141,7 +141,7 @@ var option = {
|
|||||||
},
|
},
|
||||||
//仪表盘文字
|
//仪表盘文字
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: false,
|
||||||
color: '#7abec4',
|
color: '#7abec4',
|
||||||
distance: 8,
|
distance: 8,
|
||||||
fontSize:8,
|
fontSize:8,
|
||||||
@ -179,11 +179,11 @@ var option = {
|
|||||||
color: '#7abec4', //用颜色渐变函数不起作用
|
color: '#7abec4', //用颜色渐变函数不起作用
|
||||||
width: 1,
|
width: 1,
|
||||||
},
|
},
|
||||||
length: -5
|
length: -3
|
||||||
}, //刻度样式
|
}, //刻度样式
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
length: -8,
|
length: -5,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#7abec4', //用颜色渐变函数不起作用
|
color: '#7abec4', //用颜色渐变函数不起作用
|
||||||
width: 1,
|
width: 1,
|
||||||
@ -199,7 +199,7 @@ var option = {
|
|||||||
/*内部*/
|
/*内部*/
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['37%', '33%'],
|
radius: ["35%",'36'],
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
z: 8,
|
z: 8,
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
@ -223,7 +223,7 @@ var option = {
|
|||||||
formatter: function(params) {
|
formatter: function(params) {
|
||||||
return params.value ;
|
return params.value ;
|
||||||
},
|
},
|
||||||
color: '#458efd',
|
color: '#42A6DD ',
|
||||||
fontSize: 30,
|
fontSize: 30,
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
position: 'center',
|
position: 'center',
|
||||||
@ -238,7 +238,7 @@ var option = {
|
|||||||
/*外一层*/
|
/*外一层*/
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ['39%', '35%'],
|
radius: ['43%','36'],
|
||||||
startAngle: 220,
|
startAngle: 220,
|
||||||
endAngle: -40,
|
endAngle: -40,
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
@ -262,7 +262,7 @@ var option = {
|
|||||||
//外二层圈
|
//外二层圈
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
radius: ['41%', '38%'],
|
radius: ["48%",'36%'],
|
||||||
center: ["50%", "50%"],
|
center: ["50%", "50%"],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
z: 0,
|
z: 0,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user