Merge remote-tracking branch 'origin/master'

master
魔神煜修罗皇 2 years ago
commit b1ef74bf8e
  1. 4
      psdc-ui/src/api/control/manual.js
  2. 6
      psdc-ui/src/api/control/timer.js
  3. BIN
      psdc-ui/src/assets/images/功率.png
  4. BIN
      psdc-ui/src/assets/images/温度.png
  5. BIN
      psdc-ui/src/assets/images/温度传感器.png
  6. BIN
      psdc-ui/src/assets/images/用电量.png
  7. 76
      psdc-ui/src/views/control/manual/index.vue
  8. 103
      psdc-ui/src/views/control/timer/index.vue
  9. 364
      psdc-ui/src/views/emonitor/db/index.vue
  10. 388
      psdc-ui/src/views/emonitor/xrgl/index.vue
  11. 1
      psdc-ui/src/views/system/cl/index.vue

@ -7,4 +7,8 @@ export function getDevice() {
/** 获取调控日志列表*/ /** 获取调控日志列表*/
export function getControlLogList(data) { export function getControlLogList(data) {
return request.post('/control/manual/controlLogList',data) return request.post('/control/manual/controlLogList',data)
}
/** 获取策略列表*/
export function getStrategyList(data) {
return request.get('/control/manual/strategyList',data)
} }

@ -0,0 +1,6 @@
import request from '@/utils/request'
/** 获取定时控制列表*/
export function getList(data) {
return request.post('/control/timer/list',data)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -16,6 +16,7 @@
<el-form-item label="当前状态:"><span :class="{'green':item.deviceRunstatus === '开启','red':item.deviceRunstatus === '关闭'}">{{ item.deviceRunstatus }}</span></el-form-item> <el-form-item label="当前状态:"><span :class="{'green':item.deviceRunstatus === '开启','red':item.deviceRunstatus === '关闭'}">{{ item.deviceRunstatus }}</span></el-form-item>
<el-form-item label="进水温度:"><el-input v-model="form1.enter" /></el-form-item> <el-form-item label="进水温度:"><el-input v-model="form1.enter" /></el-form-item>
<el-form-item label="出水温度:"><el-input v-model="form1.leave" /></el-form-item> <el-form-item label="出水温度:"><el-input v-model="form1.leave" /></el-form-item>
<!-- <el-form-item label="当前温度:"><el-input v-model="form1.now" /></el-form-item>-->
<div class="submit" @click="onSubmit1">确定</div> <div class="submit" @click="onSubmit1">确定</div>
</el-form> </el-form>
</div> </div>
@ -151,8 +152,18 @@
<el-drawer v-model="drawerIshow"> <el-drawer v-model="drawerIshow">
<template #header><h4>策略导入</h4></template> <template #header><h4>策略导入</h4></template>
<template #default> <template #default>
<el-radio v-model="radio" label="策略1" size="large">策略1</el-radio> <el-radio v-for="(item,index) in celueList" :key="index" class="celueBox" v-model="radio" :label="item.sceneName" size="large">
<el-radio v-model="radio" label="策略2" size="large">策略2</el-radio> <span style="font-weight: bold; display: inline-block; margin-bottom: 20px;">{{ item.sceneName }}</span>
<div class="celueItem" v-for="items in item.data" :key="items.device_id">
<span>{{ items.device_name }}</span>
<div class="itemsValue">
<span class="txtInput" v-for="itemsValue in items.value" :key="itemsValue.sceneKey">
<span class="txt">{{ itemsValue.sceneContext }}</span>
<input type="text" :value="itemsValue.sceneValue" disabled/>
</span>
</div>
</div>
</el-radio>
</template> </template>
<template #footer> <template #footer>
<div style="flex: auto"> <div style="flex: auto">
@ -167,15 +178,19 @@
import { Download } from '@element-plus/icons-vue' //element import { Download } from '@element-plus/icons-vue' //element
import { ref,reactive,onMounted } from 'vue' import { ref,reactive,onMounted } from 'vue'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { getDevice,getControlLogList } from '@/api/control/manual' import { getDevice,getControlLogList,getStrategyList } from '@/api/control/manual'
onMounted(()=>{ onMounted(()=>{
getDeviceFun(); getDeviceFun();
getControlLogListFun(); getControlLogListFun();
getStrategyListFun()
}) })
/** 获取所有设备*/ /** 获取所有设备*/
const deviceArr = ref([]) const deviceArr = ref([])
const isShow1 = ref(true)
const isShow2 = ref(true)
const isShow3 = ref(true)
function getDeviceFun(){ function getDeviceFun(){
getDevice().then((res)=>{ getDevice().then((res)=>{
console.log(res.data) console.log(res.data)
@ -201,6 +216,7 @@ const value7 = ref(false)
const form1 = reactive({ const form1 = reactive({
enter:'', enter:'',
leave:'', leave:'',
now:''
}) })
const form2 = reactive({ const form2 = reactive({
enter:'', enter:'',
@ -254,10 +270,18 @@ function getControlLogListFun(){
/** 策略导入处理*/ /** 策略导入处理*/
const drawerIshow = ref(false) const drawerIshow = ref(false)
const radio = ref() const radio = ref()
const celueList = ref([])
function getStrategyListFun(){
getStrategyList().then((res)=>{
celueList.value = res.data
console.log(res.data)
})
}
function confirmClick() { function confirmClick() {
ElMessageBox.confirm(`确定执行 ${radio.value} ?`).then(() => { ElMessageBox.confirm(`确定执行 ${radio.value} ?`).then(() => {
drawerIshow.value = false; drawerIshow.value = false;
}) console.log('确定')
})
} }
@ -363,6 +387,43 @@ function confirmClick() {
} }
} }
.celueBox{
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 12px;
border: 1px solid #ddd;
&:hover{
border: 1px solid #409EFF;
}
.celueItem{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
padding: 10px 0;
border-bottom: 1px solid #dddddd50;
.itemsValue{
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
width: 80%;
.txtInput{
margin-right: 10px;
.txt{
display: inline-block;
width: 80px;
text-align: right;
}
input{
padding: 3px 3px;
width: 100px;
border: 1px solid #ddd;
}
}
}
}
}
::v-deep .el-button{ ::v-deep .el-button{
border-radius: 2px; border-radius: 2px;
margin-bottom: 12px; margin-bottom: 12px;
@ -396,5 +457,12 @@ function confirmClick() {
::v-deep .el-table--fit{ ::v-deep .el-table--fit{
background-color: #2D3D88; background-color: #2D3D88;
} }
::v-deep .el-radio{
display: inline-block;
}
::v-deep .el-drawer__body{
overflow-x: hidden;
overflow-y: auto;
}
</style> </style>

@ -16,7 +16,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="有效日期" style="width: 308px;"> <el-form-item label="有效日期" style="width: 308px;">
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <el-date-picker v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@click="seletDate"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@ -31,8 +38,8 @@
<div class="dev_control_table"> <div class="dev_control_table">
<el-table :data="timingList" height="500px"> <el-table :data="timingList" height="500px">
<el-table-column label="序号" align="center" width="50"/> <el-table-column label="序号" align="center" width="50"/>
<el-table-column label="指令内容" align="center" prop="content" width="700"/> <el-table-column label="指令内容" align="center" prop="controlValue" width="700"/>
<el-table-column label="执行时间" align="center" prop="time"/> <el-table-column label="执行时间" align="center" prop="createTime"/>
<el-table-column label="有效日期" align="center" prop="dateRange"/> <el-table-column label="有效日期" align="center" prop="dateRange"/>
<el-table-column label="有效星期" align="center" prop="week"/> <el-table-column label="有效星期" align="center" prop="week"/>
<el-table-column label="操作" align="center" prop="handle"> <el-table-column label="操作" align="center" prop="handle">
@ -49,7 +56,7 @@
:disabled="disabled" :disabled="disabled"
:background="background" :background="background"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="timingList.length" :total="total"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange"/> @current-change="handleCurrentChange"/>
</div> </div>
@ -107,46 +114,93 @@
<script setup name="Index"> <script setup name="Index">
import {Delete} from '@element-plus/icons-vue' import {Delete} from '@element-plus/icons-vue'
import {ref,reactive,watch} from "vue"; import {ref,reactive,watch,onMounted} from "vue";
import { getList } from '@/api/control/timer'
/** 页面加载时*/
onMounted(()=>{
formattedDateFun()
getListFun()
})
/** 格式化日期*/
const YYYYMMDD = ref();
const timer = ref()
function formattedDateFun(){
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth()+1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
let hours = date.getHours()
let minutes = date.getMinutes()
let seconds = date.getSeconds()
YYYYMMDD.value = `${year}-${month}-${day}`
timer.value = `${hours}:${minutes}:${seconds}`
console.log(YYYYMMDD.value)
console.log(timer.value)
}
/** 筛选处理 */ /** 筛选处理 */
//
const dateRange = ref([]); const dateRange = ref([]);
const startDate = ref()
const endDate = ref()
const wacthSelectDate = watch(()=> dateRange.value,(val) =>{
console.log(val[0])
startDate.value = val[0]
console.log(val[1])
endDate.value = val[1]
})
const data = reactive({ const data = reactive({
queryParams: { queryParams: {
week: '', week: '',
time: '', time: '',
} }
}); });
//
function seletDate(){
console.log('选择的日期',dateRange.value)
}
// //
function handleQuery(){ function handleQuery(){
getListFun()
} }
// //
function resetQuery(){ function resetQuery(){
dateRange.value = [] dateRange.value = [];
getListFun()
} }
/** 数据表格处理 */ /** 数据表格处理 */
const timingList = reactive([ const timingList = ref([])
{
content:'11',
time:'22',
dateRange:'44',
week:'55',
},
{
content:'11',
time:'22',
dateRange:'44',
week:'55',
}
])
const currentPage = ref(1) const currentPage = ref(1)
const pageSize = ref(5) const pageSize = ref(5)
const total = ref()
const small = ref(false) const small = ref(false)
const background = ref(false) const background = ref(false)
const disabled = ref(false) const disabled = ref(false)
function getListFun(){
getList({
"timerId":null,
"deviceId":null,
"controlContext":null,
"timerStatus":null,
"createStart":startDate.value,
"createEnd": endDate.value,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
total.value = res.total
timingList.value = res.rows
})
}
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
console.log(`${val}`) console.log(`${val}`)
} }
@ -236,5 +290,14 @@ const { queryParams } = toRefs(data);
::v-deep .el-form-item__content{ ::v-deep .el-form-item__content{
//display: flex; //display: flex;
} }
::v-deep .el-input__inner{
color: #f3ffff;
}
::v-deep .el-date-editor .el-range-input{
color: #f3ffff;
}
::v-deep .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default{
background-color: rgba(47,61,138);
}
</style> </style>

@ -5,28 +5,28 @@
<div>pic</div> <div>pic</div>
<div> <div>
<p>当前功率</p> <p>当前功率</p>
<h2>{{data.num}}kW</h2> <h2>{{data.totp}}kW</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>日用电量</p> <p>日用电量</p>
<h2>11kWh</h2> <h2>{{data.eday}}kWh</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>月用电量</p> <p>月用电量</p>
<h2>141kWh</h2> <h2>{{data.emonth}}kWh</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div>pic</div> <div>pic</div>
<div> <div>
<p>累计用电量</p> <p>累计用电量</p>
<h2>1641kWh</h2> <h2>{{data.totwh}}kWh</h2>
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +63,109 @@ export default {
name: "db", name: "db",
setup() { setup() {
let data = reactive({ let data = reactive({
num:666, totp:'',
totwh:'',
eday:'',
emonth:'',
glData:[],
glXz:[
"00:00",
"00:15",
"00:30",
"00:45",
"01:00",
"01:15",
"01:30",
"01:45",
"02:00",
"02:15",
"02:30",
"02:45",
"03:00",
"03:15",
"03:30",
"03:45",
"04:00",
"04:15",
"04:30",
"04:45",
"05:00",
"05:15",
"05:30",
"05:45",
"06:00",
"06:15",
"06:30",
"06:45",
"07:00",
"07:15",
"07:30",
"07:45",
"08:00",
"08:15",
"08:30",
"08:45",
"09:00",
"09:15",
"09:30",
"09:45",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00",
"11:15",
"11:30",
"11:45",
"12:00",
"12:15",
"12:30",
"12:45",
"13:00",
"13:15",
"13:30",
"13:45",
"14:00",
"14:15",
"14:30",
"14:45",
"15:00",
"15:15",
"15:30",
"15:45",
"16:00",
"16:15",
"16:30",
"16:45",
"17:00",
"17:15",
"17:30",
"17:45",
"18:00",
"18:15",
"18:30",
"18:45",
"19:00",
"19:15",
"19:30",
"19:45",
"20:00",
"20:15",
"20:30",
"20:45",
"21:00",
"21:15",
"21:30",
"21:45",
"22:00",
"22:15",
"22:30",
"22:45",
"23:00",
"23:15",
"23:30",
"23:45"
],
fdlData:'', fdlData:'',
fdlXz:'', fdlXz:'',
}) })
@ -79,6 +181,136 @@ export default {
onMounted(() => {//element,onMountedHook onMounted(() => {//element,onMountedHook
getData(13).then((res)=>{ getData(13).then((res)=>{
console.log(res) console.log(res)
data.totp=res.data.totp
data.totwh=res.data.totwh
data.eday=res.data.eday
data.emonth=res.data.emonth
delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate
delete res.data.todayUsePowers.userId
let arr = Object.values(res.data.todayUsePowers)
data.glData=arr
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: data.totp
}
]
}
]
});
window.onresize = function () {//
myChart1.resize();
};
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data:data.glXz,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: data.glData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//
myChart2.resize();
};
}) })
getZdb(13).then((res)=>{ getZdb(13).then((res)=>{
console.log(res) console.log(res)
@ -133,7 +365,7 @@ export default {
{ {
name: "今日用电量", name: "今日用电量",
type: "bar", type: "bar",
data: [data.fdlData], data: data.fdlData,
itemStyle:{ itemStyle:{
color:'#2F8EE0' color:'#2F8EE0'
}, },
@ -145,126 +377,6 @@ export default {
}; };
}) })
let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
if (myChart1){
myChart1.dispose()
}
myChart1 = echarts.init(document.getElementById("myEcharts1"));
myChart1.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d']
]
}
},
pointer: {
itemStyle: {
color: 'inherit'
}
},
// axisTick: {
// distance: -30,
// length: 8,
// lineStyle: {
// color: '#fff',
// width: 2
// }
// },
// splitLine: {
// distance: -30,
// length: 30,
// lineStyle: {
// color: '#fff',
// width: 4
// }
// },
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 10
},
detail: {
valueAnimation: true,
formatter: '{value} kW',
color: 'inherit'
},
data: [
{
value: 70
}
]
}
]
});
window.onresize = function () {//
myChart1.resize();
};
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
if (myChart2){
myChart2.dispose()
}
myChart2 = echarts.init(document.getElementById("myEcharts2"));
myChart2.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kW",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "当前功率",
type: "line",
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//
myChart2.resize();
};
}) })
return { return {
data data

@ -179,6 +179,44 @@ export default {
"23:30", "23:30",
"23:45" "23:45"
], ],
dayData:[],
dayXz:[],
emonthData:[],
emonthXz:[
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31],
temIn:'',
temOut:'',
time:'',
}) })
@ -197,6 +235,7 @@ export default {
//gl //gl
delete res.data.todayUsePowers.deviceId delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate delete res.data.todayUsePowers.samDate
delete res.data.todayUsePowers.userId
let arr = Object.values(res.data.todayUsePowers) let arr = Object.values(res.data.todayUsePowers)
data.glData=arr data.glData=arr
let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3")); let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
@ -254,188 +293,211 @@ export default {
}) })
getXcgl(2).then((res)=>{ getXcgl(2).then((res)=>{
console.log(res) console.log(res)
}) //
let arr = []
let brr = []
for(let i in res.xrglqhour){
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts")); arr.push(res.xrglqhour[i].useElectric)
if (myChart){ brr.push(res.xrglqhour[i].hour)
myChart.dispose() }
} data.dayData=arr
myChart = echarts.init(document.getElementById("myEcharts")); data.dayXz=brr
let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2")); if (myChart){
if (myChart2){ myChart.dispose()
myChart2.dispose() }
} myChart = echarts.init(document.getElementById("myEcharts"));
myChart2 = echarts.init(document.getElementById("myEcharts2")); myChart.setOption({
title: {},
tooltip: {},
textStyle:{
let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4")); color:'#BEC3DA'
if (myChart4){
myChart4.dispose()
}
myChart4 = echarts.init(document.getElementById("myEcharts4"));
//
myChart.setOption({
title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
axisLine: { xAxis: {
show: true, data: data.dayXz,
lineStyle:{ axisLine:{
type:'dashed', lineStyle:{
color:'#BEC3DA' color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "kWh",
name: "日用电量", splitLine:{
type: "bar", show:true,
data: [5, 20, 36, 10, 10, 20], lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
}, },
], series: [
}); {
window.onresize = function () {// name: "日用电量",
myChart.resize(); type: "bar",
}; data: data.dayData,
myChart2.setOption({ itemStyle:{
title: {}, color:'#2F8EE0'
tooltip: {}, },
textStyle:{ },
color:'#BEC3DA' ],
}, });
xAxis: { window.onresize = function () {//
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], myChart.resize();
axisLine:{ };
lineStyle:{
color:'#BEC3DA', //
type:'dashed' let crr = []
} for(let i in res.xrglqday){
} crr.push(res.xrglqday[i].useElectric)
}, }
yAxis: { data.emonthData=crr
type: 'value', let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
name: "kWh", if (myChart2){
splitLine:{ myChart2.dispose()
show:true, }
lineStyle:{ myChart2 = echarts.init(document.getElementById("myEcharts2"));
type:'dashed',
color:'#BEC3DA' myChart2.setOption({
} title: {},
tooltip: {},
textStyle:{
color:'#BEC3DA'
}, },
axisLine: { xAxis: {
show: true, data: data.emonthXz,
lineStyle:{ axisLine:{
type:'dashed', lineStyle:{
color:'#BEC3DA' color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "kWh",
name: "月用电量", splitLine:{
type: "bar", show:true,
data: [5, 20, 36, 10, 10, 20], lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
}, },
}, },
], series: [
}); {
window.onresize = function () {// name: "月用电量",
myChart2.resize(); type: "bar",
}; data: data.emonthData,
itemStyle:{
color:'#2F8EE0'
},
},
],
});
window.onresize = function () {//
myChart2.resize();
};
myChart4.setOption({ //
title: {}, data.time=res.times
tooltip: {}, data.temIn=res.tempIn
legend: { data.temOut=res.tempOut
data: ['进水', '出水'],
textStyle:{ let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
color:'#BEC3DA' if (myChart4){
} myChart4.dispose()
}, }
textStyle:{ myChart4 = echarts.init(document.getElementById("myEcharts4"));
color:'#BEC3DA' myChart4.setOption({
}, title: {},
xAxis: { tooltip: {},
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"], legend: {
axisLine:{ data: ['进水', '出水'],
lineStyle:{ textStyle:{
color:'#BEC3DA',
type:'dashed'
}
}
},
yAxis: {
type: 'value',
name: "℃",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA' color:'#BEC3DA'
} }
}, },
axisLine: { textStyle:{
show: true, color:'#BEC3DA'
lineStyle:{ },
type:'dashed', xAxis: {
color:'#BEC3DA' data: data.time,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
} }
}, },
}, yAxis: {
series: [ type: 'value',
{ name: "℃",
name: '进水', splitLine:{
type: 'line', show:true,
stack: 'Total', lineStyle:{
itemStyle:{ type:'dashed',
color:'#2F8EE0' color:'#BEC3DA'
}
}, },
data: [120, 132, 101, 134, 90, 230, 210] axisLine: {
}, show: true,
{ lineStyle:{
name: '出水', type:'dashed',
type: 'line', color:'#BEC3DA'
stack: 'Total', }
itemStyle:{
color:'#2F8EE0'
}, },
data: [220, 182, 191, 234, 290, 330, 310]
}, },
], series: [
}); {
window.onresize = function () {// name: '进水',
myChart4.resize(); type: 'line',
}; stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: data.temIn
},
{
name: '出水',
type: 'line',
stack: 'Total',
itemStyle:{
color:'#2F8EE0'
},
data: data.temOut
},
],
});
window.onresize = function () {//
myChart4.resize();
};
})
}); });
return{ return{
data data

@ -10,6 +10,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>

Loading…
Cancel
Save