suojin
/
jiahe_device
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接大屏接口

Browse Source
main
jinna 2 years ago
parent f680718476
commit 2de9a59a1e
5 changed files with 154 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      src/api/energySources/energySources.js
  2. 112
      src/views/energySources/component/all.vue
  3. 7
      src/views/energySources/component/header.vue
  4. 27
      src/views/energySources/component/load.vue
  5. 2
      src/views/energySources/component/tit.vue

36
src/api/energySources/energySources.js
Unescape View File

@ -0,0 +1,36 @@
import request from "@/router/axios";
// 总量分析
export const getTotalElectricity = (query) => {
return request({
url: "/api/blade-lims/largeScreen/getTotalElectricity",
method: "get",
params: query,
});
};
// 连续两个月对比
export const getMonthElectricity = (query) => {
return request({
url: "/api/blade-lims/largeScreen/getMonthElectricity",
method: "get",
params: query,
});
};
// 负荷分析-日分析
export const getDayElectricity = (query) => {
return request({
url: "/api/blade-lims/largeScreen/getDayElectricity",
method: "get",
params: query,
});
};
export const getWeekElectricity = (query) => {
return request({
url: "/api/blade-lims/largeScreen/getWeekElectricity",
method: "get",
params: query,
});
};

112
src/views/energySources/component/all.vue
Unescape View File

@ -10,8 +10,8 @@
</template>
<div class="tit-r">
<span style="color: #fff;">选择月份：</span>
<el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月"
style="width: 1.2rem;margin-right: 0.26rem;">
<el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth"
style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM">
</el-date-picker>
单位：kw·h
</div>
@ -21,7 +21,7 @@
<div class="card">
<div class="card-tit">{{ $moment().format('YYYY') }}年</div>
<div class="card-num">
<div class="card-num-item" v-for="(item, index) in num" :key="index">
<div class="card-num-item" v-for="(item, index) in yearNum" :key="index">
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div style="color: #CADEFF;">
@ -35,7 +35,7 @@
<div class="card">
<div class="card-tit">{{ $moment().format('M') }}月</div>
<div class="card-num">
<div class="card-num-item" v-for="(item, index) in num" :key="index">
<div class="card-num-item" v-for="(item, index) in monthNum" :key="index">
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div style="color: #00FFC6;">
@ -49,7 +49,7 @@
<div class="card">
<div class="card-tit">昨日</div>
<div class="card-num">
<div class="card-num-item" v-for="(item, index) in num" :key="index">
<div class="card-num-item" v-for="(item, index) in yesterdayNum" :key="index">
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div style="color: #E0B42F;">
@ -63,7 +63,7 @@
<div class="card">
<div class="card-tit">今日</div>
<div class="card-num">
<div class="card-num-item" v-for="(item, index) in num" :key="index">
<div class="card-num-item" v-for="(item, index) in todayNum" :key="index">
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div :style="item === '.' ? 'background: transparent' : ''"></div>
<div style="color: #00FFFC;">
@ -83,28 +83,70 @@
<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import {getTotalElectricity,getMonthElectricity} from "@/api/energySources/energySources"
export default {
data() {
return {
num: 0
num: 0,
yearNum:0,
monthNum:0,
yesterdayNum:0,
todayNum:0,
selectMonth:'',
currentMonthData:[120, 200, 150, 80, 70, 110, 130],
lastMonthData:[150, 120, 180, 60, 40, 130, 150]
};
},
components: {
tit
},
created() {
this.selectMonth = this.$moment().format('YYYY-MM')
this.$nextTick(() => {
this.echartsInit()
this.getTotal()
this.getTrend()
})
let nums = 1223.45;
this.num = nums.toString().split('')
// let nums = 1223.45;
// this.num = nums.toString().split('')
},
computed:{
...mapGetters(["userInfo", "permission"]),
},
methods: {
getTotal(){
getTotalElectricity({manufacturerBrand:this.userInfo.dept_name}).then(res =>{
let data = res.data.data
this.yearNum = data.currentYear.toString().split('')
this.monthNum = data.currentMonth.toString().split('')
this.yesterdayNum = data.yesterday.toString().split('')
this.todayNum = data.today.toString().split('')
})
},
getTrend(){
this.currentMonthData = [];
this.lastMonthData = []
getMonthElectricity({manufacturerBrand:this.userInfo.dept_name,currentMonth:this.selectMonth}).then(res =>{
let currData = res.data.data.currentMonth
let lastData = res.data.data.lastMonth
Object.keys(currData).forEach((key) => {
this.currentMonthData.push(currData[key])
});
Object.keys(lastData).forEach((key) => {
this.lastMonthData.push(lastData[key])
});
this.$nextTick(() =>{
this.echartsInit()
})
})
},
changeMonth(){
this.getTrend()
},
echartsInit() {
const chartDom = document.getElementById('mainAll');
const myChart = this.$echarts.init(chartDom);
const currentMonthDays = this.$moment().daysInMonth()
const currentMonthDays = this.$moment(this.selectMonth).daysInMonth()
const xdata = Array(currentMonthDays).fill().map((_, i) => i + 1)
const option = {
// title: {
@ -116,16 +158,16 @@ export default {
bottom: "0",
containLabel: true,
},
// legend: {
// data: ['委托', '监督', '仲裁', '门诊'],
// right: 0,
// top: 12,
// textStyle: {
// color: "#fff"
// },
// itemWidth: 10,
// itemHeight: 4,
// },
legend: {
data: ['本月', '上月'],
// right: 0,
top: 12,
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 4,
},
xAxis: {
type: "category",
data: xdata,
@ -178,10 +220,11 @@ export default {
},
series: [
{
name: "委托",
name: "本月",
type: "bar",
barWidth: "10",
data: [120, 200, 150, 80, 70, 110, 130],
data: this.currentMonthData,
// data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: {
normal: {
color: "#0084FF",
@ -197,6 +240,27 @@ export default {
},
},
},
{
name: "上月",
type: "bar",
barWidth: "10",
data: this.lastMonthData,
// data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: {
normal: {
color: "#10efbd",
// label: {
// show: true,
// position: "top",
// textStyle: {
// //数值样式
// color: "#0084FF",
// fontSize: 14,
// },
// },
},
},
},
],
}
myChart.setOption(option);

7
src/views/energySources/component/header.vue
Unescape View File

@ -3,7 +3,7 @@
<div class="box">
<div>
{{ $moment().format('HH:mm:ss') }}
{{ time }}
</div>
<div>
{{ $moment().format('yyyy/MM/DD') }}
@ -27,10 +27,13 @@
export default {
data() {
return {
time:''
};
},
created() {
setInterval(() =>{
this.time = this.$moment().format('HH:mm:ss')
},1000)
},
methods: {}
};

27
src/views/energySources/component/load.vue
Unescape View File

@ -3,8 +3,8 @@
<tit :title="'设备负载监控'">
<div class="tit-r">
<span style="color: #fff;">选择月份：</span>
<el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月" :prefix-icon="null"
style="width: 1.2rem;margin-right: 0.26rem;">
<el-date-picker size="mini" v-model="selectDate" type="date" placeholder="选择月" :prefix-icon="null"
style="width: 1.3rem;margin-right: 0.26rem;" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
</el-date-picker>
单位：kw·h
</div>
@ -21,21 +21,42 @@
<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import {getDayElectricity,getWeekElectricity} from "@/api/energySources/energySources"
export default {
data() {
return {
radio: 3
radio: 3,
selectDate:'',
};
},
components: {
tit
},
created() {
this.selectDate = this.$moment().format('YYYY-MM-DD')
this.$nextTick(() => {
this.getDayData()
this.getWeekData()
this.echartsInit()
})
},
computed:{
...mapGetters(["userInfo", "permission"]),
},
methods: {
// 获取日分析
getDayData(){
getDayElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
console.log('res ======>',res)
})
},
// 获取月分析
getWeekData(){
getWeekElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
console.log('res1 ====>',res)
})
},
echartsInit() {
const chartDom = document.getElementById('mainLoad');
const myChart = this.$echarts.init(chartDom);

2
src/views/energySources/component/tit.vue
Unescape View File

@ -11,7 +11,6 @@
</template>
<script>
export default {
data() {
return {
@ -38,6 +37,7 @@ export default {
position: absolute;
top: 0.14rem;
left: 0.6rem;
z-index: 10;
box-sizing: border-box;
// margin: 0.14rem 0 0 0.38rem;
width: calc(100% - 0.6rem - 0.22rem);

Write Preview
Loading…
Cancel
Save