修改pages-production的页面及跳转逻辑，增加实时数据总揽页面，通过总览卡片跳转至实时数据页面。
修改了tab经营分包及跳转逻辑。
This commit is contained in:
parent
6c94acbe61
commit
ac2d10e9d2
61
src/components/dataTimeShow.vue
Normal file
61
src/components/dataTimeShow.vue
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<view class="timeText">
|
||||||
|
<wd-text type="primary" :text="nowDateTime"></wd-text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
computed,
|
||||||
|
nextTick,
|
||||||
|
watchEffect,
|
||||||
|
onUnmounted,
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onHide,
|
||||||
|
onShow
|
||||||
|
} from '@dcloudio/uni-app'
|
||||||
|
import {
|
||||||
|
formatDate
|
||||||
|
} from '@/utils/dateTime.ts';
|
||||||
|
const timer1 = ref(null);
|
||||||
|
const nowDateTime = ref("")
|
||||||
|
// 封装心跳函数
|
||||||
|
const getDateTime = () => {
|
||||||
|
// 先清除之前的定时器
|
||||||
|
if (timer1.value) {
|
||||||
|
clearInterval(timer1.value);
|
||||||
|
timer1.value = null;
|
||||||
|
}
|
||||||
|
timer1.value = setInterval(() => {
|
||||||
|
nowDateTime.value = formatDate(new Date(), "YYYY年MM月DD日 HH:mm:ss")
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getDateTime()
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer1.value);
|
||||||
|
})
|
||||||
|
|
||||||
|
onHide(() => {
|
||||||
|
clearInterval(timer1.value);
|
||||||
|
timer1.value = null;
|
||||||
|
})
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
getDateTime()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.timeText {
|
||||||
|
text-align: center;
|
||||||
|
width: 100vw;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
22
src/pages-operate/caiwu/index.vue
Normal file
22
src/pages-operate/caiwu/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom',
|
||||||
|
navigationBarTitleText: '计划财务 ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
<template>
|
||||||
|
<PageLayout :navbarShow="false">
|
||||||
|
<view>
|
||||||
|
财务管理
|
||||||
|
</view>
|
||||||
|
</PageLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
22
src/pages-operate/jingying/index.vue
Normal file
22
src/pages-operate/jingying/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom',
|
||||||
|
navigationBarTitleText: '经营考核 ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
<template>
|
||||||
|
<PageLayout :navbarShow="false">
|
||||||
|
<view>
|
||||||
|
经营管理
|
||||||
|
</view>
|
||||||
|
</PageLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
75
src/pages-production/ribaoshuju/index.vue
Normal file
75
src/pages-production/ribaoshuju/index.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom',
|
||||||
|
navigationBarTitleText: '日报数据',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
<template>
|
||||||
|
<PageLayout :navbarShow="false">
|
||||||
|
<view>
|
||||||
|
<view style="text-align:center;padding:10px;">
|
||||||
|
<date-time-show></date-time-show>
|
||||||
|
<view class="progress-bar">
|
||||||
|
<!-- 动态设置宽度和颜色 -->
|
||||||
|
<view class="progress" :style="{ width: `${dateProgress}%`,'background-color': '#007aff' }">
|
||||||
|
</view>
|
||||||
|
<!-- 显示带符号的百分比 -->
|
||||||
|
<text v-if="!(dateProgress === '' || dateProgress === '0')"
|
||||||
|
class="progress-text">{{ dateProgress }}%</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<trq-data></trq-data>
|
||||||
|
</view>
|
||||||
|
</PageLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dateTimeShow from '@/components/dataTimeShow.vue'
|
||||||
|
import trqData from './trqRbsj'
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
computed,
|
||||||
|
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getYearProgress
|
||||||
|
} from '@/utils/dateTime.ts';
|
||||||
|
const dateProgress = ref(0);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
dateProgress.value = getYearProgress()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.progress-bar {
|
||||||
|
position: relative;
|
||||||
|
height: 20px;
|
||||||
|
background: #e2e2e2;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
// color: red;
|
||||||
|
/* 保持红色 */
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
/* 提升可读性 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -98,7 +98,7 @@
|
|||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
popup.value = false
|
popup.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击卡片处理
|
// 点击卡片处理
|
||||||
// const handleCardClick = (gas) => {
|
// const handleCardClick = (gas) => {
|
||||||
// let queryParms = {};
|
// let queryParms = {};
|
||||||
@ -168,7 +168,7 @@
|
|||||||
const closePopup = () => {
|
const closePopup = () => {
|
||||||
popup.value = false;
|
popup.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const calculateTableHeight = () => {
|
const calculateTableHeight = () => {
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
screenWidth.value = systemInfo.screenWidth;
|
screenWidth.value = systemInfo.screenWidth;
|
||||||
@ -176,7 +176,7 @@
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getJinriTrqShengchansj();
|
getJinriTrqShengchansj();
|
||||||
getJinriShengchansj();
|
getJinriShengchansj();
|
||||||
|
|
||||||
calculateTableHeight();
|
calculateTableHeight();
|
||||||
// 监听屏幕旋转变化
|
// 监听屏幕旋转变化
|
||||||
uni.onWindowResize(() => {
|
uni.onWindowResize(() => {
|
||||||
@ -301,7 +301,7 @@
|
|||||||
|
|
||||||
function goHistory(val) {
|
function goHistory(val) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/production/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
|
url: '/pages-production/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -608,7 +608,7 @@
|
|||||||
.progress-bar {
|
.progress-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #f0f0f0;
|
background: #e2e2e2;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,50 @@
|
|||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom',
|
||||||
|
navigationBarTitleText: '实时数据 ',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</route>
|
||||||
<template>
|
<template>
|
||||||
<trqSssjVue></trqSssjVue>
|
<PageLayout :navbarShow="false">
|
||||||
|
<view>
|
||||||
|
<view style="text-align:center;padding:10px">
|
||||||
|
<date-time-show></date-time-show>
|
||||||
|
</view>
|
||||||
|
<wd-card title="天然气实时数据">
|
||||||
|
天然气实时数据汇总计算结果，用标签显示出各类天然气的实时数据，需要工业库后台进行计算
|
||||||
|
<template #footer>
|
||||||
|
<wd-button size="small" @click="gotoTrqSssj" plain>查看详情</wd-button>
|
||||||
|
</template>
|
||||||
|
</wd-card>
|
||||||
|
|
||||||
|
<wd-card title="管道运行实时数据">
|
||||||
|
各条管线的天然气实时数据汇总计算结果，用标签显示出各类天然气的实时数据，需要工业库后台进行计算
|
||||||
|
<template #footer>
|
||||||
|
<wd-button size="small" @click="gotoGdSssj" plain>查看详情</wd-button>
|
||||||
|
</template>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
|
</PageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import trqSssjVue from './trqSssj';
|
import dateTimeShow from '@/components/dataTimeShow.vue'
|
||||||
</script>
|
|
||||||
|
function gotoTrqSssj() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages-production/shishishuju/trqSssj'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function gotoGdSssj() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages-production/shishishuju/trqSssj'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -3,14 +3,14 @@
|
|||||||
layout: 'default',
|
layout: 'default',
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: 'custom',
|
||||||
navigationBarTitleText: '生产数据',
|
navigationBarTitleText: '天然气实时数据',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
<template>
|
<template>
|
||||||
<PageLayout :navbarShow="false" class="page-layout">
|
<PageLayout navTitle="天然气实时数据" routeMethod="pushTab">
|
||||||
<!-- 标题行 -->
|
<!-- 标题行 -->
|
||||||
<wd-text :text="stationName ? stationName + '实时数据' : '实时数据'"
|
<wd-text :text="stationName ? stationName: ' '"
|
||||||
style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
|
style="color: blue;font-size:18px;text-align: center;margin: 5px;"></wd-text>
|
||||||
<wd-cell :title="'时间:' + nowDateTime " center>
|
<wd-cell :title="'时间:' + nowDateTime " center>
|
||||||
<wd-button custom-class="custom-value" size="small" plain clickable
|
<wd-button custom-class="custom-value" size="small" plain clickable
|
||||||
|
|||||||
142
src/pages.json
142
src/pages.json
@ -183,47 +183,6 @@
|
|||||||
"navigationBarTitleText": "工作台",
|
"navigationBarTitleText": "工作台",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/ribaoshuju/rbsjLsxq",
|
|
||||||
"type": "page",
|
|
||||||
"layout": "default",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "历史数据"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/ribaoshuju/trqRbsj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/ribaoshuju/yyRbsj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/aqbjSssj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/gycsSssj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/index",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/nyxhSssj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/trqSssj",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/production/shishishuju/ysjSssj",
|
|
||||||
"type": "page"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [
|
"subPackages": [
|
||||||
@ -384,6 +343,15 @@
|
|||||||
{
|
{
|
||||||
"root": "pages-operate",
|
"root": "pages-operate",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "caiwu/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "计划财务 "
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "file/detail",
|
"path": "file/detail",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
@ -402,6 +370,15 @@
|
|||||||
"navigationBarTitleText": "公文/通知公告/法律法规/上级制度/厂级制度"
|
"navigationBarTitleText": "公文/通知公告/法律法规/上级制度/厂级制度"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "jingying/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "经营考核 "
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "sc/index",
|
"path": "sc/index",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
@ -630,6 +607,89 @@
|
|||||||
"type": "page"
|
"type": "page"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages-production",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "ribaoshuju/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "日报数据"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "ribaoshuju/rbsjLsxq",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "历史数据"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "ribaoshuju/trqRbsj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "ribaoshuju/yyRbsj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/aqbjSssj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/gycsSssj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "实时数据 "
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/nyxhSssj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/trqSssj",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "天然气实时数据"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/ysjSssj",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/chart/lssjChart",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "历史数据图表"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shishishuju/chart/sssjChart",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "历史数据图表"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -9,8 +9,118 @@
|
|||||||
</route>
|
</route>
|
||||||
<template>
|
<template>
|
||||||
<PageLayout :navbarShow="false">
|
<PageLayout :navbarShow="false">
|
||||||
<view style="margin: 100px;">
|
<view class="nav">
|
||||||
功能正在开发中... 请耐心等待
|
<view class="nav_box">
|
||||||
|
<scroll-view direction="horizontal">
|
||||||
|
<uni-segmented-control :current="current" :values="items" styleType="string" mode="segmented"
|
||||||
|
@clickItem="onClickItem"></uni-segmented-control>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
|
||||||
|
<view v-if="current === 0">
|
||||||
|
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||||
|
<caiwu-guanli></caiwu-guanli>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view v-if="current === 1">
|
||||||
|
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||||
|
<jingying-guanli></jingying-guanli>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
computed,
|
||||||
|
nextTick,
|
||||||
|
watchEffect,
|
||||||
|
onUnmounted
|
||||||
|
} from 'vue';
|
||||||
|
import caiwuGuanli from '@/pages-operate/caiwu/index'
|
||||||
|
import jingyingGuanli from '@/pages-operate/jingying/index'
|
||||||
|
const items = ref(['计划财务', '经营考核', '外部市场'])
|
||||||
|
const current = ref(0)
|
||||||
|
const res = wx.getSystemInfoSync();
|
||||||
|
const statusHeight = res.statusBarHeight; //状态栏高度
|
||||||
|
const cusnavbarheight = (statusHeight + 50) + "px";
|
||||||
|
const scrollViewHeight = ref(0); //滚动控件的高度
|
||||||
|
|
||||||
|
const activeColor = ref("#0000ff")
|
||||||
|
const inActiveColor = ref("#000000")
|
||||||
|
|
||||||
|
function onClickItem(e) {
|
||||||
|
if (current.value != e.currentIndex) {
|
||||||
|
current.value = e.currentIndex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
calculateScrollViewHeight();
|
||||||
|
// 使用 Uniapp 提供的窗口大小变化监听方法
|
||||||
|
uni.onWindowResize(calculateScrollViewHeight);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
// 移除 Uniapp 窗口大小变化监听
|
||||||
|
uni.offWindowResize(calculateScrollViewHeight);
|
||||||
|
});
|
||||||
|
const calculateScrollViewHeight = () => {
|
||||||
|
// 获取屏幕的总高度
|
||||||
|
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||||||
|
// 创建一个选择器查询对象
|
||||||
|
const query = uni.createSelectorQuery();
|
||||||
|
// 选择所有需要计算高度的元素
|
||||||
|
query
|
||||||
|
.select('.nav')
|
||||||
|
.boundingClientRect();
|
||||||
|
|
||||||
|
// 执行查询操作
|
||||||
|
query.exec((res) => {
|
||||||
|
let totalHeight = 0;
|
||||||
|
res.forEach((element) => {
|
||||||
|
if (element) {
|
||||||
|
totalHeight += element.height;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 计算 scroll-view 的高度
|
||||||
|
scrollViewHeight.value = screenHeight - totalHeight;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.nav {
|
||||||
|
width: calc(100%);
|
||||||
|
height: v-bind(cusnavbarheight);
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #333333;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
background-image: url('@/static/navbg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 750rpx 458rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav_box {
|
||||||
|
font-size: 18;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6rpx;
|
||||||
|
width: calc(100% - 60rpx);
|
||||||
|
left: 30rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: v-bind(cusnavbarheight);
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - v-bind(cusnavbarheight));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -26,8 +26,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view v-if="current === 1">
|
<view v-if="current === 1">
|
||||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||||
<trq-data></trq-data>
|
<rb-data></rb-data>
|
||||||
<yy-data></yy-data>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -47,10 +46,10 @@
|
|||||||
onUnmounted
|
onUnmounted
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
//、、东风风光的
|
//、、东风风光的
|
||||||
import trqData from '@/pages-production/ribaoshuju/trqRbsj';
|
|
||||||
import yyData from '@/pages-production/ribaoshuju/yyRbsj';
|
import rbData from '@/pages-production/ribaoshuju/index';
|
||||||
import sssjData from '@/pages-production/shishishuju/trqSssj';
|
import sssjData from '@/pages-production/shishishuju/index';
|
||||||
const items = ref(['油气实时', '油气历史', '管线运行', '安防监控', '设备运行'])
|
const items = ref(['实时数据', '日报数据', '安全管理', '工程技术', '仪控设备'])
|
||||||
const current = ref(0)
|
const current = ref(0)
|
||||||
const res = wx.getSystemInfoSync();
|
const res = wx.getSystemInfoSync();
|
||||||
const statusHeight = res.statusBarHeight; //状态栏高度
|
const statusHeight = res.statusBarHeight; //状态栏高度
|
||||||
|
|||||||
@ -1,274 +0,0 @@
|
|||||||
<route lang="json5" type="page">
|
|
||||||
{
|
|
||||||
layout: 'default',
|
|
||||||
style: {
|
|
||||||
navigationStyle: 'custom',
|
|
||||||
navigationBarTitleText: '历史数据',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</route>
|
|
||||||
<template>
|
|
||||||
<PageLayout navTitle="历史数据">
|
|
||||||
<view class="stats-container">
|
|
||||||
<uni-title v-if="type === 'trq'" :title="name.unit + '天然气---单位（万方）'" color="blue" type="h2"></uni-title>
|
|
||||||
<uni-title v-if="type === 'yy'" :title="name.dw + '原油---单位（吨）'" color="blue" type="h2"></uni-title>
|
|
||||||
</view>
|
|
||||||
<view class="dateSelect">
|
|
||||||
<cxc-szcx-dateRangeSelect :mode="'range'" v-model="dateRange"></cxc-szcx-dateRangeSelect>
|
|
||||||
</view>
|
|
||||||
<cxc-szcx-lineChart v-if="type === 'trq'" :dataList="dataList" x-field="rqDate" y-field="rq" legend-field="unit"
|
|
||||||
:reference-value="0"></cxc-szcx-lineChart>
|
|
||||||
|
|
||||||
<cxc-szcx-lineChart v-if="type === 'yy'" :dataList="dataList" x-field="scrq" y-field="rcwy" legend-field="dw"
|
|
||||||
:reference-value="0"></cxc-szcx-lineChart>
|
|
||||||
<view style="margin: 0 15px">
|
|
||||||
<view class="stats-container">
|
|
||||||
<view class="stats-item">最大值: {{ dataStats.max }}</view>
|
|
||||||
<view class="stats-item">最小值: {{ dataStats.min }}</view>
|
|
||||||
<view class="stats-item">平均值: {{ dataStats.average }}</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<wd-table :data="dataList" :height="800" v-if="type === 'trq'" :index="true">
|
|
||||||
<wd-table-col prop="unit" label="名称" :width="screenWidth / 3" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="rqDate" label="日期" :width="screenWidth / 4" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="rq" label="日气量" :width="screenWidth / 5" align="center"></wd-table-col>
|
|
||||||
</wd-table>
|
|
||||||
|
|
||||||
<wd-table :data="dataList" :height="800" v-if="type === 'yy'" :index="true">
|
|
||||||
<wd-table-col prop="dw" label="名称" :width="screenWidth / 3" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="scrq" label="日期" :width="screenWidth / 4" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="rcwy" label="日油量" :width="screenWidth / 5" align="center"></wd-table-col>
|
|
||||||
</wd-table>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</PageLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
queryJinriShengchansj,
|
|
||||||
queryJinriYuanyouShengchansj
|
|
||||||
} from '@/api/production';
|
|
||||||
import {
|
|
||||||
formatDate,
|
|
||||||
getDateAfterDays,
|
|
||||||
getDateAfterMonths
|
|
||||||
} from '@/utils/dateTime';
|
|
||||||
const name = ref({});
|
|
||||||
const type = ref('');
|
|
||||||
const dateRange = ref([]);
|
|
||||||
const dataList = ref([]);
|
|
||||||
const endDate = ref('');
|
|
||||||
const startDate = ref('');
|
|
||||||
const dataStats = ref({
|
|
||||||
min: 0,
|
|
||||||
max: 0,
|
|
||||||
avg: 0
|
|
||||||
});
|
|
||||||
const screenWidth = ref(0)
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
|
||||||
screenWidth.value = systemInfo.screenWidth;
|
|
||||||
}
|
|
||||||
const getJinriShengchansj = (tempDateRange) => {
|
|
||||||
// console.log(tempDateRange);
|
|
||||||
// 添加日期有效性检查
|
|
||||||
if (!tempDateRange || tempDateRange.some((date) => !convertToDate(date))) {
|
|
||||||
console.error('收到无效日期范围:', tempDateRange);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
dataList.value = [];
|
|
||||||
queryParms.gas = name.value.gas;
|
|
||||||
queryParms.unit = name.value.unit;
|
|
||||||
queryParms.rqDate_begin = formatDate(tempDateRange[0]);
|
|
||||||
queryParms.rqDate_end = formatDate(tempDateRange[1]);
|
|
||||||
queryParms.pageSize = 500;
|
|
||||||
|
|
||||||
// 添加参数有效性检查
|
|
||||||
if (!queryParms.rqDate_begin || !queryParms.rqDate_end) {
|
|
||||||
console.error('参数格式化失败:', queryParms);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// console.log(queryParms);
|
|
||||||
queryJinriShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
// console.log(res);
|
|
||||||
dataList.value = res.result.records;
|
|
||||||
dataStats.value = calculateStats(dataList.value, 'rq');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const getJinriYuanyouShengchansj = (tempDateRange) => {
|
|
||||||
console.log(tempDateRange);
|
|
||||||
// 添加日期有效性检查
|
|
||||||
if (!tempDateRange || tempDateRange.some((date) => !convertToDate(date))) {
|
|
||||||
console.error('收到无效日期范围:', tempDateRange);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
dataList.value = [];
|
|
||||||
queryParms.dw = name.value.dw;
|
|
||||||
queryParms.scrq_begin = formatDate(tempDateRange[0]);
|
|
||||||
queryParms.scrq_end = formatDate(tempDateRange[1]);
|
|
||||||
queryParms.pageSize = 500;
|
|
||||||
|
|
||||||
// 添加参数有效性检查
|
|
||||||
if (!queryParms.scrq_begin || !queryParms.scrq_end) {
|
|
||||||
console.error('参数格式化失败:', queryParms);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log(queryParms);
|
|
||||||
queryJinriYuanyouShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
console.log(res);
|
|
||||||
dataList.value = res.result.records;
|
|
||||||
dataStats.value = calculateStats(dataList.value, 'rcwy').reverse();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function calculateStats(data, field) {
|
|
||||||
// 过滤掉 field 字段值为 null 或 undefined 的数据
|
|
||||||
const validData = data.filter((item) => item[field] !== null && item[field] !== undefined);
|
|
||||||
if (validData.length === 0) {
|
|
||||||
return {
|
|
||||||
max: null,
|
|
||||||
min: null,
|
|
||||||
average: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 初始化最大值、最小值和总和
|
|
||||||
let max = validData[0][field];
|
|
||||||
let min = validData[0][field];
|
|
||||||
let sum = 0;
|
|
||||||
|
|
||||||
// 遍历有效数据
|
|
||||||
for (let i = 0; i < validData.length; i++) {
|
|
||||||
const value = validData[i][field];
|
|
||||||
// 更新最大值
|
|
||||||
if (value > max) {
|
|
||||||
max = value;
|
|
||||||
}
|
|
||||||
// 更新最小值
|
|
||||||
if (value < min) {
|
|
||||||
min = value;
|
|
||||||
}
|
|
||||||
// 累加值到总和
|
|
||||||
sum += value;
|
|
||||||
}
|
|
||||||
// 计算平均值
|
|
||||||
const average = (sum / validData.length).toFixed(4);
|
|
||||||
|
|
||||||
return {
|
|
||||||
max: max,
|
|
||||||
min: min,
|
|
||||||
average: average
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertToDate(str) {
|
|
||||||
try {
|
|
||||||
const date = new Date(str);
|
|
||||||
// 判断日期是否有效
|
|
||||||
if (isNaN(date.getTime())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
return false;
|
|
||||||
//TODO handle the exception
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 修改后（正确）
|
|
||||||
watch(
|
|
||||||
[() => type.value, dateRange], // 监听 type 和 dateRange
|
|
||||||
([newType, newDateRange]) => {
|
|
||||||
if (!newDateRange || !convertToDate(newDateRange[0]) || !convertToDate(newDateRange[1])) {
|
|
||||||
// console.error('无效的日期范围:', newDateRange);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// console.log(newType, newDateRange);
|
|
||||||
|
|
||||||
switch (
|
|
||||||
newType // 直接使用 newType
|
|
||||||
) {
|
|
||||||
case 'trq':
|
|
||||||
getJinriShengchansj(newDateRange);
|
|
||||||
break;
|
|
||||||
case 'yy':
|
|
||||||
getJinriYuanyouShengchansj(newDateRange);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.warn('未知类型:', newType);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
immediate: true,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
);
|
|
||||||
onMounted(() => {
|
|
||||||
// nextTick();
|
|
||||||
// getJinriShengchansj(dateRange.value);
|
|
||||||
calculateTableHeight();
|
|
||||||
// 监听屏幕旋转变化
|
|
||||||
uni.onWindowResize(() => {
|
|
||||||
calculateTableHeight();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
onLoad((options) => {
|
|
||||||
name.value = JSON.parse(options.data);
|
|
||||||
type.value = options.type;
|
|
||||||
// console.log(name.value, type.value);
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
endDate.value = getDateAfterDays(now, -1); //11点之前 头一天的数据
|
|
||||||
startDate.value = getDateAfterMonths(endDate.value, -1); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
endDate.value = now;
|
|
||||||
startDate.value = getDateAfterMonths(endDate.value, -1); //11点之前 头一天的数据
|
|
||||||
}
|
|
||||||
dateRange.value = [startDate.value, endDate.value];
|
|
||||||
// console.log(1111, dateRange.value);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.stats-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
padding: 10px;
|
|
||||||
margin: 15 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dateSelect {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
padding: 5px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-item {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #00aa00;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-item+.stats-item {
|
|
||||||
border-left: 1px solid #ccc;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,633 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="content">
|
|
||||||
<!-- 标题行 -->
|
|
||||||
<view class="header-row">
|
|
||||||
<view class="title">天然气产量</view>
|
|
||||||
<view class="more" @click="selectMore">更多>></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="container">
|
|
||||||
<view v-for="(item, index) in shishiArrSelect" :key="index" class="card-item"
|
|
||||||
@click="handleCardClick(item.gas)">
|
|
||||||
<view class="card">
|
|
||||||
<text class="title">{{ item.gas }}</text>
|
|
||||||
<view class="content">
|
|
||||||
<text class="label">气量</text>
|
|
||||||
<text class="value">{{ formatNumber(item.dailyVolume) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<text class="label">年累计</text>
|
|
||||||
<text class="value">{{ formatNumber(item.yearVolume) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="progress-bar">
|
|
||||||
<!-- 动态设置宽度和颜色 -->
|
|
||||||
<view class="progress"
|
|
||||||
:style="{ width: `${Math.abs(item.yearPerCent)}%`, 'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff' }">
|
|
||||||
</view>
|
|
||||||
<!-- 显示带符号的百分比 -->
|
|
||||||
<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')"
|
|
||||||
class="progress-text">{{ item.yearPerCent }}%</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<wd-popup v-model="popupSelect" position="top" background-color="#fff">
|
|
||||||
<view style="margin-top: 50px">
|
|
||||||
<view class="titlepopup">选择显示更多生产数据</view>
|
|
||||||
|
|
||||||
<view class="popupBtn">
|
|
||||||
<button size="mini" @click="selectDefault" style="padding: 8px 16px;">默认</button>
|
|
||||||
<button size="mini" @click="selectAll" style="padding: 8px 16px;">全选</button>
|
|
||||||
<button size="mini" @click="selectNo" style="padding: 8px 16px;">全不选</button>
|
|
||||||
</view>
|
|
||||||
<view class="popupcheckbox">
|
|
||||||
<uni-data-checkbox style="font-size: 14px" @change="onselectionchange" :localdata="shishiArr"
|
|
||||||
v-model="shishiArrDisplay" multiple :map="{ value: 'gas', text: 'gas' }"></uni-data-checkbox>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
<!-- 数据弹窗 -->
|
|
||||||
<wd-popup v-model="popup" position="bottom" closable custom-style="height: 400px;" @close="handleClose">
|
|
||||||
<wd-cell-group :title="tableTitle">
|
|
||||||
<wd-table :data="filteredData" :height="800">
|
|
||||||
<wd-table-col prop="unit" label="名称" :width="screenWidth * 57 / 140 " align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="rq" label="日气量" :width="screenWidth / 5" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="yearVolume" label="年累计" :width="screenWidth / 4" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="" label="操作" :width="screenWidth / 7" align="center">
|
|
||||||
<template #value="{row}">
|
|
||||||
<text style="color: red;" @click="goHistory(row)">历史</text>
|
|
||||||
</template>
|
|
||||||
</wd-table-col>
|
|
||||||
</wd-table>
|
|
||||||
</wd-cell-group>
|
|
||||||
</wd-popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
queryJinriShengchansj,
|
|
||||||
queryYearShengchansj,
|
|
||||||
queryJinriTrqShengchansj
|
|
||||||
} from '@/api/production';
|
|
||||||
import {
|
|
||||||
formatDate,
|
|
||||||
getDateAfterDays
|
|
||||||
} from '@/utils/dateTime';
|
|
||||||
|
|
||||||
const shishiArr = ref([]);
|
|
||||||
const shishiArrSelect = ref([]);
|
|
||||||
const shishiArrDisplay = ref(['气井气', '商品量', '站线综合输差']);
|
|
||||||
const dataJinriUnit = ref([]);
|
|
||||||
const tableTitle = ref('')
|
|
||||||
const filteredData = ref([]);
|
|
||||||
const popup = ref(false);
|
|
||||||
const popupSelect = ref(false);
|
|
||||||
const strDate = ref('');
|
|
||||||
|
|
||||||
const dataJinri = ref([]);
|
|
||||||
const dataJinriSum = ref([]);
|
|
||||||
const dataJinriSumUnit = ref([]);
|
|
||||||
|
|
||||||
|
|
||||||
const qjqNdjs = ref(7500);
|
|
||||||
const splNdjs = ref(7220);
|
|
||||||
const zhqNdjs = ref(300);
|
|
||||||
const zhscNdjs = ref(50);
|
|
||||||
const screenWidth = ref(0)
|
|
||||||
const handleClose = () => {
|
|
||||||
popup.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击卡片处理
|
|
||||||
// const handleCardClick = (gas) => {
|
|
||||||
// let queryParms = {};
|
|
||||||
// filteredData.value = [];
|
|
||||||
// queryParms.day = strDate.value;
|
|
||||||
// queryParms.gas = gas;
|
|
||||||
// queryParms.unit = '文23气田,户部寨气田';
|
|
||||||
// console.log(queryParms);
|
|
||||||
// queryJinriTrqShengchansj(queryParms).then((res) => {
|
|
||||||
// if (res.success) {
|
|
||||||
// console.log(res);
|
|
||||||
// filteredData.value = res.result;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// popup.value.open();
|
|
||||||
// };
|
|
||||||
|
|
||||||
function selectMore() {
|
|
||||||
popupSelect.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectAll() {
|
|
||||||
shishiArrDisplay.value = [];
|
|
||||||
// console.log(9, shishiArr.value)
|
|
||||||
shishiArr.value.forEach((item) => {
|
|
||||||
// console.log(10, item)
|
|
||||||
shishiArrDisplay.value.push(item.gas);
|
|
||||||
});
|
|
||||||
onselectionchange()
|
|
||||||
popup.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectNo() {
|
|
||||||
shishiArrDisplay.value = [];
|
|
||||||
onselectionchange()
|
|
||||||
popup.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectDefault() {
|
|
||||||
shishiArrDisplay.value = ['气井气', '商品量', '站线综合输差'];
|
|
||||||
onselectionchange()
|
|
||||||
popup.value = false;
|
|
||||||
}
|
|
||||||
const onselectionchange = () => {
|
|
||||||
shishiArrSelect.value = [];
|
|
||||||
shishiArrDisplay.value.forEach((item) => {
|
|
||||||
shishiArrSelect.value.push(shishiArr.value.filter((item1) => item1.gas === item)[0]);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCardClick = (gas) => {
|
|
||||||
tableTitle.value = gas + '数据详情 单位(万立方米)'
|
|
||||||
filteredData.value = dataJinriSumUnit.value.filter((item) => item.gas === gas);
|
|
||||||
filteredData.value = filteredData.value.map(item => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
rq: formatNumber(item.rq),
|
|
||||||
yearVolume: formatNumber(item.yearVolume)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
popup.value = true;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
const closePopup = () => {
|
|
||||||
popup.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
|
||||||
screenWidth.value = systemInfo.screenWidth;
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
getJinriTrqShengchansj();
|
|
||||||
getJinriShengchansj();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
// 监听屏幕旋转变化
|
|
||||||
uni.onWindowResize(() => {
|
|
||||||
calculateTableHeight();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 数字格式化
|
|
||||||
const formatNumber = (num) => {
|
|
||||||
let temp = 0;
|
|
||||||
try {
|
|
||||||
temp = parseFloat(num);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp.toFixed(4).replace(/\.?0+$/, '');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自动计算综合输差
|
|
||||||
function calcZhsc(tempArray) {
|
|
||||||
let totalJinqi = {
|
|
||||||
gas: '总进气',
|
|
||||||
dailyVolume: 0,
|
|
||||||
yearVolume: 0,
|
|
||||||
yearPlan: '100',
|
|
||||||
yearPerCent: 0
|
|
||||||
};
|
|
||||||
let totalChuqi = {
|
|
||||||
gas: '总出气',
|
|
||||||
dailyVolume: 0,
|
|
||||||
yearVolume: 0,
|
|
||||||
yearPlan: '100',
|
|
||||||
yearPerCent: 0
|
|
||||||
};
|
|
||||||
const compositeZx = {
|
|
||||||
gas: '站线综合输差',
|
|
||||||
dailyVolume: 0,
|
|
||||||
yearVolume: 0,
|
|
||||||
yearPlan: '100',
|
|
||||||
yearPerCent: 0
|
|
||||||
}; // 综合输差
|
|
||||||
const compositeJc = {
|
|
||||||
gas: '进出综合输差',
|
|
||||||
dailyVolume: 0,
|
|
||||||
yearVolume: 0,
|
|
||||||
yearPlan: '100',
|
|
||||||
yearPerCent: 0
|
|
||||||
};
|
|
||||||
const trqSpl = {
|
|
||||||
gas: '商品量',
|
|
||||||
dailyVolume: 0,
|
|
||||||
yearVolume: 0,
|
|
||||||
yearPlan: '7220',
|
|
||||||
yearPerCent: 0
|
|
||||||
};
|
|
||||||
// 综合输差
|
|
||||||
tempArray.forEach((item) => {
|
|
||||||
if (item.gas === '站输差' || item.gas === '线输差') {
|
|
||||||
compositeZx.dailyVolume += parseFloat(item.dailyVolume) || 0;
|
|
||||||
compositeZx.yearVolume += parseFloat(item.yearVolume) || 0;
|
|
||||||
}
|
|
||||||
if (item.gas === '气井气' || item.gas === '外部气' || item.gas === '返回气') {
|
|
||||||
totalJinqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
|
|
||||||
totalJinqi.yearVolume += parseFloat(item.yearVolume) || 0;
|
|
||||||
}
|
|
||||||
if (item.gas === '自耗气' || item.gas === '用户气' || item.gas === '返采油厂干气') {
|
|
||||||
totalChuqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
|
|
||||||
totalChuqi.yearVolume += parseFloat(item.yearVolume) || 0;
|
|
||||||
}
|
|
||||||
if (item.gas === '气井气' || item.gas === '站输差' || item.gas === '线输差') {
|
|
||||||
trqSpl.dailyVolume += parseFloat(item.dailyVolume) || 0;
|
|
||||||
trqSpl.yearVolume += parseFloat(item.yearVolume) || 0;
|
|
||||||
}
|
|
||||||
if (item.gas === '自耗气') {
|
|
||||||
trqSpl.dailyVolume -= parseFloat(item.dailyVolume) || 0;
|
|
||||||
trqSpl.yearVolume -= parseFloat(item.yearVolume) || 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
compositeZx.yearPerCent = calcPercent(compositeZx.yearPlan, compositeZx.yearVolume);
|
|
||||||
|
|
||||||
trqSpl.yearPerCent = calcPercent(trqSpl.yearPlan, trqSpl.yearVolume);
|
|
||||||
|
|
||||||
compositeJc.dailyVolume = (-totalJinqi.dailyVolume + totalChuqi.dailyVolume).toFixed(4);
|
|
||||||
compositeJc.yearVolume = (-totalJinqi.yearVolume + totalChuqi.yearVolume).toFixed(4);
|
|
||||||
compositeJc.yearPerCent = calcPercent(compositeJc.yearPlan, compositeJc.yearVolume);
|
|
||||||
|
|
||||||
tempArray.push(compositeZx);
|
|
||||||
tempArray.push(trqSpl);
|
|
||||||
|
|
||||||
return tempArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getJinriTrqShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
strDate.value = formatDate(now).toString();
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
shishiArr.value = [];
|
|
||||||
queryParms.day = strDate.value;
|
|
||||||
queryJinriTrqShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
console.log(1, res);
|
|
||||||
let temp = res.result;
|
|
||||||
|
|
||||||
temp.forEach((item) => {
|
|
||||||
if (item.gas === '气井气') {
|
|
||||||
item.yearPlan = 7500;
|
|
||||||
item.yearPerCent = calcPercent(item.yearPlan, item.yearVolume);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
shishiArr.value = calcZhsc(temp);
|
|
||||||
nextTick();
|
|
||||||
onselectionchange();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function goHistory(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/production/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcPercent(yearJihua, yearShiji) {
|
|
||||||
// 计算进度百分比，避免除数为 0
|
|
||||||
// 确保进度百分比不超过 100
|
|
||||||
let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
|
|
||||||
let shiji = parseFloat(yearShiji);
|
|
||||||
let percent = 0;
|
|
||||||
// 修改原始计算代码
|
|
||||||
if (plan > 0) {
|
|
||||||
percent = (shiji / plan) * 100;
|
|
||||||
percent = Math.min(percent, 100); // 限制最大100%
|
|
||||||
}
|
|
||||||
return parseFloat(percent.toFixed(2)); // 转为数值
|
|
||||||
}
|
|
||||||
|
|
||||||
const getJinriShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
strDate.value = formatDate(now).toString();
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
dataJinri.value = [];
|
|
||||||
dataJinriSum.value = [];
|
|
||||||
dataJinriSumUnit.value = [];
|
|
||||||
queryParms.rqDate = strDate.value;
|
|
||||||
queryParms.pageSize = 100;
|
|
||||||
queryJinriShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
dataJinri.value = res.result.records;
|
|
||||||
dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas unit rq cq totalGas
|
|
||||||
// // 使用 nextTick 等待 DOM 更新
|
|
||||||
nextTick();
|
|
||||||
getYearShengchansj(); //再获取今年以来的数据
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getYearShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
let year = formatDate(now).split('-')[0];
|
|
||||||
let queryParms = {};
|
|
||||||
queryParms.yearStart = year;
|
|
||||||
queryParms.yearEnd = year;
|
|
||||||
queryYearShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
try {
|
|
||||||
let yearData = res.result[year];
|
|
||||||
dataJinriSumUnit.value.forEach((item) => {
|
|
||||||
yearData.forEach((itemYear) => {
|
|
||||||
// // console.log(item, itemYear);
|
|
||||||
if (item.setId === itemYear.setId) {
|
|
||||||
item.yearVolume = itemYear.yearSum || 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
|
|
||||||
shishiArr.value.forEach((item) => {
|
|
||||||
dataJinriSum.value.forEach((itemjinri) => {
|
|
||||||
if (item.gas === itemjinri.gas) {
|
|
||||||
item.dailyVolume = itemjinri.rq.toFixed(4);
|
|
||||||
item.yearVolume = itemjinri.yearVolume.toFixed(4);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
// console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function sumByGas(records) {
|
|
||||||
const summaryMap = {};
|
|
||||||
try {
|
|
||||||
records.forEach((record) => {
|
|
||||||
const gas = record.gas;
|
|
||||||
if (!summaryMap[gas]) {
|
|
||||||
// 初始化该 gas 类型的汇总对象
|
|
||||||
summaryMap[gas] = {
|
|
||||||
gas: gas,
|
|
||||||
rq: 0,
|
|
||||||
sq: 0,
|
|
||||||
totalGas: 0,
|
|
||||||
yearVolume: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
|
|
||||||
summaryMap[gas].rq += record.rq || 0;
|
|
||||||
summaryMap[gas].sq += record.sq || 0;
|
|
||||||
summaryMap[gas].totalGas += record.totalGas || 0;
|
|
||||||
summaryMap[gas].yearVolume += record.yearVolume || 0;
|
|
||||||
});
|
|
||||||
return Object.values(summaryMap);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
// console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sumByUnit(records) {
|
|
||||||
console.log(records);
|
|
||||||
const summaryMap = {};
|
|
||||||
try {
|
|
||||||
records.forEach((record) => {
|
|
||||||
const unit = record.unit;
|
|
||||||
const gas = record.gas;
|
|
||||||
// 添加setId计算
|
|
||||||
const setId = record.setId
|
|
||||||
if (gas != "区输差") {
|
|
||||||
if (!summaryMap[setId]) {
|
|
||||||
// 初始化该 gas 类型的汇总对象
|
|
||||||
summaryMap[setId] = {
|
|
||||||
unit: unit,
|
|
||||||
setId: setId,
|
|
||||||
gas: record.gas,
|
|
||||||
rq: 0,
|
|
||||||
sq: 0,
|
|
||||||
totalGas: 0,
|
|
||||||
yearVolume: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 无论是否是第一次遇到该 unit 类型，都进行累加操作
|
|
||||||
summaryMap[setId].rq += record.rq || 0;
|
|
||||||
summaryMap[setId].sq += record.sq || 0;
|
|
||||||
summaryMap[setId].totalGas += record.totalGas || 0;
|
|
||||||
summaryMap[setId].yearVolume += record.yearVolume || 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return Object.values(summaryMap);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
// console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10 10rpx;
|
|
||||||
border-bottom: 1rpx solid #eee;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titlepopup {
|
|
||||||
font-size: 35rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 给包裹按钮的容器设置样式 */
|
|
||||||
.popupBtn {
|
|
||||||
display: grid;
|
|
||||||
/* 创建三个等宽的列 */
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
/* 设置列与列之间的间距 */
|
|
||||||
gap: 2px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 添加按钮按下效果 */
|
|
||||||
.popupBtn button:active {
|
|
||||||
opacity: 0.8;
|
|
||||||
transform: scale(0.98);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 给按钮设置通用样式 */
|
|
||||||
.popupBtn button {
|
|
||||||
border: none;
|
|
||||||
padding: 0px 10px;
|
|
||||||
background-color: #007BFF;
|
|
||||||
color: white;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 鼠标悬停在按钮上时的样式 */
|
|
||||||
.popupBtn button:hover {
|
|
||||||
background-color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more::after {
|
|
||||||
content: '';
|
|
||||||
width: 8rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
border-top: 2rpx solid #666;
|
|
||||||
border-right: 2rpx solid #666;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
margin-left: 8rpx;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 鼠标悬停效果 */
|
|
||||||
.more:hover {
|
|
||||||
color: #007aff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popupcheckbox {
|
|
||||||
/* 使用 Flexbox 布局 */
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
/* 允许换行 */
|
|
||||||
gap: 2px;
|
|
||||||
/* 设置复选框之间的间距 */
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.popupcheckbox .uni-data-checkbox__item {
|
|
||||||
flex-basis: calc((100% / var(4)) - 10px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 20rpx;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty {
|
|
||||||
padding: 40rpx;
|
|
||||||
text-align: center;
|
|
||||||
color: #888;
|
|
||||||
font-size: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item {
|
|
||||||
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 formatNumber
|
|
||||||
min-width: 240rpx;
|
|
||||||
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
max-width: calc(33.33% - 14rpx); // 大屏显示3列
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: #ececec;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 15rpx;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(179, 179, 179, 0.1);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: block;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #0000ff;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
position: relative;
|
|
||||||
height: 20px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
// color: red;
|
|
||||||
/* 保持红色 */
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
||||||
/* 提升可读性 */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,317 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- <view style="margin-left: 20rpx;"> <uni-title :title="strDate + '：生产数据'" type="h1" color="red" /> -->
|
|
||||||
<!-- </view> -->
|
|
||||||
<view class="content">
|
|
||||||
<!-- 标题行 -->
|
|
||||||
<view class="header-row">
|
|
||||||
<view class="title">原油产量</view>
|
|
||||||
<view class="more"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="container">
|
|
||||||
<view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)">
|
|
||||||
<view class="card">
|
|
||||||
<!-- <text class="title">{{ item.gas }}</text> -->
|
|
||||||
<view class="content">
|
|
||||||
<text class="label">日油量</text>
|
|
||||||
<text class="value">{{ item.rcwy || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<text class="label">月累计</text>
|
|
||||||
<text class="value">{{ item.yl || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<text class="label">年累计</text>
|
|
||||||
<text class="value">{{ item.nl || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="progress-bar">
|
|
||||||
<!-- 动态设置宽度和颜色 -->
|
|
||||||
<view class="progress" :style="{
|
|
||||||
width: `${Math.abs(item.yearPerCent)}%`,
|
|
||||||
'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff'
|
|
||||||
}"></view>
|
|
||||||
<!-- 显示带符号的百分比 -->
|
|
||||||
<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')"
|
|
||||||
class="progress-text">{{ item.yearPerCent }}%</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 数据弹窗 -->
|
|
||||||
<wd-popup v-model="popup" position="bottom" closable custom-style="height: 400px;" @close="handleClose">
|
|
||||||
<wd-cell-group title="原油数据详情 单位(吨)">
|
|
||||||
<wd-table :data="dataJinri" :height="800">
|
|
||||||
<wd-table-col prop="dw" label="名称" :width="screenWidth * 29 / 140" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="rcwy" label="日油量" :width="screenWidth / 5" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="yl" label="月累计" :width="screenWidth / 5" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="nl" label="年累计" :width="screenWidth / 4" align="center"></wd-table-col>
|
|
||||||
<wd-table-col prop="" label="操作" :width="screenWidth / 7" align="center">
|
|
||||||
<template #value="{row}">
|
|
||||||
<text style="color: red;" @click="goHistory(row)">历史</text>
|
|
||||||
</template>
|
|
||||||
</wd-table-col>
|
|
||||||
</wd-table>
|
|
||||||
</wd-cell-group>
|
|
||||||
</wd-popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
queryJinriYuanyouShengchansj
|
|
||||||
} from '@/api/production';
|
|
||||||
import {
|
|
||||||
formatDate,
|
|
||||||
getDateAfterDays
|
|
||||||
} from '@/utils/dateTime';
|
|
||||||
const shishiArr = ref([{
|
|
||||||
gas: '原油产量',
|
|
||||||
rcwy: '',
|
|
||||||
yl: '',
|
|
||||||
nl: '',
|
|
||||||
yearPlan: '1500',
|
|
||||||
yearPerCent: ''
|
|
||||||
}]);
|
|
||||||
const screenWidth = ref(0)
|
|
||||||
const dataJinri = ref([]);
|
|
||||||
const dataJinriSum = ref([]);
|
|
||||||
const popup = ref(false);
|
|
||||||
// 点击卡片处理
|
|
||||||
const handleCardClick = () => {
|
|
||||||
popup.value = true
|
|
||||||
};
|
|
||||||
|
|
||||||
// 关闭弹窗
|
|
||||||
const closePopup = () => {
|
|
||||||
popup.value = false
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
getJinriYuanyouShengchansj();
|
|
||||||
// getYearShengchansj();
|
|
||||||
calculateTableHeight();
|
|
||||||
// 监听屏幕旋转变化
|
|
||||||
uni.onWindowResize(() => {
|
|
||||||
calculateTableHeight();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const strDate = ref('');
|
|
||||||
// 数字格式化
|
|
||||||
const formatNumber = (num) => {
|
|
||||||
if (typeof num !== 'number') return '-';
|
|
||||||
return num.toFixed(4).replace(/\.?0+$/, '');
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
popup.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function goHistory(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/production/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=yy'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
|
||||||
screenWidth.value = systemInfo.screenWidth;
|
|
||||||
}
|
|
||||||
const getJinriYuanyouShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
strDate.value = formatDate(now).toString();
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
dataJinri.value = [];
|
|
||||||
dataJinriSum.value = [];
|
|
||||||
queryParms.scrq = strDate.value;
|
|
||||||
queryParms.pageSize = 100;
|
|
||||||
queryJinriYuanyouShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
dataJinri.value = res.result.records;
|
|
||||||
dataJinriSum.value = sumByOil(dataJinri.value); //包含gas unit rq cq totalGas
|
|
||||||
// // console.log(dataJinriSum.value);
|
|
||||||
nextTick();
|
|
||||||
shishiArr.value.forEach((item) => {
|
|
||||||
dataJinriSum.value.forEach((itemjinri) => {
|
|
||||||
item.rcwy = itemjinri.rcwy.toFixed(4);
|
|
||||||
item.nl = itemjinri.nl.toFixed(4);
|
|
||||||
item.yl = itemjinri.yl.toFixed(4);
|
|
||||||
item.yearPerCent = calcPercent(item.yearPlan, item.nl);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
dataJinri.value = dataJinri.value.map(item => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
rcwy: formatNumber(item.rcwy),
|
|
||||||
yl: formatNumber(item.yl),
|
|
||||||
nl: formatNumber(item.nl)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// getYearShengchansj(); //再获取今年以来的数据
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function calcPercent(yearJihua, yearShiji) {
|
|
||||||
// 计算进度百分比，避免除数为 0
|
|
||||||
// 确保进度百分比不超过 100
|
|
||||||
let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
|
|
||||||
let shiji = parseFloat(yearShiji);
|
|
||||||
let percent = 0;
|
|
||||||
// 修改原始计算代码
|
|
||||||
if (plan > 0) {
|
|
||||||
percent = (shiji / plan) * 100;
|
|
||||||
percent = Math.min(percent, 100); // 限制最大100%
|
|
||||||
}
|
|
||||||
return parseFloat(percent.toFixed(2)); // 转为数值
|
|
||||||
}
|
|
||||||
|
|
||||||
function sumByOil(records) {
|
|
||||||
// console.log(records);
|
|
||||||
const summaryMap = {};
|
|
||||||
try {
|
|
||||||
records.forEach((record) => {
|
|
||||||
const gas = record.gas;
|
|
||||||
if (!summaryMap[gas]) {
|
|
||||||
// 初始化该 gas 类型的汇总对象
|
|
||||||
summaryMap[gas] = {
|
|
||||||
rcwy: 0,
|
|
||||||
yl: 0,
|
|
||||||
nl: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
|
|
||||||
summaryMap[gas].rcwy += record.rcwy || 0;
|
|
||||||
summaryMap[gas].yl += record.yl || 0;
|
|
||||||
summaryMap[gas].nl += record.nl || 0;
|
|
||||||
});
|
|
||||||
return Object.values(summaryMap);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
// console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 15rpx 0;
|
|
||||||
border-bottom: 1rpx solid #eee;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more::after {
|
|
||||||
content: '';
|
|
||||||
width: 8rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
border-top: 2rpx solid #666;
|
|
||||||
border-right: 2rpx solid #666;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
margin-left: 8rpx;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 鼠标悬停效果 */
|
|
||||||
.more:hover {
|
|
||||||
color: #007aff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 20rpx;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item {
|
|
||||||
flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩 selectedGas formatNumber
|
|
||||||
min-width: 200rpx;
|
|
||||||
max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
max-width: calc(33.33% - 14rpx); // 大屏显示3列
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: #ececec;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 15rpx;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(197, 197, 197, 0.1);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: block;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #0000ff;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
position: relative;
|
|
||||||
height: 20px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: red;
|
|
||||||
/* 保持红色 */
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
||||||
/* 提升可读性 */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<trqSssjVue></trqSssjVue>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import trqSssjVue from './trqSssj';
|
|
||||||
</script>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
@ -1,293 +0,0 @@
|
|||||||
<template>
|
|
||||||
<PageLayout :navbarShow="false">
|
|
||||||
<!-- 标题行 -->
|
|
||||||
<view class="header-row">
|
|
||||||
<view class="title">天然气实时数据</view>
|
|
||||||
<view style="min-width: 200px;">
|
|
||||||
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
|
|
||||||
</cxc-szcx-stationJl-select>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- <button size="mini" @click="getData">连接WebSocket</button> -->
|
|
||||||
|
|
||||||
<view class="container">
|
|
||||||
<view v-for="(item, index) in jlData" :key="index" class="card">
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="titlejl">{{ stationName }}--{{ item.jldname }}</text>
|
|
||||||
<view class="status-circle"
|
|
||||||
:style="{ backgroundColor: item.yxzt==='运行' ? '#4CAF50' : '#F44336' }">
|
|
||||||
{{item.yxzt}}
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="field-list">
|
|
||||||
<!-- 压力 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">压力(MPa)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.yl) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 差压 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">差压(kPa)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.yc) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 温度 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">温度(℃)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.wd) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 瞬时流量 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">瞬时流量(m³/d)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.ssll) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 今日流量 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">今日流量(m³)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.jrl) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 昨日流量 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">昨日流量(m³)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.zrl) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 昨日时间 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">昨日时间(min)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.zrsj) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 今日时间 -->
|
|
||||||
<view class="field-item">
|
|
||||||
<text class="field-label">今日时间(min)</text>
|
|
||||||
<text class="field-value">{{ formatNumber(item.jrsj) || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</PageLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
queryJldZcList,
|
|
||||||
queryJldDataByZc
|
|
||||||
} from '@/api/production'
|
|
||||||
import {
|
|
||||||
formatDate,
|
|
||||||
getDateAfterDays
|
|
||||||
} from '@/utils/dateTime';
|
|
||||||
|
|
||||||
const stationList = ref([])
|
|
||||||
// 控制弹窗显示与隐藏
|
|
||||||
const popupSelect = ref(null);
|
|
||||||
const stationID = ref("")
|
|
||||||
const stationName = ref("")
|
|
||||||
|
|
||||||
const jlData = ref([])
|
|
||||||
|
|
||||||
const sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
|
|
||||||
const jlByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetJlByZc')
|
|
||||||
|
|
||||||
//首先链接的地址要先拿在websocket在线调试去调试是否能连接通 不然下面的操作就不知道错误
|
|
||||||
// 建立websocket
|
|
||||||
function connectSocketInit() {
|
|
||||||
console.log(11, )
|
|
||||||
let userID = '1412198011559055361'
|
|
||||||
// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
|
|
||||||
uni.connectSocket({
|
|
||||||
// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
|
|
||||||
// url: 'wss://'+this.$api.sellerWebsocket+'/'+this.userinfo.id,
|
|
||||||
url: sssjUrl.value + userID,
|
|
||||||
success(data) {
|
|
||||||
console.log(data);
|
|
||||||
console.log('websocket连接成功');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
|
|
||||||
uni.onSocketOpen(function(res) {
|
|
||||||
console.log('WebSocket连接已打开！');
|
|
||||||
});
|
|
||||||
uni.onSocketMessage(function(res) {
|
|
||||||
console.log('收到服务器内容：' + res.data);
|
|
||||||
|
|
||||||
});
|
|
||||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
|
||||||
uni.onSocketClose(function(res) {
|
|
||||||
console.log('WebSocket 已关闭！');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getData() {
|
|
||||||
connectSocketInit()
|
|
||||||
}
|
|
||||||
|
|
||||||
function onChange(e, data) {
|
|
||||||
console.log(2, e, data.value);
|
|
||||||
stationID.value = e
|
|
||||||
stationName.value = data.value.title
|
|
||||||
getScData(); //获取生产数据
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const getScData= ()=>{
|
|
||||||
uni.request({
|
|
||||||
url: jlByzc.value + '?zhanc=' + stationID.value + '&jldLx=0',
|
|
||||||
method: 'GET',
|
|
||||||
success: (res) => {
|
|
||||||
console.log(res)
|
|
||||||
jlData.value = JSON.parse(res.data.result).JlData;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const websock = ref(null);
|
|
||||||
const timer2 = ref(null);
|
|
||||||
// 封装心跳函数
|
|
||||||
const websocketheart = () => {
|
|
||||||
timer2.value = setInterval(() => {
|
|
||||||
if (websock.value && websock.value.readyState === 1) {
|
|
||||||
// 如果连接正常，发送心跳消息
|
|
||||||
// connectSocketInit()
|
|
||||||
}
|
|
||||||
if(stationID.value){
|
|
||||||
getScData();
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
queryJldZcList({
|
|
||||||
pId: '1267633406031953921'
|
|
||||||
}).then((res) => {
|
|
||||||
|
|
||||||
if (res.success) {
|
|
||||||
stationList.value = res.result
|
|
||||||
console.log(1, stationList.value)
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
websocketheart()
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(()=>{ //页面销毁删除定时
|
|
||||||
// 销毁定时器
|
|
||||||
console.log(22222)
|
|
||||||
clearInterval(timer2.value);
|
|
||||||
})
|
|
||||||
|
|
||||||
// 数字格式化
|
|
||||||
const formatNumber = (num) => {
|
|
||||||
let temp = 0;
|
|
||||||
try {
|
|
||||||
temp = parseFloat(num);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
}
|
|
||||||
|
|
||||||
return temp.toFixed(4).replace(/\.?0+$/, '');
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10 10rpx;
|
|
||||||
border-bottom: 1rpx solid #eee;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titlejl {
|
|
||||||
font-size: 20rpx;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0055ff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 5px;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-list {
|
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
/* 允许子元素换行 */
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-item {
|
|
||||||
display: flex;
|
|
||||||
height: 30px;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px 5px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 4px;
|
|
||||||
flex-basis: calc(50%-10px);
|
|
||||||
/* 每个元素占据约一半宽度，减去间隙 */
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 包含内边距和边框 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 当屏幕宽度较小时，每个元素占据整行 */
|
|
||||||
@media (max-width: 200px) {
|
|
||||||
.field-item {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-label {
|
|
||||||
color: #666;
|
|
||||||
font-size: 8px;
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 2px;
|
|
||||||
width: 80px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-value {
|
|
||||||
color: #1890ff;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: right;
|
|
||||||
width: 60px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-circle {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
font-size: 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
25
src/types/uni-pages.d.ts
vendored
25
src/types/uni-pages.d.ts
vendored
@ -19,15 +19,6 @@ interface NavigateToOptions {
|
|||||||
"/pages/sljd/index" |
|
"/pages/sljd/index" |
|
||||||
"/pages/user/people" |
|
"/pages/user/people" |
|
||||||
"/pages/workHome/index" |
|
"/pages/workHome/index" |
|
||||||
"/pages/production/ribaoshuju/rbsjLsxq" |
|
|
||||||
"/pages/production/ribaoshuju/trqRbsj" |
|
|
||||||
"/pages/production/ribaoshuju/yyRbsj" |
|
|
||||||
"/pages/production/shishishuju/aqbjSssj" |
|
|
||||||
"/pages/production/shishishuju/gycsSssj" |
|
|
||||||
"/pages/production/shishishuju/index" |
|
|
||||||
"/pages/production/shishishuju/nyxhSssj" |
|
|
||||||
"/pages/production/shishishuju/trqSssj" |
|
|
||||||
"/pages/production/shishishuju/ysjSssj" |
|
|
||||||
"/pages-home/device-control/office/ALLleader" |
|
"/pages-home/device-control/office/ALLleader" |
|
||||||
"/pages-home/device-control/office/index" |
|
"/pages-home/device-control/office/index" |
|
||||||
"/pages-home/device-control/office/officehomedevice" |
|
"/pages-home/device-control/office/officehomedevice" |
|
||||||
@ -44,8 +35,10 @@ interface NavigateToOptions {
|
|||||||
"/pages-sub/online/online" |
|
"/pages-sub/online/online" |
|
||||||
"/pages-sub/online/onlineCard" |
|
"/pages-sub/online/onlineCard" |
|
||||||
"/pages-sub/online/onlineTable" |
|
"/pages-sub/online/onlineTable" |
|
||||||
|
"/pages-operate/caiwu/index" |
|
||||||
"/pages-operate/file/detail" |
|
"/pages-operate/file/detail" |
|
||||||
"/pages-operate/file/index" |
|
"/pages-operate/file/index" |
|
||||||
|
"/pages-operate/jingying/index" |
|
||||||
"/pages-operate/sc/index" |
|
"/pages-operate/sc/index" |
|
||||||
"/pages-humanResource/absence/add" |
|
"/pages-humanResource/absence/add" |
|
||||||
"/pages-humanResource/absence/detail" |
|
"/pages-humanResource/absence/detail" |
|
||||||
@ -78,7 +71,19 @@ interface NavigateToOptions {
|
|||||||
"/pages-bpm/SuperiorSystem/index" |
|
"/pages-bpm/SuperiorSystem/index" |
|
||||||
"/pages-bpm/unconventional/index" |
|
"/pages-bpm/unconventional/index" |
|
||||||
"/pages-bpm/unconventional/stamp" |
|
"/pages-bpm/unconventional/stamp" |
|
||||||
"/pages-bpm/zbkh/index";
|
"/pages-bpm/zbkh/index" |
|
||||||
|
"/pages-production/ribaoshuju/index" |
|
||||||
|
"/pages-production/ribaoshuju/rbsjLsxq" |
|
||||||
|
"/pages-production/ribaoshuju/trqRbsj" |
|
||||||
|
"/pages-production/ribaoshuju/yyRbsj" |
|
||||||
|
"/pages-production/shishishuju/aqbjSssj" |
|
||||||
|
"/pages-production/shishishuju/gycsSssj" |
|
||||||
|
"/pages-production/shishishuju/index" |
|
||||||
|
"/pages-production/shishishuju/nyxhSssj" |
|
||||||
|
"/pages-production/shishishuju/trqSssj" |
|
||||||
|
"/pages-production/shishishuju/ysjSssj" |
|
||||||
|
"/pages-production/shishishuju/chart/lssjChart" |
|
||||||
|
"/pages-production/shishishuju/chart/sssjChart";
|
||||||
}
|
}
|
||||||
interface RedirectToOptions extends NavigateToOptions {}
|
interface RedirectToOptions extends NavigateToOptions {}
|
||||||
|
|
||||||
|
|||||||
309
vite.config.ts
309
vite.config.ts
@ -23,164 +23,165 @@ import { viteMockServe } from 'vite-plugin-mock'
|
|||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default ({ command, mode }) => {
|
export default ({ command, mode }) => {
|
||||||
// console.log(mode === process.env.NODE_ENV) // true
|
// console.log(mode === process.env.NODE_ENV) // true
|
||||||
|
|
||||||
// mode: 区分生产环境还是开发环境
|
// mode: 区分生产环境还是开发环境
|
||||||
console.log('command, mode -> ', command, mode)
|
console.log('command, mode -> ', command, mode)
|
||||||
// pnpm dev:h5 时得到 => serve development
|
// pnpm dev:h5 时得到 => serve development
|
||||||
// pnpm build:h5 时得到 => build production
|
// pnpm build:h5 时得到 => build production
|
||||||
// pnpm dev:mp-weixin 时得到 => build development (注意区别，command为build)
|
// pnpm dev:mp-weixin 时得到 => build development (注意区别，command为build)
|
||||||
// pnpm build:mp-weixin 时得到 => build production
|
// pnpm build:mp-weixin 时得到 => build production
|
||||||
// pnpm dev:app 时得到 => build development (注意区别，command为build)
|
// pnpm dev:app 时得到 => build development (注意区别，command为build)
|
||||||
// pnpm build:app 时得到 => build production
|
// pnpm build:app 时得到 => build production
|
||||||
// dev 和 build 命令可以分别使用 .env.development 和 .env.production 的环境变量
|
// dev 和 build 命令可以分别使用 .env.development 和 .env.production 的环境变量
|
||||||
|
|
||||||
const { UNI_PLATFORM } = process.env
|
const { UNI_PLATFORM } = process.env
|
||||||
console.log('UNI_PLATFORM -> ', UNI_PLATFORM) // 得到 mp-weixin, h5, app 等
|
console.log('UNI_PLATFORM -> ', UNI_PLATFORM) // 得到 mp-weixin, h5, app 等
|
||||||
|
|
||||||
const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))
|
const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))
|
||||||
const {
|
const {
|
||||||
VITE_APP_PORT,
|
VITE_APP_PORT,
|
||||||
VITE_SERVER_BASEURL,
|
VITE_SERVER_BASEURL,
|
||||||
VITE_DELETE_CONSOLE,
|
VITE_DELETE_CONSOLE,
|
||||||
VITE_SHOW_SOURCEMAP,
|
VITE_SHOW_SOURCEMAP,
|
||||||
VITE_APP_PROXY,
|
VITE_APP_PROXY,
|
||||||
VITE_APP_PROXY_PREFIX,
|
VITE_APP_PROXY_PREFIX,
|
||||||
VITE_USE_MOCK,
|
VITE_USE_MOCK,
|
||||||
WEBAPP
|
WEBAPP
|
||||||
} = env
|
} = env
|
||||||
console.log('环境变量 env -> ', env)
|
console.log('环境变量 env -> ', env)
|
||||||
|
|
||||||
return defineConfig({
|
return defineConfig({
|
||||||
envDir: './env', // 自定义env目录
|
envDir: './env', // 自定义env目录
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
UniPages({
|
UniPages({
|
||||||
exclude: ['**/components/**/**.*'],
|
exclude: ['**/components/**/**.*'],
|
||||||
routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
|
routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
|
||||||
// homePage 通过 vue 文件的 route-block 的type="home"来设定
|
// homePage 通过 vue 文件的 route-block 的type="home"来设定
|
||||||
// pages 目录为 src/pages，分包目录不能配置在pages目录下
|
// pages 目录为 src/pages，分包目录不能配置在pages目录下
|
||||||
subPackages: [
|
subPackages: [
|
||||||
'src/pages-home',
|
'src/pages-home',
|
||||||
'src/pages-message',
|
'src/pages-message',
|
||||||
'src/pages-user',
|
'src/pages-user',
|
||||||
'src/pages-work',
|
'src/pages-work',
|
||||||
'src/pages-sub',
|
'src/pages-sub',
|
||||||
'src/pages-operate',
|
'src/pages-operate',
|
||||||
'src/pages-humanResource',
|
'src/pages-humanResource',
|
||||||
'src/pages-integrated',
|
'src/pages-integrated',
|
||||||
'src/pages-politics',
|
'src/pages-politics',
|
||||||
'src/pages-process',
|
'src/pages-process',
|
||||||
'src/pages-bpm'
|
'src/pages-bpm',
|
||||||
], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
'src/pages-production'
|
||||||
dts: 'src/types/uni-pages.d.ts',
|
], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
||||||
}),
|
dts: 'src/types/uni-pages.d.ts',
|
||||||
UniLayouts(),
|
}),
|
||||||
UniPlatform(),
|
UniLayouts(),
|
||||||
UniManifest(),
|
UniPlatform(),
|
||||||
// UniXXX 需要在 Uni 之前引入
|
UniManifest(),
|
||||||
Uni(),
|
// UniXXX 需要在 Uni 之前引入
|
||||||
{
|
Uni(),
|
||||||
// 临时解决 dcloudio 官方的 @dcloudio/uni-mp-compiler 出现的编译 BUG
|
{
|
||||||
// 参考 github issue: https://github.com/dcloudio/uni-app/issues/4952
|
// 临时解决 dcloudio 官方的 @dcloudio/uni-mp-compiler 出现的编译 BUG
|
||||||
// 自定义插件禁用 vite:vue 插件的 devToolsEnabled，强制编译 vue 模板时 inline 为 true
|
// 参考 github issue: https://github.com/dcloudio/uni-app/issues/4952
|
||||||
name: 'fix-vite-plugin-vue',
|
// 自定义插件禁用 vite:vue 插件的 devToolsEnabled，强制编译 vue 模板时 inline 为 true
|
||||||
configResolved(config) {
|
name: 'fix-vite-plugin-vue',
|
||||||
const plugin = config.plugins.find((p) => p.name === 'vite:vue')
|
configResolved(config) {
|
||||||
if (plugin && plugin.api && plugin.api.options) {
|
const plugin = config.plugins.find((p) => p.name === 'vite:vue')
|
||||||
plugin.api.options.devToolsEnabled = false
|
if (plugin && plugin.api && plugin.api.options) {
|
||||||
}
|
plugin.api.options.devToolsEnabled = false
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
UnoCSS(),
|
},
|
||||||
AutoImport({
|
UnoCSS(),
|
||||||
imports: ['vue', 'uni-app'],
|
AutoImport({
|
||||||
dts: 'src/types/auto-import.d.ts',
|
imports: ['vue', 'uni-app'],
|
||||||
dirs: ['src/hooks'], // 自动导入 hooks
|
dts: 'src/types/auto-import.d.ts',
|
||||||
eslintrc: { enabled: true },
|
dirs: ['src/hooks'], // 自动导入 hooks
|
||||||
vueTemplate: true, // default false
|
eslintrc: { enabled: true },
|
||||||
}),
|
vueTemplate: true, // default false
|
||||||
|
}),
|
||||||
|
|
||||||
ViteRestart({
|
ViteRestart({
|
||||||
// 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置
|
// 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置
|
||||||
restart: ['vite.config.js'],
|
restart: ['vite.config.js'],
|
||||||
}),
|
}),
|
||||||
// h5环境增加 BUILD_TIME 和 BUILD_BRANCH
|
// h5环境增加 BUILD_TIME 和 BUILD_BRANCH
|
||||||
UNI_PLATFORM === 'h5' && {
|
UNI_PLATFORM === 'h5' && {
|
||||||
name: 'html-transform',
|
name: 'html-transform',
|
||||||
transformIndexHtml(html) {
|
transformIndexHtml(html) {
|
||||||
return html.replace('%BUILD_TIME%', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
return html.replace('%BUILD_TIME%', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 打包分析插件，h5 + 生产环境才弹出
|
// 打包分析插件，h5 + 生产环境才弹出
|
||||||
UNI_PLATFORM === 'h5' &&
|
UNI_PLATFORM === 'h5' &&
|
||||||
mode === 'production' &&
|
mode === 'production' &&
|
||||||
visualizer({
|
visualizer({
|
||||||
filename: './node_modules/.cache/visualizer/stats.html',
|
filename: './node_modules/.cache/visualizer/stats.html',
|
||||||
open: true,
|
open: true,
|
||||||
gzipSize: true,
|
gzipSize: true,
|
||||||
brotliSize: true,
|
brotliSize: true,
|
||||||
}),
|
}),
|
||||||
// 只有在 app 平台时才启用 copyNativeRes 插件
|
// 只有在 app 平台时才启用 copyNativeRes 插件
|
||||||
UNI_PLATFORM === 'app' && copyNativeRes(),
|
UNI_PLATFORM === 'app' && copyNativeRes(),
|
||||||
viteMockServe({
|
viteMockServe({
|
||||||
// 指定 mock 文件目录
|
// 指定 mock 文件目录
|
||||||
mockPath: './mock',
|
mockPath: './mock',
|
||||||
// 开发服务器才启用mock数据
|
// 开发服务器才启用mock数据
|
||||||
enable: mode === 'development' && JSON.parse(VITE_USE_MOCK),
|
enable: mode === 'development' && JSON.parse(VITE_USE_MOCK),
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
define: {
|
define: {
|
||||||
__UNI_PLATFORM__: JSON.stringify(UNI_PLATFORM),
|
__UNI_PLATFORM__: JSON.stringify(UNI_PLATFORM),
|
||||||
__VITE_APP_PROXY__: JSON.stringify(VITE_APP_PROXY),
|
__VITE_APP_PROXY__: JSON.stringify(VITE_APP_PROXY),
|
||||||
},
|
},
|
||||||
css: {
|
css: {
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [
|
plugins: [
|
||||||
// autoprefixer({
|
// autoprefixer({
|
||||||
// // 指定目标浏览器
|
// // 指定目标浏览器
|
||||||
// overrideBrowserslist: ['> 1%', 'last 2 versions'],
|
// overrideBrowserslist: ['> 1%', 'last 2 versions'],
|
||||||
// }),
|
// }),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': path.join(process.cwd(), './src'),
|
'@': path.join(process.cwd(), './src'),
|
||||||
'@img': path.join(process.cwd(), './src/static/images'),
|
'@img': path.join(process.cwd(), './src/static/images'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
headers: { //允许跨域by 闵
|
headers: { //允许跨域by 闵
|
||||||
'Access-Control-Allow-Origin': '*'
|
'Access-Control-Allow-Origin': '*'
|
||||||
},
|
},
|
||||||
hmr: true,
|
hmr: true,
|
||||||
port: Number.parseInt(VITE_APP_PORT, 10),
|
port: Number.parseInt(VITE_APP_PORT, 10),
|
||||||
// 仅 H5 端生效，其他端不生效（其他端走build，不走devServer)
|
// 仅 H5 端生效，其他端不生效（其他端走build，不走devServer)
|
||||||
proxy: JSON.parse(VITE_APP_PROXY)
|
proxy: JSON.parse(VITE_APP_PROXY)
|
||||||
? {
|
? {
|
||||||
[VITE_APP_PROXY_PREFIX]: {
|
[VITE_APP_PROXY_PREFIX]: {
|
||||||
target: VITE_SERVER_BASEURL,
|
target: VITE_SERVER_BASEURL,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
// 方便非h5端调试
|
// 方便非h5端调试
|
||||||
sourcemap: VITE_SHOW_SOURCEMAP === 'true', // 默认是false
|
sourcemap: VITE_SHOW_SOURCEMAP === 'true', // 默认是false
|
||||||
target: 'es6',
|
target: 'es6',
|
||||||
// 开发环境不用压缩
|
// 开发环境不用压缩
|
||||||
minify: mode === 'development' ? false : 'terser',
|
minify: mode === 'development' ? false : 'terser',
|
||||||
terserOptions: {
|
terserOptions: {
|
||||||
compress: {
|
compress: {
|
||||||
drop_console: VITE_DELETE_CONSOLE === 'true',
|
drop_console: VITE_DELETE_CONSOLE === 'true',
|
||||||
drop_debugger: true,
|
drop_debugger: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user