|
@@ -3,47 +3,14 @@
|
|
|
<div class="overview">
|
|
|
<div class="top">
|
|
|
<span>实时概览</span>
|
|
|
- <img src="@/assets/images/overview-header-bg.png" alt="">
|
|
|
+ <img :src="line" alt="">
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="top">
|
|
|
- <div class="item" v-for="(item,index) in overviewData" :key="index">
|
|
|
- <p>{{ item.name }}</p>
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <img :src="item.img" alt="">
|
|
|
- </div>
|
|
|
- <p :style="{ color: item.value === 'ON'? '#e00202' : '#08b762' }">{{ item.value }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <status :data="statusData" />
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
- <div class="left">
|
|
|
- <div class="item item1" v-for="(item,index) in quota[0]" :key="index">
|
|
|
- <div class="top">
|
|
|
- <img :src="item.img" alt="">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="list" v-for="(item2,index2) in item.array" :key="index2">
|
|
|
- <p>{{ item2.name }}</p>
|
|
|
- <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item2" v-for="(item,index) in quota[1]" :key="index">
|
|
|
- <div class="top">
|
|
|
- <img :src="item.img" alt="">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div :class="['list',item.num]" v-for="(item2,index2) in item.array" :key="index2" >
|
|
|
- <p>{{ item2.name }}</p>
|
|
|
- <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <realTime :data="realTimeData" />
|
|
|
<div class="right">
|
|
|
<div class="title" style="margin:10px 0 4px;font-weight: 600;">
|
|
|
历史数据
|
|
@@ -92,33 +59,10 @@
|
|
|
<div class="useElectricity">
|
|
|
<div class="top">
|
|
|
<span>用电</span>
|
|
|
- <img src="@/assets/images/overview-header-bg.png" alt="">
|
|
|
+ <img :src="line" alt="">
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <div class="left">
|
|
|
- <div v-for="(item,index) in electronData" :key="index">
|
|
|
- <div class="item item1">
|
|
|
- <div>
|
|
|
- <img :src="item.img" alt="">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div>{{ item.value }}</div>
|
|
|
- <div>{{ item.name }}<span>{{ item.unit }}</span></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item item2">
|
|
|
- <div>
|
|
|
- <div>{{ item.synchronism }}</div>
|
|
|
- <div>{{ item.synchronisNum }}</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div>环比</div>
|
|
|
- <div>{{ item.proportion }} <span>%</span><span></span></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <useElectricity />
|
|
|
<div class="right">
|
|
|
<div>
|
|
|
<span>当月分时电量</span>
|
|
@@ -137,90 +81,22 @@
|
|
|
/*----------------------------------组件引入-----------------------------------*/
|
|
|
import chart from './chart'
|
|
|
import pie from './pie'
|
|
|
+import status from './status'
|
|
|
+import realTime from './realTime'
|
|
|
+import useElectricity from './useElectricity'
|
|
|
/*----------------------------------接口引入-----------------------------------*/
|
|
|
-import { ref } from 'vue'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
/*----------------------------------store引入----------------------------------*/
|
|
|
/*----------------------------------公共方法引入------------------------------*/
|
|
|
import dayjs from 'dayjs'
|
|
|
+import axios from 'axios'
|
|
|
+/*----------------------------------引用库-------------------------------------*/
|
|
|
/*----------------------------------常量声明-----------------------------------*/
|
|
|
-import running from '@/assets/images/running.png'
|
|
|
-import a from '@/assets/images/a.png'
|
|
|
-import b from '@/assets/images/b.png'
|
|
|
-import c from '@/assets/images/c.png'
|
|
|
-import demand from '@/assets/images/demand.png'
|
|
|
-import I from '@/assets/images/I.png'
|
|
|
-import power from '@/assets/images/power.png'
|
|
|
-import powerqulity from '@/assets/images/powerqulity.png'
|
|
|
-import temperature from '@/assets/images/temperature.png'
|
|
|
-import UA from '@/assets/images/UA.png'
|
|
|
import UAB from '@/assets/images/UAB.png'
|
|
|
-import dian from '@/assets/images/dian.png'
|
|
|
+import line from '@/assets/images/overview-header-bg.png'
|
|
|
/*----------------------------------变量声明-----------------------------------*/
|
|
|
-const overviewData = ref([
|
|
|
- { name: '回路带电/停电', value: 'ON' , img: running },
|
|
|
- { name: '环境温度', value: 'OFF' , img: temperature },
|
|
|
- { name: '剩余电流超限', value: 'ON' , img: a },
|
|
|
- { name: '线路电气故障总', value: 'ON' , img: b },
|
|
|
- { name: '电压缺相', value: 'ON' , img: c },
|
|
|
- { name: '线路开关状态', value: 'ON' , img: a },
|
|
|
- { name: '电压越上限告警', value: 'ON' , img: b },
|
|
|
- { name: '电压越下限告警', value: 'ON' , img: c },
|
|
|
-])
|
|
|
-const quota = ref([
|
|
|
- [
|
|
|
- { title: '电流', img: I,
|
|
|
- array:[
|
|
|
- { name: 'IA',value: '2.81',unit:'A' },
|
|
|
- { name: 'IB',value: '2.87',unit:'A' },
|
|
|
- { name: 'IC',value: '2.52',unit:'A' },
|
|
|
- ]
|
|
|
- },
|
|
|
- { title: '相电压', img: UA,
|
|
|
- array:[
|
|
|
- { name: 'UA',value: '5.92',unit:'kW' },
|
|
|
- { name: 'UB',value: '2.91',unit:'kW' },
|
|
|
- { name: 'UC',value: '2.93',unit:'kW' },
|
|
|
- ]
|
|
|
- },
|
|
|
- { title: '线电压', img: UAB,
|
|
|
- array:[
|
|
|
- { name: 'UAB',value: '10224.5',unit:'V' },
|
|
|
- { name: 'UBC',value: '10250',unit:'V' },
|
|
|
- { name: 'UCA',value: '10268',unit:'V' },
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- [
|
|
|
- { title: '功率', img: power,num:"two",
|
|
|
- array:[
|
|
|
- { name: '有功功率',value: '36.3',unit:'kW' },
|
|
|
- { name: '无功功率',value: '-23.7',unit:'kW' },
|
|
|
- ]
|
|
|
- },
|
|
|
- { title: '需量', img: demand, num:"three",
|
|
|
- array:[
|
|
|
- { name: '当前需量',value: '37.8',unit:'kV' },
|
|
|
- { name: '当月最大需量',value: '21265.7',unit:'kV' },
|
|
|
- { name: '发生时间',value: '2025-05-01 12:00:00',unit:'' },
|
|
|
- ]
|
|
|
- },
|
|
|
- { title: '电能质量', img: powerqulity, num:"three2",
|
|
|
- array:[
|
|
|
- { name: '当月功率因数',value: '0.99',unit:'7月1日 起' },
|
|
|
- { name: '频率',value: '50.03',unit:'Hz' },
|
|
|
- { name: '实时功率因数',value: '0.8276',unit:'' },
|
|
|
- ]
|
|
|
- },
|
|
|
- { title: '电度', img: dian, num:"four",
|
|
|
- array:[
|
|
|
- { name: '正向有功',value: '182153.96',unit:'kWh', },
|
|
|
- { name: '反向有功',value: '-3',unit:'kWh' },
|
|
|
- { name: '正向无功',value: '120',unit:'kvarh' },
|
|
|
- { name: '反向无功',value: '28839',unit:'kvarh' },
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
-])
|
|
|
+const statusData = ref({})
|
|
|
+const realTimeData = ref([])
|
|
|
//实时概览
|
|
|
const activeType = ref('1')
|
|
|
const activeList = ref([
|
|
@@ -282,6 +158,63 @@ function disabledDate(time) {
|
|
|
function dateSwitch(type){
|
|
|
dateType.value = type
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取实时概览状态数据
|
|
|
+ */
|
|
|
+function getStatusData(){
|
|
|
+ axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/livePreviewStatus',{
|
|
|
+ params:{
|
|
|
+ apipost_id:"300938b339f774",
|
|
|
+ id:1,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ statusData.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 获取实时数据
|
|
|
+ */
|
|
|
+function getRealTimeData(){
|
|
|
+ axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/livePreviewData',{
|
|
|
+ params:{
|
|
|
+ apipost_id:"300f7913b9f8a4",
|
|
|
+ id:1,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ realTimeData.value = res.data.data
|
|
|
+ realTimeData.value.currentMonth = dayjs().format('M')
|
|
|
+ })
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 获取用电数据
|
|
|
+ */
|
|
|
+function getUseElectricityData(val){
|
|
|
+ axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/powerLevel',{
|
|
|
+ params:{
|
|
|
+ apipost_id:"301ee3ee39fc85",
|
|
|
+ id:1,
|
|
|
+ startTime:dayjs().subtract(1, 'day').format('YYYY-MM') + "-01 00:00:00",
|
|
|
+ endTime:dayjs().endOf('month').format('YYYY-MM-DD') + " 23:59:59",
|
|
|
+ type:val
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
+ if(val == 1){
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function init(){
|
|
|
+ getStatusData()
|
|
|
+ getRealTimeData()
|
|
|
+ getUseElectricityData(1)
|
|
|
+ getUseElectricityData(2)
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ init()
|
|
|
+})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.container{
|
|
@@ -300,109 +233,7 @@ function dateSwitch(type){
|
|
|
}
|
|
|
.content{
|
|
|
margin-top:4px;
|
|
|
- .top{
|
|
|
- .item{
|
|
|
- background: #fafafa;
|
|
|
- background-image: radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0),radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0);
|
|
|
- width:calc(12.5% - 10px );
|
|
|
- border-radius: 5px;
|
|
|
- padding:6px 10px 12px 10px;
|
|
|
- display: inline-block;
|
|
|
- margin-right:10px;
|
|
|
- color:rgba(0,0,0,0.65);
|
|
|
- >div{
|
|
|
- height:34px;
|
|
|
- line-height: 34px;
|
|
|
- margin-top:-6px;
|
|
|
- >div,>p{
|
|
|
- width:50%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
- img{
|
|
|
- width:34px;
|
|
|
- margin:0 calc(50% - 18px);
|
|
|
- }
|
|
|
- p{
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item:nth-child(8){
|
|
|
- margin-right:0px;
|
|
|
- }
|
|
|
- }
|
|
|
.bottom{
|
|
|
- .left{
|
|
|
- width:40%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- .item{
|
|
|
- margin:10px 10px 0 0;
|
|
|
- vertical-align: top;
|
|
|
- display: inline-block;
|
|
|
- color:rgba(0,0,0,0.65);
|
|
|
- .top{
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
- vertical-align: top;
|
|
|
- margin:0px 6px -4px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .content{
|
|
|
- border-radius: 0 5px 5px 0;
|
|
|
- border-left:2px solid #08b762;
|
|
|
- .list{
|
|
|
- padding:1px 10px;
|
|
|
- background: #fafafa;
|
|
|
-
|
|
|
- >p{
|
|
|
- margin:0;
|
|
|
- padding:2px 0;
|
|
|
- display: inline-block;
|
|
|
- border-bottom:2px solid #fff;
|
|
|
- }
|
|
|
- >p:nth-child(1){
|
|
|
- width:45%;
|
|
|
- }
|
|
|
- >p:nth-child(2){
|
|
|
- width:55%;
|
|
|
- text-align: right;
|
|
|
- span{
|
|
|
- font-size: 10px;
|
|
|
- margin-left:4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list:last-child{
|
|
|
- p{
|
|
|
- border-bottom:none;
|
|
|
- }
|
|
|
- }
|
|
|
- .two{
|
|
|
- p{
|
|
|
- height:42px !important;
|
|
|
- line-height: 42px;
|
|
|
- }
|
|
|
- }
|
|
|
- .three2{
|
|
|
- p{
|
|
|
- height:37.3px !important;
|
|
|
- line-height: 37.3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item1{
|
|
|
- width:calc(33.33% - 10px);
|
|
|
- }
|
|
|
- .item2{
|
|
|
- width:calc(50% - 10px);
|
|
|
- }
|
|
|
- }
|
|
|
.right{
|
|
|
width:calc(60% - 10px);
|
|
|
display: inline-block;
|
|
@@ -464,89 +295,7 @@ function dateSwitch(type){
|
|
|
}
|
|
|
}
|
|
|
.content{
|
|
|
- .left{
|
|
|
- width:50%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- >div{
|
|
|
- width:50%;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .item{
|
|
|
- width:calc(50% - 5px);
|
|
|
- padding:45px 10px;
|
|
|
- margin-right:5px;
|
|
|
- margin-top:4px;
|
|
|
- display: inline-block;
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
- .item:nth-child(4n){
|
|
|
- margin-right:0;
|
|
|
- }
|
|
|
- .item1{
|
|
|
- >div{
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- color:#000;
|
|
|
- }
|
|
|
- >div:nth-child(1){
|
|
|
- width:35%;
|
|
|
- img{
|
|
|
- width:25px;
|
|
|
- margin-left:10px;
|
|
|
- }
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- >div:nth-child(2){
|
|
|
- width:65%;
|
|
|
- div:nth-child(1){
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- div:nth-child(2){
|
|
|
- font-size: 14px;
|
|
|
- margin-top:6px;
|
|
|
- span{
|
|
|
- font-size: 10px;
|
|
|
- margin-left:4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item2{
|
|
|
- >div{
|
|
|
- width:50%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- color:rgba(0,0,0,0.65);
|
|
|
- padding:0 10px;
|
|
|
- >div:nth-child(2){
|
|
|
- margin-top:10px;
|
|
|
- span:nth-child(1){
|
|
|
- font-size: 10px;
|
|
|
- text-align: right;
|
|
|
- margin-right:6px;
|
|
|
- }
|
|
|
- span:nth-child(2)::after{
|
|
|
- display: inline-block;
|
|
|
- content: ""; /* 伪元素不包含内容 */
|
|
|
- width: 0; /* 必须设置为0,因为我们不显示宽度 */
|
|
|
- height: 0; /* 必须设置为0,因为我们不显示高度 */
|
|
|
- margin-left: -5px; /* 根据需要调整,这里是让箭头中心对齐 */
|
|
|
- border-left: 5px solid transparent; /* 左边框透明 */
|
|
|
- border-right: 5px solid transparent; /* 右边框透明 */
|
|
|
- border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- >div:nth-child(2){
|
|
|
- text-align: right;
|
|
|
- >div:nth-child(2){
|
|
|
- color:#08b762;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+
|
|
|
.right{
|
|
|
width:calc(50% - 10px);
|
|
|
margin-top:.5px;
|