|
@@ -19,7 +19,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey" @change="tabChange">
|
|
<a-tabs v-model:activeKey="activeKey" @change="tabChange">
|
|
|
- <a-tab-pane key="1" tab="瞬时混量">
|
|
|
|
|
|
|
+ <a-tab-pane v-if="activeFlag == 'ccsj'" key="1" tab="瞬时混量">
|
|
|
<a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
<a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
|
:pagination="false">
|
|
:pagination="false">
|
|
|
<template #action="{ record }">
|
|
<template #action="{ record }">
|
|
@@ -27,7 +27,31 @@
|
|
|
</template>
|
|
</template>
|
|
|
</a-table>
|
|
</a-table>
|
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="累计混量">
|
|
|
|
|
|
|
+ <a-tab-pane v-if="activeFlag == 'ccsj'" key="2" tab="累计混量">
|
|
|
|
|
+ <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
|
|
|
+ :pagination="false">
|
|
|
|
|
+ <template #action="{ record }">
|
|
|
|
|
+ <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </a-table>
|
|
|
|
|
+ </a-tab-pane>
|
|
|
|
|
+ <a-tab-pane v-if="activeFlag == 'xgpj'" key="3" tab="抽采率">
|
|
|
|
|
+ <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
|
|
|
+ :pagination="false">
|
|
|
|
|
+ <template #action="{ record }">
|
|
|
|
|
+ <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </a-table>
|
|
|
|
|
+ </a-tab-pane>
|
|
|
|
|
+ <a-tab-pane v-if="activeFlag == 'xgpj'" key="4" tab="残余瓦斯含量">
|
|
|
|
|
+ <a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
|
|
|
+ :pagination="false">
|
|
|
|
|
+ <template #action="{ record }">
|
|
|
|
|
+ <!-- <a class="table-action-link" @click="handleSpDetail(record)">审批详情</a> -->
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </a-table>
|
|
|
|
|
+ </a-tab-pane>
|
|
|
|
|
+ <a-tab-pane v-if="activeFlag == 'xgpj'" key="5" tab="瓦斯含量降低速率">
|
|
|
<a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
<a-table size="small" :dataSource="dataSource" :columns="tableColumn" :scroll="{ y: 200 }"
|
|
|
:pagination="false">
|
|
:pagination="false">
|
|
|
<template #action="{ record }">
|
|
<template #action="{ record }">
|
|
@@ -42,7 +66,7 @@
|
|
|
<div class="curve-content-item" v-for="(item, index) in listData" :key="index">
|
|
<div class="curve-content-item" v-for="(item, index) in listData" :key="index">
|
|
|
<div class="content-item-title">{{ item.label }}</div>
|
|
<div class="content-item-title">{{ item.label }}</div>
|
|
|
<div class="content-echart-box">
|
|
<div class="content-echart-box">
|
|
|
- <echartLineDate :ecahrtData="item" :echartOption="ccHlEchartOption"></echartLineDate>
|
|
|
|
|
|
|
+ <echartLineDate :ecahrtData="item" :echartOption="EchartOption"></echartLineDate>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -50,23 +74,41 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, reactive, ref } from 'vue'
|
|
|
|
|
|
|
+import { computed, onMounted, reactive, ref } from 'vue'
|
|
|
import echartLineDate from './echartLineDate.vue'
|
|
import echartLineDate from './echartLineDate.vue'
|
|
|
-import { tableColumnSshl, tableColumnLjhl } from './gasInject.data'
|
|
|
|
|
-import { ccHlEchartOption, } from './gasInject.data'
|
|
|
|
|
|
|
+import { tableColumnSshl, tableColumnLjhl, tableColumnCcl, tableColumnWshl, tableColumnJdsl } from './gasInject.data'
|
|
|
|
|
+import { ccHlEchartOption,ccLEchartOption,wshLEchartOption,jdsLEchartOption } from './gasInject.data'
|
|
|
import { listdays } from './gasInject.api'
|
|
import { listdays } from './gasInject.api'
|
|
|
import dayjs from 'dayjs'
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
|
|
|
|
+let props = defineProps({
|
|
|
|
|
+ activeFlag: {
|
|
|
|
|
+ type: String
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
let timerTabs = ref('9')
|
|
let timerTabs = ref('9')
|
|
|
-let activeKey = ref('1')
|
|
|
|
|
|
|
+let activeKey = props.activeFlag == 'ccsj' ? ref('1') : ref('3')
|
|
|
let searchData = reactive({
|
|
let searchData = reactive({
|
|
|
startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
})
|
|
})
|
|
|
let dataSource = ref<any[]>([])
|
|
let dataSource = ref<any[]>([])
|
|
|
-let tableColumn = ref(tableColumnSshl)
|
|
|
|
|
|
|
+let tableColumn = props.activeFlag == 'ccsj' ? ref(tableColumnSshl) : ref(tableColumnCcl)
|
|
|
let listData = ref<any[]>([])
|
|
let listData = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
+let EchartOption=computed(()=>{
|
|
|
|
|
+ if(props.activeFlag=='ccsj'){
|
|
|
|
|
+ return ccHlEchartOption
|
|
|
|
|
+ }else if(props.activeFlag!='ccsj' && activeKey.value=='3'){
|
|
|
|
|
+ return ccLEchartOption
|
|
|
|
|
+ }else if(props.activeFlag!='ccsj' && activeKey.value=='4'){
|
|
|
|
|
+ return wshLEchartOption
|
|
|
|
|
+ }else if(props.activeFlag!='ccsj' && activeKey.value=='5'){
|
|
|
|
|
+ return jdsLEchartOption
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
//时间间隔切换
|
|
//时间间隔切换
|
|
|
function changeRadio(val) {
|
|
function changeRadio(val) {
|
|
|
timerTabs.value = val.target.value
|
|
timerTabs.value = val.target.value
|
|
@@ -88,11 +130,23 @@ function tabChange(val) {
|
|
|
tableColumn.value = tableColumnLjhl
|
|
tableColumn.value = tableColumnLjhl
|
|
|
getHistoryData(timerTabs.value)
|
|
getHistoryData(timerTabs.value)
|
|
|
break;
|
|
break;
|
|
|
|
|
+ case '3':
|
|
|
|
|
+ tableColumn.value = tableColumnCcl
|
|
|
|
|
+ getHistoryData(timerTabs.value)
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '4':
|
|
|
|
|
+ tableColumn.value = tableColumnWshl
|
|
|
|
|
+ getHistoryData(timerTabs.value)
|
|
|
|
|
+ break;
|
|
|
|
|
+ case '5':
|
|
|
|
|
+ tableColumn.value = tableColumnJdsl
|
|
|
|
|
+ getHistoryData(timerTabs.value)
|
|
|
|
|
+ break;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
//查询
|
|
//查询
|
|
|
function getSearch() {
|
|
function getSearch() {
|
|
|
- getHistoryData(timerTabs.value)
|
|
|
|
|
|
|
+ getHistoryData(timerTabs.value)
|
|
|
}
|
|
}
|
|
|
async function getHistoryData(skip) {
|
|
async function getHistoryData(skip) {
|
|
|
let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
|
|
let res = await listdays({ pageNo: 1, pageSize: 1000, strtype: 'pump', ttime_begin: searchData.startTime, ttime_end: searchData.endTime, skip: skip })
|
|
@@ -116,7 +170,7 @@ async function getHistoryData(skip) {
|
|
|
yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
|
|
yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
- } else {
|
|
|
|
|
|
|
+ } else if (activeKey.value == '2') {
|
|
|
listData.value = count.map((el, index) => {
|
|
listData.value = count.map((el, index) => {
|
|
|
return {
|
|
return {
|
|
|
label: `汇流管${index + 1}`,
|
|
label: `汇流管${index + 1}`,
|
|
@@ -125,6 +179,30 @@ async function getHistoryData(skip) {
|
|
|
yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
|
|
yData1: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gasConcentration']),
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ } else if (activeKey.value == '3') {
|
|
|
|
|
+ listData.value = count.map((el, index) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ label: `汇流管${index + 1}`,
|
|
|
|
|
+ xData: res.xlist,
|
|
|
|
|
+ yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['ext_rate_percent']),
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }else if (activeKey.value == '4') {
|
|
|
|
|
+ listData.value = count.map((el, index) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ label: `汇流管${index + 1}`,
|
|
|
|
|
+ xData: res.xlist,
|
|
|
|
|
+ yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['residual_gas_content_m3_t']),
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }else if (activeKey.value == '5') {
|
|
|
|
|
+ listData.value = count.map((el, index) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ label: `汇流管${index + 1}`,
|
|
|
|
|
+ xData: res.xlist,
|
|
|
|
|
+ yData: res.datalist.records.filter(fl => fl.gdevicetype == el).map(dl => dl.readData['gas_drop_rate_m3_t_mon']),
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
console.log(listData.value, 'listData.value')
|
|
console.log(listData.value, 'listData.value')
|
|
|
}
|
|
}
|
|
@@ -150,7 +228,7 @@ onMounted(() => {
|
|
|
--image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
|
|
--image-inject_curve_bg: url('@/assets/images/gasInjection/9-3.png');
|
|
|
--image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
|
|
--image-inject_curve_bg1: url('@/assets/images/gasInjection/9-4.png');
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- min-height: 400px;
|
|
|
|
|
|
|
+ min-height: 550px;
|
|
|
padding: 15px 20px;
|
|
padding: 15px 20px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|