|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <div class="faultDiagnose">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="nav" v-for="(item, index) in topList" :key="index">
|
|
|
+ <div class="pic" v-if="item.imgSrc">
|
|
|
+ <img :src="imgUrl" alt="" />
|
|
|
+ <SvgIcon class="icon-style" :name="item.icon" style=" position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%); width: 60px; height: 38px" />
|
|
|
+ </div>
|
|
|
+ <div class="content" v-if="item.label && item.value">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span>{{ item.value }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="text" v-if="item.text">{{ item.text }}</div> -->
|
|
|
+ <!-- <div class="percent" v-if="item.list.length != 0">
|
|
|
+ <div class="title">{{ item.label }}</div>
|
|
|
+ <div class="value">
|
|
|
+ <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
|
|
|
+ <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
|
|
|
+ <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ `${items.value}%`
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-box">
|
|
|
+ <div class="left-area-box">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">历史数据图表</div>
|
|
|
+ </div>
|
|
|
+ <a-form :model="formState" layout="inline" :label-col="{ style: { width: '80px' } }"
|
|
|
+ :wrapper-col="{ span: 8 }">
|
|
|
+ <a-form-item label="开始时间:">
|
|
|
+ <a-date-picker v-model:value="formState.ttime_begin" style="width:220px" show-time
|
|
|
+ valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="结束时间:">
|
|
|
+ <a-date-picker v-model:value="formState.ttime_end" style="width:220px" show-time
|
|
|
+ valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="">
|
|
|
+ <a-button type="primary" @click="getSearchHis">查询</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <div class="echart-area-box"></div>
|
|
|
+ </div>
|
|
|
+ <div class="right-area-box">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">瓦斯抽采泵信息</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, watch } from 'vue';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import imgUrl from '/@/assets/images/fire/pie.png';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+let props = defineProps({
|
|
|
+ timeData: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ //顶部区域数据
|
|
|
+ topData:{
|
|
|
+ type:Array,
|
|
|
+ default:()=>{
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+let formState = reactive({
|
|
|
+ ttime_begin: '',
|
|
|
+ ttime_end: ''
|
|
|
+})
|
|
|
+let $emit = defineEmits(['getSearchHis'])
|
|
|
+const topList = ref<any[]>()
|
|
|
+
|
|
|
+
|
|
|
+const getSearchHis = () => {
|
|
|
+ console.log(formState, '000===')
|
|
|
+ $emit('getSearchHis', formState)
|
|
|
+}
|
|
|
+
|
|
|
+watch(() => props.timeData, (newV, oldV) => {
|
|
|
+ console.log(newV, 'time---')
|
|
|
+ if (newV) {
|
|
|
+ let index = newV.indexOf(' ')
|
|
|
+ let specificTime = dayjs(`${newV.substring(0, index)}T${newV.substring(index + 1)}`)
|
|
|
+ console.log(specificTime, 'specificTime')
|
|
|
+ formState.ttime_begin = specificTime.subtract(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ console.log('前半个小时:', formState.ttime_begin);
|
|
|
+ formState.ttime_end = specificTime.add(30, 'minute').format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ console.log('后半个小时:', formState.ttime_end);
|
|
|
+ }
|
|
|
+}, {
|
|
|
+ immediate: true
|
|
|
+})
|
|
|
+watch(()=>props.topData,(newT,oldT)=>{
|
|
|
+if(newT){
|
|
|
+ topList.value=newT
|
|
|
+}
|
|
|
+},{
|
|
|
+ immediate:true
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '/@/design/theme.less';
|
|
|
+
|
|
|
+@{theme-deepblue} {
|
|
|
+ .faultDiagnose {
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
|
|
|
+ --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.faultDiagnose {
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --image-max: url('/@/assets/images/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/fire/pj.svg');
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --image-14174: url('/@/assets/images/fire/14174.png');
|
|
|
+ --image-contetn: url('/@/assets/images/fire/contetn.png');
|
|
|
+ --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ // &:nth-child(1) {
|
|
|
+ // flex: 1;
|
|
|
+ // height: 100%;
|
|
|
+ // border-right: 2px solid;
|
|
|
+ // border-image: var(--border-image-2) 1 1 1;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &:nth-child(2) {
|
|
|
+ // flex: 1;
|
|
|
+ // height: 100%;
|
|
|
+ // border-right: 2px solid;
|
|
|
+ // border-image: var(--border-image-2) 1 1 1;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &:nth-child(3) {
|
|
|
+ // flex: 1;
|
|
|
+ // height: 100%;
|
|
|
+ // border-right: 2px solid;
|
|
|
+ // border-image: var(--border-image-2) 1 1 1;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &:nth-child(4) {
|
|
|
+ // flex: 0.6;
|
|
|
+ // color: #b3b8cc;
|
|
|
+ // font-size: 16px;
|
|
|
+ // height: 100%;
|
|
|
+ // border-right: 2px solid;
|
|
|
+ // border-image: var(--border-image-2) 1 1 1;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &:nth-child(5) {
|
|
|
+ // flex: 1.4;
|
|
|
+ // height: 100%;
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ position:relative;
|
|
|
+ width: 30%;
|
|
|
+ height: 82%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 82%;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .nav:nth-child(1) .pic {
|
|
|
+ // background: var(--image-max) no-repeat center;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .nav:nth-child(2) .pic {
|
|
|
+ // background: var(--image-min) no-repeat center;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .nav:nth-child(3) .pic {
|
|
|
+ // background: var(--image-pj) no-repeat center;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-t {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-t {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: calc(100% - 130px);
|
|
|
+
|
|
|
+ .left-area-box {
|
|
|
+ width: calc(50% - 5px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .echart-area-box {
|
|
|
+ height: calc(100% - 75px)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-area-box {
|
|
|
+ width: calc(50% - 5px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-form-item-label>label {
|
|
|
+ color: #ccc
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-picker-input > input) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-picker) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-picker-suffix) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|