修改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>
|
||||
@ -301,7 +301,7 @@
|
||||
|
||||
function goHistory(val) {
|
||||
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 {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
background: #f0f0f0;
|
||||
background: #e2e2e2;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -1,7 +1,50 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '实时数据 ',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<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>
|
||||
|
||||
<script setup>
|
||||
import trqSssjVue from './trqSssj';
|
||||
import dateTimeShow from '@/components/dataTimeShow.vue'
|
||||
|
||||
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',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '生产数据',
|
||||
navigationBarTitleText: '天然气实时数据',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<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>
|
||||
<wd-cell :title="'时间:' + nowDateTime " center>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable
|
||||
|
||||
142
src/pages.json
142
src/pages.json
@ -183,47 +183,6 @@
|
||||
"navigationBarTitleText": "工作台",
|
||||
"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": [
|
||||
@ -384,6 +343,15 @@
|
||||
{
|
||||
"root": "pages-operate",
|
||||
"pages": [
|
||||
{
|
||||
"path": "caiwu/index",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "计划财务 "
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "file/detail",
|
||||
"type": "page",
|
||||
@ -402,6 +370,15 @@
|
||||
"navigationBarTitleText": "公文/通知公告/法律法规/上级制度/厂级制度"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "jingying/index",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "经营考核 "
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sc/index",
|
||||
"type": "page",
|
||||
@ -630,6 +607,89 @@
|
||||
"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>
|
||||
<template>
|
||||
<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>
|
||||
</PageLayout>
|
||||
</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 v-if="current === 1">
|
||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||
<trq-data></trq-data>
|
||||
<yy-data></yy-data>
|
||||
<rb-data></rb-data>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
@ -47,10 +46,10 @@
|
||||
onUnmounted
|
||||
} from 'vue';
|
||||
//、、东风风光的
|
||||
import trqData from '@/pages-production/ribaoshuju/trqRbsj';
|
||||
import yyData from '@/pages-production/ribaoshuju/yyRbsj';
|
||||
import sssjData from '@/pages-production/shishishuju/trqSssj';
|
||||
const items = ref(['油气实时', '油气历史', '管线运行', '安防监控', '设备运行'])
|
||||
|
||||
import rbData from '@/pages-production/ribaoshuju/index';
|
||||
import sssjData from '@/pages-production/shishishuju/index';
|
||||
const items = ref(['实时数据', '日报数据', '安全管理', '工程技术', '仪控设备'])
|
||||
const current = ref(0)
|
||||
const res = wx.getSystemInfoSync();
|
||||
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/user/people" |
|
||||
"/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/index" |
|
||||
"/pages-home/device-control/office/officehomedevice" |
|
||||
@ -44,8 +35,10 @@ interface NavigateToOptions {
|
||||
"/pages-sub/online/online" |
|
||||
"/pages-sub/online/onlineCard" |
|
||||
"/pages-sub/online/onlineTable" |
|
||||
"/pages-operate/caiwu/index" |
|
||||
"/pages-operate/file/detail" |
|
||||
"/pages-operate/file/index" |
|
||||
"/pages-operate/jingying/index" |
|
||||
"/pages-operate/sc/index" |
|
||||
"/pages-humanResource/absence/add" |
|
||||
"/pages-humanResource/absence/detail" |
|
||||
@ -78,7 +71,19 @@ interface NavigateToOptions {
|
||||
"/pages-bpm/SuperiorSystem/index" |
|
||||
"/pages-bpm/unconventional/index" |
|
||||
"/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 {}
|
||||
|
||||
|
||||
307
vite.config.ts
307
vite.config.ts
@ -23,164 +23,165 @@ import { viteMockServe } from 'vite-plugin-mock'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default ({ command, mode }) => {
|
||||
// console.log(mode === process.env.NODE_ENV) // true
|
||||
// console.log(mode === process.env.NODE_ENV) // true
|
||||
|
||||
// mode: 区分生产环境还是开发环境
|
||||
console.log('command, mode -> ', command, mode)
|
||||
// pnpm dev:h5 时得到 => serve development
|
||||
// pnpm build:h5 时得到 => build production
|
||||
// pnpm dev:mp-weixin 时得到 => build development (注意区别，command为build)
|
||||
// pnpm build:mp-weixin 时得到 => build production
|
||||
// pnpm dev:app 时得到 => build development (注意区别，command为build)
|
||||
// pnpm build:app 时得到 => build production
|
||||
// dev 和 build 命令可以分别使用 .env.development 和 .env.production 的环境变量
|
||||
// mode: 区分生产环境还是开发环境
|
||||
console.log('command, mode -> ', command, mode)
|
||||
// pnpm dev:h5 时得到 => serve development
|
||||
// pnpm build:h5 时得到 => build production
|
||||
// pnpm dev:mp-weixin 时得到 => build development (注意区别，command为build)
|
||||
// pnpm build:mp-weixin 时得到 => build production
|
||||
// pnpm dev:app 时得到 => build development (注意区别，command为build)
|
||||
// pnpm build:app 时得到 => build production
|
||||
// dev 和 build 命令可以分别使用 .env.development 和 .env.production 的环境变量
|
||||
|
||||
const { UNI_PLATFORM } = process.env
|
||||
console.log('UNI_PLATFORM -> ', UNI_PLATFORM) // 得到 mp-weixin, h5, app 等
|
||||
const { UNI_PLATFORM } = process.env
|
||||
console.log('UNI_PLATFORM -> ', UNI_PLATFORM) // 得到 mp-weixin, h5, app 等
|
||||
|
||||
const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))
|
||||
const {
|
||||
VITE_APP_PORT,
|
||||
VITE_SERVER_BASEURL,
|
||||
VITE_DELETE_CONSOLE,
|
||||
VITE_SHOW_SOURCEMAP,
|
||||
VITE_APP_PROXY,
|
||||
VITE_APP_PROXY_PREFIX,
|
||||
VITE_USE_MOCK,
|
||||
WEBAPP
|
||||
} = env
|
||||
console.log('环境变量 env -> ', env)
|
||||
const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))
|
||||
const {
|
||||
VITE_APP_PORT,
|
||||
VITE_SERVER_BASEURL,
|
||||
VITE_DELETE_CONSOLE,
|
||||
VITE_SHOW_SOURCEMAP,
|
||||
VITE_APP_PROXY,
|
||||
VITE_APP_PROXY_PREFIX,
|
||||
VITE_USE_MOCK,
|
||||
WEBAPP
|
||||
} = env
|
||||
console.log('环境变量 env -> ', env)
|
||||
|
||||
return defineConfig({
|
||||
envDir: './env', // 自定义env目录
|
||||
return defineConfig({
|
||||
envDir: './env', // 自定义env目录
|
||||
|
||||
plugins: [
|
||||
UniPages({
|
||||
exclude: ['**/components/**/**.*'],
|
||||
routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
|
||||
// homePage 通过 vue 文件的 route-block 的type="home"来设定
|
||||
// pages 目录为 src/pages，分包目录不能配置在pages目录下
|
||||
subPackages: [
|
||||
'src/pages-home',
|
||||
'src/pages-message',
|
||||
'src/pages-user',
|
||||
'src/pages-work',
|
||||
'src/pages-sub',
|
||||
'src/pages-operate',
|
||||
'src/pages-humanResource',
|
||||
'src/pages-integrated',
|
||||
'src/pages-politics',
|
||||
'src/pages-process',
|
||||
'src/pages-bpm'
|
||||
], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
||||
dts: 'src/types/uni-pages.d.ts',
|
||||
}),
|
||||
UniLayouts(),
|
||||
UniPlatform(),
|
||||
UniManifest(),
|
||||
// UniXXX 需要在 Uni 之前引入
|
||||
Uni(),
|
||||
{
|
||||
// 临时解决 dcloudio 官方的 @dcloudio/uni-mp-compiler 出现的编译 BUG
|
||||
// 参考 github issue: https://github.com/dcloudio/uni-app/issues/4952
|
||||
// 自定义插件禁用 vite:vue 插件的 devToolsEnabled，强制编译 vue 模板时 inline 为 true
|
||||
name: 'fix-vite-plugin-vue',
|
||||
configResolved(config) {
|
||||
const plugin = config.plugins.find((p) => p.name === 'vite:vue')
|
||||
if (plugin && plugin.api && plugin.api.options) {
|
||||
plugin.api.options.devToolsEnabled = false
|
||||
}
|
||||
},
|
||||
},
|
||||
UnoCSS(),
|
||||
AutoImport({
|
||||
imports: ['vue', 'uni-app'],
|
||||
dts: 'src/types/auto-import.d.ts',
|
||||
dirs: ['src/hooks'], // 自动导入 hooks
|
||||
eslintrc: { enabled: true },
|
||||
vueTemplate: true, // default false
|
||||
}),
|
||||
plugins: [
|
||||
UniPages({
|
||||
exclude: ['**/components/**/**.*'],
|
||||
routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
|
||||
// homePage 通过 vue 文件的 route-block 的type="home"来设定
|
||||
// pages 目录为 src/pages，分包目录不能配置在pages目录下
|
||||
subPackages: [
|
||||
'src/pages-home',
|
||||
'src/pages-message',
|
||||
'src/pages-user',
|
||||
'src/pages-work',
|
||||
'src/pages-sub',
|
||||
'src/pages-operate',
|
||||
'src/pages-humanResource',
|
||||
'src/pages-integrated',
|
||||
'src/pages-politics',
|
||||
'src/pages-process',
|
||||
'src/pages-bpm',
|
||||
'src/pages-production'
|
||||
], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
||||
dts: 'src/types/uni-pages.d.ts',
|
||||
}),
|
||||
UniLayouts(),
|
||||
UniPlatform(),
|
||||
UniManifest(),
|
||||
// UniXXX 需要在 Uni 之前引入
|
||||
Uni(),
|
||||
{
|
||||
// 临时解决 dcloudio 官方的 @dcloudio/uni-mp-compiler 出现的编译 BUG
|
||||
// 参考 github issue: https://github.com/dcloudio/uni-app/issues/4952
|
||||
// 自定义插件禁用 vite:vue 插件的 devToolsEnabled，强制编译 vue 模板时 inline 为 true
|
||||
name: 'fix-vite-plugin-vue',
|
||||
configResolved(config) {
|
||||
const plugin = config.plugins.find((p) => p.name === 'vite:vue')
|
||||
if (plugin && plugin.api && plugin.api.options) {
|
||||
plugin.api.options.devToolsEnabled = false
|
||||
}
|
||||
},
|
||||
},
|
||||
UnoCSS(),
|
||||
AutoImport({
|
||||
imports: ['vue', 'uni-app'],
|
||||
dts: 'src/types/auto-import.d.ts',
|
||||
dirs: ['src/hooks'], // 自动导入 hooks
|
||||
eslintrc: { enabled: true },
|
||||
vueTemplate: true, // default false
|
||||
}),
|
||||
|
||||
ViteRestart({
|
||||
// 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置
|
||||
restart: ['vite.config.js'],
|
||||
}),
|
||||
// h5环境增加 BUILD_TIME 和 BUILD_BRANCH
|
||||
UNI_PLATFORM === 'h5' && {
|
||||
name: 'html-transform',
|
||||
transformIndexHtml(html) {
|
||||
return html.replace('%BUILD_TIME%', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
||||
},
|
||||
},
|
||||
// 打包分析插件，h5 + 生产环境才弹出
|
||||
UNI_PLATFORM === 'h5' &&
|
||||
mode === 'production' &&
|
||||
visualizer({
|
||||
filename: './node_modules/.cache/visualizer/stats.html',
|
||||
open: true,
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
// 只有在 app 平台时才启用 copyNativeRes 插件
|
||||
UNI_PLATFORM === 'app' && copyNativeRes(),
|
||||
viteMockServe({
|
||||
// 指定 mock 文件目录
|
||||
mockPath: './mock',
|
||||
// 开发服务器才启用mock数据
|
||||
enable: mode === 'development' && JSON.parse(VITE_USE_MOCK),
|
||||
}),
|
||||
],
|
||||
define: {
|
||||
__UNI_PLATFORM__: JSON.stringify(UNI_PLATFORM),
|
||||
__VITE_APP_PROXY__: JSON.stringify(VITE_APP_PROXY),
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
// autoprefixer({
|
||||
// // 指定目标浏览器
|
||||
// overrideBrowserslist: ['> 1%', 'last 2 versions'],
|
||||
// }),
|
||||
],
|
||||
},
|
||||
},
|
||||
ViteRestart({
|
||||
// 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置
|
||||
restart: ['vite.config.js'],
|
||||
}),
|
||||
// h5环境增加 BUILD_TIME 和 BUILD_BRANCH
|
||||
UNI_PLATFORM === 'h5' && {
|
||||
name: 'html-transform',
|
||||
transformIndexHtml(html) {
|
||||
return html.replace('%BUILD_TIME%', dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
||||
},
|
||||
},
|
||||
// 打包分析插件，h5 + 生产环境才弹出
|
||||
UNI_PLATFORM === 'h5' &&
|
||||
mode === 'production' &&
|
||||
visualizer({
|
||||
filename: './node_modules/.cache/visualizer/stats.html',
|
||||
open: true,
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
// 只有在 app 平台时才启用 copyNativeRes 插件
|
||||
UNI_PLATFORM === 'app' && copyNativeRes(),
|
||||
viteMockServe({
|
||||
// 指定 mock 文件目录
|
||||
mockPath: './mock',
|
||||
// 开发服务器才启用mock数据
|
||||
enable: mode === 'development' && JSON.parse(VITE_USE_MOCK),
|
||||
}),
|
||||
],
|
||||
define: {
|
||||
__UNI_PLATFORM__: JSON.stringify(UNI_PLATFORM),
|
||||
__VITE_APP_PROXY__: JSON.stringify(VITE_APP_PROXY),
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
// autoprefixer({
|
||||
// // 指定目标浏览器
|
||||
// overrideBrowserslist: ['> 1%', 'last 2 versions'],
|
||||
// }),
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.join(process.cwd(), './src'),
|
||||
'@img': path.join(process.cwd(), './src/static/images'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
headers: { //允许跨域by 闵
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
hmr: true,
|
||||
port: Number.parseInt(VITE_APP_PORT, 10),
|
||||
// 仅 H5 端生效，其他端不生效（其他端走build，不走devServer)
|
||||
proxy: JSON.parse(VITE_APP_PROXY)
|
||||
? {
|
||||
[VITE_APP_PROXY_PREFIX]: {
|
||||
target: VITE_SERVER_BASEURL,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
build: {
|
||||
// 方便非h5端调试
|
||||
sourcemap: VITE_SHOW_SOURCEMAP === 'true', // 默认是false
|
||||
target: 'es6',
|
||||
// 开发环境不用压缩
|
||||
minify: mode === 'development' ? false : 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: VITE_DELETE_CONSOLE === 'true',
|
||||
drop_debugger: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.join(process.cwd(), './src'),
|
||||
'@img': path.join(process.cwd(), './src/static/images'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
headers: { //允许跨域by 闵
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
hmr: true,
|
||||
port: Number.parseInt(VITE_APP_PORT, 10),
|
||||
// 仅 H5 端生效，其他端不生效（其他端走build，不走devServer)
|
||||
proxy: JSON.parse(VITE_APP_PROXY)
|
||||
? {
|
||||
[VITE_APP_PROXY_PREFIX]: {
|
||||
target: VITE_SERVER_BASEURL,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
build: {
|
||||
// 方便非h5端调试
|
||||
sourcemap: VITE_SHOW_SOURCEMAP === 'true', // 默认是false
|
||||
target: 'es6',
|
||||
// 开发环境不用压缩
|
||||
minify: mode === 'development' ? false : 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: VITE_DELETE_CONSOLE === 'true',
|
||||
drop_debugger: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user