Merge remote-tracking branch 'remotes/origin/master' into minJeecg
This commit is contained in:
commit
cab2794040
@ -6,169 +6,169 @@ import { loadEnv } from 'vite'
|
||||
// 获取环境变量的范例
|
||||
const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), 'env'))
|
||||
const {
|
||||
VITE_APP_TITLE,
|
||||
VITE_UNI_APPID,
|
||||
VITE_WX_APPID,
|
||||
VITE_APP_PUBLIC_BASE,
|
||||
VITE_FALLBACK_LOCALE,
|
||||
VITE_APP_TITLE,
|
||||
VITE_UNI_APPID,
|
||||
VITE_WX_APPID,
|
||||
VITE_APP_PUBLIC_BASE,
|
||||
VITE_FALLBACK_LOCALE,
|
||||
} = env
|
||||
|
||||
export default defineManifestConfig({
|
||||
name: VITE_APP_TITLE,
|
||||
appid: VITE_UNI_APPID,
|
||||
description: '',
|
||||
versionName: '2.2.0',
|
||||
versionCode: '20250903',
|
||||
transformPx: false,
|
||||
locale: VITE_FALLBACK_LOCALE, // 'zh-Hans'
|
||||
/* 5+App特有相关 */
|
||||
'app-plus': {
|
||||
usingComponents: true,
|
||||
nvueStyleCompiler: 'uni-app',
|
||||
compilerVersion: 3,
|
||||
android: {
|
||||
webView: {
|
||||
domStorageEnabled: true,
|
||||
databaseEnabled: true,
|
||||
allowFileAccess: true
|
||||
}
|
||||
name: VITE_APP_TITLE,
|
||||
appid: VITE_UNI_APPID,
|
||||
description: '',
|
||||
versionName: '2.3.0',
|
||||
versionCode: '202509011',
|
||||
transformPx: false,
|
||||
locale: VITE_FALLBACK_LOCALE, // 'zh-Hans'
|
||||
/* 5+App特有相关 */
|
||||
'app-plus': {
|
||||
usingComponents: true,
|
||||
nvueStyleCompiler: 'uni-app',
|
||||
compilerVersion: 3,
|
||||
android: {
|
||||
webView: {
|
||||
domStorageEnabled: true,
|
||||
databaseEnabled: true,
|
||||
allowFileAccess: true
|
||||
}
|
||||
},
|
||||
compatible: {
|
||||
ignoreVersion: true,
|
||||
},
|
||||
webview: {
|
||||
debug: true,
|
||||
crossDomain: true // 允许跨域通信
|
||||
},
|
||||
splashscreen: {
|
||||
alwaysShowBeforeRender: true,
|
||||
waiting: true,
|
||||
autoclose: true,
|
||||
delay: 0,
|
||||
},
|
||||
/* 模块配置 */
|
||||
modules: {
|
||||
Maps: {},
|
||||
Messaging: {},
|
||||
Camera: {},
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
distribute: {
|
||||
/* android打包配置 */
|
||||
android: {
|
||||
minSdkVersion: 26,
|
||||
targetSdkVersion: 30,
|
||||
abiFilters: ['armeabi-v7a', 'arm64-v8a'],
|
||||
permissions: [
|
||||
'<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
|
||||
'<uses-permission android:name="android.permission.VIBRATE"/>',
|
||||
'<uses-permission android:name="android.permission.READ_LOGS"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
|
||||
'<uses-feature android:name="android.hardware.camera.autofocus"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CAMERA"/>',
|
||||
'<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
|
||||
'<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.WAKE_LOCK"/>',
|
||||
'<uses-permission android:name="android.permission.FLASHLIGHT"/>',
|
||||
'<uses-feature android:name="android.hardware.camera"/>',
|
||||
'<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
|
||||
],
|
||||
// app外连接访问 by 闵
|
||||
schemes: "szcxapp"
|
||||
},
|
||||
/* ios打包配置 */
|
||||
ios: {},
|
||||
/* SDK配置 */
|
||||
sdkConfigs: {
|
||||
maps: {
|
||||
amap: {
|
||||
name: 'amap_15931993294Bqxlq8EgG',
|
||||
appkey_ios: 'c913e46ffdf548ebc56ac1cf4d883e7e',
|
||||
appkey_android: 'c913e46ffdf548ebc56ac1cf4d883e7e',
|
||||
},
|
||||
},
|
||||
},
|
||||
/* 图标配置 */
|
||||
icons: {
|
||||
android: {
|
||||
hdpi: 'src/static/app/icons/72x72.png',
|
||||
xhdpi: 'src/static/app/icons/96x96.png',
|
||||
xxhdpi: 'src/static/app/icons/144x144.png',
|
||||
xxxhdpi: 'src/static/app/icons/192x192.png',
|
||||
},
|
||||
ios: {
|
||||
appstore: 'src/static/app/icons/1024x1024.png',
|
||||
ipad: {
|
||||
app: 'src/static/app/icons/76x76.png',
|
||||
'app@2x': 'src/static/app/icons/152x152.png',
|
||||
notification: 'src/static/app/icons/20x20.png',
|
||||
'notification@2x': 'src/static/app/icons/40x40.png',
|
||||
'proapp@2x': 'src/static/app/icons/167x167.png',
|
||||
settings: 'src/static/app/icons/29x29.png',
|
||||
'settings@2x': 'src/static/app/icons/58x58.png',
|
||||
spotlight: 'src/static/app/icons/40x40.png',
|
||||
'spotlight@2x': 'src/static/app/icons/80x80.png',
|
||||
},
|
||||
iphone: {
|
||||
'app@2x': 'src/static/app/icons/120x120.png',
|
||||
'app@3x': 'src/static/app/icons/180x180.png',
|
||||
'notification@2x': 'src/static/app/icons/40x40.png',
|
||||
'notification@3x': 'src/static/app/icons/60x60.png',
|
||||
'settings@2x': 'src/static/app/icons/58x58.png',
|
||||
'settings@3x': 'src/static/app/icons/87x87.png',
|
||||
'spotlight@2x': 'src/static/app/icons/80x80.png',
|
||||
'spotlight@3x': 'src/static/app/icons/120x120.png',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
compatible: {
|
||||
ignoreVersion: true,
|
||||
},
|
||||
webview: {
|
||||
debug: true,
|
||||
crossDomain: true // 允许跨域通信
|
||||
/* 快应用特有相关 */
|
||||
quickapp: {},
|
||||
/* 小程序特有相关 */
|
||||
'mp-weixin': {
|
||||
appid: VITE_WX_APPID,
|
||||
setting: {
|
||||
urlCheck: false,
|
||||
minified: true
|
||||
},
|
||||
usingComponents: true,
|
||||
// __usePrivacyCheck__: true,
|
||||
},
|
||||
splashscreen: {
|
||||
alwaysShowBeforeRender: true,
|
||||
waiting: true,
|
||||
autoclose: true,
|
||||
delay: 0,
|
||||
},
|
||||
/* 模块配置 */
|
||||
modules: {
|
||||
Maps: {},
|
||||
Messaging: {},
|
||||
Camera: {},
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
distribute: {
|
||||
/* android打包配置 */
|
||||
android: {
|
||||
minSdkVersion: 26,
|
||||
targetSdkVersion: 30,
|
||||
abiFilters: ['armeabi-v7a', 'arm64-v8a'],
|
||||
permissions: [
|
||||
'<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
|
||||
'<uses-permission android:name="android.permission.VIBRATE"/>',
|
||||
'<uses-permission android:name="android.permission.READ_LOGS"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
|
||||
'<uses-feature android:name="android.hardware.camera.autofocus"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CAMERA"/>',
|
||||
'<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
|
||||
'<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.WAKE_LOCK"/>',
|
||||
'<uses-permission android:name="android.permission.FLASHLIGHT"/>',
|
||||
'<uses-feature android:name="android.hardware.camera"/>',
|
||||
'<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
|
||||
],
|
||||
// app外连接访问 by 闵
|
||||
schemes : "szcxapp"
|
||||
},
|
||||
/* ios打包配置 */
|
||||
ios: {},
|
||||
/* SDK配置 */
|
||||
sdkConfigs: {
|
||||
maps: {
|
||||
amap: {
|
||||
name: 'amap_15931993294Bqxlq8EgG',
|
||||
appkey_ios: 'c913e46ffdf548ebc56ac1cf4d883e7e',
|
||||
appkey_android: 'c913e46ffdf548ebc56ac1cf4d883e7e',
|
||||
},
|
||||
},
|
||||
},
|
||||
/* 图标配置 */
|
||||
icons: {
|
||||
android: {
|
||||
hdpi: 'src/static/app/icons/72x72.png',
|
||||
xhdpi: 'src/static/app/icons/96x96.png',
|
||||
xxhdpi: 'src/static/app/icons/144x144.png',
|
||||
xxxhdpi: 'src/static/app/icons/192x192.png',
|
||||
},
|
||||
ios: {
|
||||
appstore: 'src/static/app/icons/1024x1024.png',
|
||||
ipad: {
|
||||
app: 'src/static/app/icons/76x76.png',
|
||||
'app@2x': 'src/static/app/icons/152x152.png',
|
||||
notification: 'src/static/app/icons/20x20.png',
|
||||
'notification@2x': 'src/static/app/icons/40x40.png',
|
||||
'proapp@2x': 'src/static/app/icons/167x167.png',
|
||||
settings: 'src/static/app/icons/29x29.png',
|
||||
'settings@2x': 'src/static/app/icons/58x58.png',
|
||||
spotlight: 'src/static/app/icons/40x40.png',
|
||||
'spotlight@2x': 'src/static/app/icons/80x80.png',
|
||||
},
|
||||
iphone: {
|
||||
'app@2x': 'src/static/app/icons/120x120.png',
|
||||
'app@3x': 'src/static/app/icons/180x180.png',
|
||||
'notification@2x': 'src/static/app/icons/40x40.png',
|
||||
'notification@3x': 'src/static/app/icons/60x60.png',
|
||||
'settings@2x': 'src/static/app/icons/58x58.png',
|
||||
'settings@3x': 'src/static/app/icons/87x87.png',
|
||||
'spotlight@2x': 'src/static/app/icons/80x80.png',
|
||||
'spotlight@3x': 'src/static/app/icons/120x120.png',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
quickapp: {},
|
||||
/* 小程序特有相关 */
|
||||
'mp-weixin': {
|
||||
appid: VITE_WX_APPID,
|
||||
setting: {
|
||||
urlCheck: false,
|
||||
minified: true
|
||||
},
|
||||
usingComponents: true,
|
||||
// __usePrivacyCheck__: true,
|
||||
},
|
||||
'mp-alipay': {
|
||||
usingComponents: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
'mp-baidu': {
|
||||
usingComponents: true,
|
||||
},
|
||||
'mp-toutiao': {
|
||||
usingComponents: true,
|
||||
},
|
||||
h5: {
|
||||
router: {
|
||||
base: VITE_APP_PUBLIC_BASE,
|
||||
},
|
||||
sdkConfigs: {
|
||||
maps: {
|
||||
amap: {
|
||||
key: '21f194a0d33197f874f7bbdd198419be',
|
||||
securityJsCode: 'a46b425f31a4de445b2966d998fba851',
|
||||
serviceHost: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'app-harmony': {
|
||||
distribute: {
|
||||
bundleName: 'uniapp.demo.test',
|
||||
},
|
||||
},
|
||||
uniStatistics: {
|
||||
enable: false,
|
||||
},
|
||||
vueVersion: '3',
|
||||
})
|
||||
'mp-alipay': {
|
||||
usingComponents: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
'mp-baidu': {
|
||||
usingComponents: true,
|
||||
},
|
||||
'mp-toutiao': {
|
||||
usingComponents: true,
|
||||
},
|
||||
h5: {
|
||||
router: {
|
||||
base: VITE_APP_PUBLIC_BASE,
|
||||
},
|
||||
sdkConfigs: {
|
||||
maps: {
|
||||
amap: {
|
||||
key: '21f194a0d33197f874f7bbdd198419be',
|
||||
securityJsCode: 'a46b425f31a4de445b2966d998fba851',
|
||||
serviceHost: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'app-harmony': {
|
||||
distribute: {
|
||||
bundleName: 'uniapp.demo.test',
|
||||
},
|
||||
},
|
||||
uniStatistics: {
|
||||
enable: false,
|
||||
},
|
||||
vueVersion: '3',
|
||||
})
|
||||
@ -5,6 +5,7 @@ export function listApi(config : object) {
|
||||
return http({
|
||||
url: '/cxc_rlzy.zb/cxcRlzyZb/list',
|
||||
method: 'GET',
|
||||
timeout: 5000,
|
||||
data: config
|
||||
})
|
||||
}
|
||||
|
||||
@ -48,4 +48,20 @@ export function queryJldDataByZc(params : object) { // 获取站场计量点实
|
||||
method: 'GET',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
export function queryJldDataByJldID(params : object) { // 获取计量点五分钟实时采集的历史数据
|
||||
return http({
|
||||
url: 'http://10.75.166.6:9999/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId',
|
||||
method: 'GET',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
export function queryJldRbDataByJldID(params : object) { // 获取计量点日报数据
|
||||
return http({
|
||||
url: '/tbqr/cxcScdtRbTbqr/listJldZongHe',
|
||||
method: 'GET',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
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>
|
||||
@ -2,8 +2,8 @@
|
||||
"name": "数智产销",
|
||||
"appid": "__UNI__9F097F0",
|
||||
"description": "",
|
||||
"versionName": "2.2.0",
|
||||
"versionCode": "20250903",
|
||||
"versionName": "2.3.0",
|
||||
"versionCode": "202509011",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<PageLayout :navbarShow="false">
|
||||
<wd-card style="margin: 10px;" id="top1">
|
||||
<wd-card style="margin: 10px;padding: 10px;" id="top1">
|
||||
<wd-row>
|
||||
<wd-col :span="24"><uni-title title="所属单位" align="left" type="h5"></uni-title></wd-col>
|
||||
</wd-row>
|
||||
@ -16,11 +16,12 @@
|
||||
</wd-row>
|
||||
<wd-row>
|
||||
<wd-col :span="12">
|
||||
<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="getList" @clear="getList" />
|
||||
<wd-input v-model="realname" clearable placeholder="姓名模糊查询" @change="getList"
|
||||
@clear="getList"></wd-input>
|
||||
</wd-col>
|
||||
<wd-col :span="12">
|
||||
<uni-easyinput v-model="contractNumber" placeholder="劳动合同号模糊查询" @change="getList"
|
||||
@clear="getList" />
|
||||
<wd-input v-model="contractNumber" clearable placeholder="劳动合同号模糊查询" @change="getList"
|
||||
@clear="getList"></wd-input>
|
||||
</wd-col>
|
||||
</wd-row>
|
||||
</wd-card>
|
||||
|
||||
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>
|
||||
203
src/pages-production/shishishuju/chart/lssjChart.vue
Normal file
203
src/pages-production/shishishuju/chart/lssjChart.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '历史数据图表',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<PageLayout :navbarShow="false" class="page-layout">
|
||||
<view style="color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;">
|
||||
<wd-text :text="jldData.jldname+ '日报数据'" style="color: blue;font-size:18px;"></wd-text>
|
||||
{{startTime}}
|
||||
</view>
|
||||
<view>
|
||||
<uni-datetime-picker type="daterange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间">
|
||||
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
<view style="text-align: center;padding: 5px;">
|
||||
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleForward">上一月</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleThis">本月</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleNext">后一月</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleQuery">查询数据</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>
|
||||
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view direction="vertical" style="height: 200px;">
|
||||
<wd-table :data="chartData" height="200px">
|
||||
<wd-table-col prop="scrq" label="日期" align="center"></wd-table-col>
|
||||
<wd-table-col prop="jldname" label="计量点名称" align="center"></wd-table-col>
|
||||
<wd-table-col prop="ljql" label="流量(m³)" align="center">
|
||||
</wd-table-col>
|
||||
</wd-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="drawLineFlag">
|
||||
<cxc-szcx-multiLineChart :data-list="chartData" x-field="scrq"
|
||||
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
||||
</view>
|
||||
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
queryJldRbDataByJldID
|
||||
} from '@/api/production'
|
||||
import {
|
||||
formatDate
|
||||
} from '@/utils/dateTime.ts';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
nextTick,
|
||||
watchEffect,
|
||||
onUnmounted,
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const lineFields = ref([
|
||||
|
||||
{
|
||||
name: '日流量',
|
||||
field: 'ljql',
|
||||
min: '0',
|
||||
max: '500000',
|
||||
unit: '10^4m³'
|
||||
}
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
jldData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const chartData = ref([])
|
||||
const drawLineFlag = ref(false)
|
||||
|
||||
function handleQuery() {
|
||||
const dwmc = props.jldData.qu;
|
||||
const zcmc = props.jldData.zhan;
|
||||
const jldmc = props.jldData.jldname;
|
||||
console.log(dwmc, zcmc, jldmc)
|
||||
queryJldRbDataByJldID({
|
||||
fenzu: 'a.scrq',
|
||||
dwmc: dwmc,
|
||||
zcmc: zcmc,
|
||||
jldname: jldmc,
|
||||
startTime: startTime.value,
|
||||
endTime: endTime.value
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
chartData.value = res.result
|
||||
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
function handleDrawLine() {
|
||||
drawLineFlag.value = true
|
||||
}
|
||||
// 前一天 - 以当前选择的起始日期为基准计算
|
||||
function handleForward() {
|
||||
const now = new Date(startTime.value);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth();
|
||||
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
|
||||
startTime.value = formatDate(firstDay, "YYYY-MM-DD");
|
||||
endTime.value = formatDate(lastDay, "YYYY-MM-DD");
|
||||
|
||||
lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
|
||||
getTime(); // 触发时间变更事件
|
||||
}
|
||||
|
||||
// 本月
|
||||
function handleThis() {
|
||||
|
||||
lssjTimeRange.value = getDefaultTimeRange()
|
||||
getTime(); // 触发时间变更事件
|
||||
}
|
||||
|
||||
// 后一天
|
||||
function handleNext() {
|
||||
const now = new Date(startTime.value);
|
||||
now.setMonth(now.getMonth() + 1);
|
||||
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth();
|
||||
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
startTime.value = formatDate(firstDay, "YYYY-MM-DD");
|
||||
endTime.value = formatDate(lastDay, "YYYY-MM-DD");
|
||||
|
||||
lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
|
||||
getTime(); // 触发时间变更事件
|
||||
}
|
||||
|
||||
// 获取指定日期偏移的时间范围(每天8:00至次日7:59)
|
||||
const getDefaultTimeRange = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth();
|
||||
|
||||
// 当月第一天
|
||||
const start = new Date(year, month, 1);
|
||||
// 当月最后一天
|
||||
const end = new Date(year, month + 1, 0);
|
||||
|
||||
// 格式化时间字符串
|
||||
const formattedStart = formatDate(start, 'YYYY-MM-DD');
|
||||
const formattedEnd = formatDate(end, 'YYYY-MM-DD');
|
||||
|
||||
// 更新响应式变量
|
||||
startTime.value = formattedStart;
|
||||
endTime.value = formattedEnd;
|
||||
|
||||
return [formattedStart, formattedEnd];
|
||||
};
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// 设置默认时间范围 需要延时等控件渲染好
|
||||
setTimeout(() => {
|
||||
lssjTimeRange.value = getDefaultTimeRange(0)
|
||||
}, 500)
|
||||
|
||||
console.log(lssjTimeRange.value);
|
||||
})
|
||||
const startTime = ref('')
|
||||
const endTime = ref('')
|
||||
const lssjTimeRange = ref([])
|
||||
|
||||
|
||||
// 时间选择变化
|
||||
const getTime = (e) => {
|
||||
if (e && e.length === 2) {
|
||||
startTime.value = formatDate(e[0], 'YYYY-MM-DD')
|
||||
endTime.value = formatDate(e[1], 'YYYY-MM-DD')
|
||||
// updateChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
231
src/pages-production/shishishuju/chart/sssjChart.vue
Normal file
231
src/pages-production/shishishuju/chart/sssjChart.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '历史数据图表',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<PageLayout :navbarShow="false" class="page-layout">
|
||||
<view style="color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;">
|
||||
<wd-text :text="jldData.jldname+ '实时趋势'" style="color: blue;font-size:18px;"></wd-text>
|
||||
</view>
|
||||
<view>
|
||||
<uni-datetime-picker type="datetimerange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" />
|
||||
</view>
|
||||
<view style="text-align: center;padding: 5px;">
|
||||
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleForward">前一天</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleNext">后一天</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleQuery">查询数据</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>
|
||||
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view direction="vertical" style="height: 200px;">
|
||||
<wd-table :data="chartData" height="200px">
|
||||
<wd-table-col prop="createTime" label="日期" align="center"></wd-table-col>
|
||||
<wd-table-col prop="jldName" label="计量点名称" align="center"></wd-table-col>
|
||||
<wd-table-col prop="yl" label="压力(MPa)" align="center"></wd-table-col>
|
||||
<wd-table-col prop="wd" label="温度(℃)" align="center"></wd-table-col>
|
||||
<wd-table-col prop="yc" label="差压(kPa)" align="center"></wd-table-col>
|
||||
<wd-table-col prop="ssll" label="瞬时流量(m³/d)" align="center">
|
||||
</wd-table-col>
|
||||
<wd-table-col prop="jrl" label="今日流量(m³)" align="center">
|
||||
</wd-table-col>
|
||||
</wd-table>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="drawLineFlag">
|
||||
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime"
|
||||
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
||||
</view>
|
||||
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
queryJldDataByJldID
|
||||
} from '@/api/production'
|
||||
import {
|
||||
formatDate
|
||||
} from '@/utils/dateTime.ts';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
nextTick,
|
||||
watchEffect,
|
||||
onUnmounted,
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const lineFields = ref([{
|
||||
name: '压力',
|
||||
field: 'yl',
|
||||
min: '0',
|
||||
max: '2',
|
||||
unit: 'MPa'
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
field: 'wd',
|
||||
min: '-10',
|
||||
max: '40',
|
||||
unit: '℃'
|
||||
},
|
||||
{
|
||||
name: '差压',
|
||||
field: 'yc',
|
||||
min: '0',
|
||||
max: '60',
|
||||
unit: 'kPa'
|
||||
},
|
||||
{
|
||||
name: '瞬时流量',
|
||||
field: 'ssll',
|
||||
min: '0',
|
||||
max: '50000',
|
||||
unit: 'm³/d'
|
||||
},
|
||||
{
|
||||
name: '今日流量',
|
||||
field: 'jrl',
|
||||
min: '0',
|
||||
max: '50000',
|
||||
unit: 'm³'
|
||||
}
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
jldData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const chartData = ref([])
|
||||
const drawLineFlag = ref(false)
|
||||
|
||||
function handleQuery() {
|
||||
|
||||
const jldid = props.jldData.id;
|
||||
queryJldDataByJldID({
|
||||
jldId: jldid,
|
||||
startTime: startTime.value,
|
||||
endTime: endTime.value
|
||||
}).then(res => {
|
||||
chartData.value = JSON.parse(res.result)
|
||||
|
||||
chartData.value.forEach(item => {
|
||||
item.createTime = formatDate(item.createTime, "YYYY-MM-DD HH:mm ss")
|
||||
})
|
||||
console.log(123, chartData.value)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
function handleDrawLine() {
|
||||
drawLineFlag.value = true
|
||||
}
|
||||
// 前一天 - 以当前选择的起始日期为基准计算
|
||||
function handleForward() {
|
||||
// 使用当前选择的开始时间作为基准,而不是系统当前时间
|
||||
lssjTimeRange.value = getDefaultTimeRange(-1);
|
||||
}
|
||||
|
||||
// 后一天
|
||||
function handleNext() {
|
||||
// 获取当前选择的开始时间
|
||||
const currentStart = new Date(startTime.value);
|
||||
// 获取今天8点的时间对象
|
||||
const today8AM = new Date();
|
||||
today8AM.setHours(8, 0, 0, 0);
|
||||
|
||||
// 允许切换到今天及之前的日期范围
|
||||
if (currentStart < today8AM || isSameDay(currentStart, today8AM)) {
|
||||
lssjTimeRange.value = getDefaultTimeRange(1);
|
||||
} else {
|
||||
// 可添加提示:已经是最新数据
|
||||
uni.showToast({
|
||||
title: '已是最新数据',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取指定日期偏移的时间范围(每天8:00至次日7:59)
|
||||
const getDefaultTimeRange = (days) => {
|
||||
// 防止原日期对象被污染,使用当前选择的开始时间作为基准
|
||||
var baseDate;
|
||||
if (startTime.value && new Date(startTime.value).toString() !== 'Invalid Date') {
|
||||
baseDate = new Date(startTime.value);
|
||||
} else {
|
||||
// 如果选择的时间无效,则使用当前时间作为 fallback
|
||||
baseDate = new Date();
|
||||
}
|
||||
|
||||
// 计算目标日期(基础日期 + 偏移天数)
|
||||
const targetDate = new Date(baseDate);
|
||||
targetDate.setDate(baseDate.getDate() + days);
|
||||
|
||||
// 构建开始时间:目标日期的8:00:00
|
||||
const start = new Date(targetDate);
|
||||
start.setHours(8, 0, 0, 0);
|
||||
|
||||
// 构建结束时间:目标日期+1天的7:59:59
|
||||
const end = new Date(targetDate);
|
||||
end.setDate(targetDate.getDate() + 1);
|
||||
end.setHours(7, 59, 59, 0);
|
||||
|
||||
// 格式化时间字符串
|
||||
const formattedStart = formatDate(start, 'YYYY-MM-DD HH:mm:ss');
|
||||
const formattedEnd = formatDate(end, 'YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
// 更新响应式变量
|
||||
startTime.value = formattedStart;
|
||||
endTime.value = formattedEnd;
|
||||
|
||||
return [formattedStart, formattedEnd];
|
||||
};
|
||||
|
||||
// 辅助函数:判断两个日期是否是同一天
|
||||
const isSameDay = (date1, date2) => {
|
||||
return date1.getFullYear() === date2.getFullYear() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getDate() === date2.getDate();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 设置默认时间范围 需要延时等控件渲染好
|
||||
setTimeout(() => {
|
||||
lssjTimeRange.value = getDefaultTimeRange(0)
|
||||
}, 500)
|
||||
|
||||
console.log(lssjTimeRange.value);
|
||||
})
|
||||
const startTime = ref('')
|
||||
const endTime = ref('')
|
||||
const lssjTimeRange = ref([])
|
||||
|
||||
|
||||
// 时间选择变化
|
||||
const getTime = (e) => {
|
||||
if (e && e.length === 2) {
|
||||
startTime.value = formatDate(e[0], 'YYYY-MM-DD HH:mm:ss')
|
||||
endTime.value = formatDate(e[1], 'YYYY-MM-DD HH:mm:ss')
|
||||
// updateChart()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
50
src/pages-production/shishishuju/index.vue
Normal file
50
src/pages-production/shishishuju/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<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>
|
||||
<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 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>
|
||||
361
src/pages-production/shishishuju/trqSssj.vue
Normal file
361
src/pages-production/shishishuju/trqSssj.vue
Normal file
@ -0,0 +1,361 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '天然气实时数据',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<PageLayout navTitle="天然气实时数据" routeMethod="pushTab">
|
||||
<!-- 标题行 -->
|
||||
<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
|
||||
@click="handleStop">{{caijiText}}</wd-button>
|
||||
<wd-button custom-class="custom-value" size="small" plain clickable
|
||||
@click="handleRightClick">选择站场</wd-button>
|
||||
|
||||
</wd-cell>
|
||||
|
||||
<scroll-view direction="vertical" class="scroll-container">
|
||||
<view class="container">
|
||||
<view v-for="(item, index) in jlData" :key="index" class="card">
|
||||
<view class="field-item">
|
||||
<text class="titlejl">{{ 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-labelssll" @click="openSssjChart(item)">瞬时流量(m³/d)</text>
|
||||
<text class="field-value">{{ formatNumber(item.ssll) || '-' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 今日流量 -->
|
||||
<view class="field-item">
|
||||
<text class="field-labelssll" @click="openlssjChart(item)">今日流量(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>
|
||||
</scroll-view>
|
||||
<wd-popup v-model="selectZc" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
|
||||
<view style="font-size: 18px;text-align: center;color: blue;margin: 10px;">选择采输气站场</view>
|
||||
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
|
||||
</cxc-szcx-stationJl-select>
|
||||
</wd-popup>
|
||||
|
||||
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
|
||||
<sssj-chart :jldData="jldData"></sssj-chart>
|
||||
</wd-popup>
|
||||
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
|
||||
<lssj-chart :jldData="jldData"></lssj-chart>
|
||||
</wd-popup>
|
||||
</PageLayout>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
queryJldZcList,
|
||||
queryJldDataByZc
|
||||
} from '@/api/production'
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
nextTick,
|
||||
watchEffect,
|
||||
onUnmounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
onHide,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
formatDate
|
||||
} from '@/utils/dateTime.ts';
|
||||
|
||||
import SssjChart from './chart/sssjChart'
|
||||
import LssjChart from './chart/lssjChart'
|
||||
|
||||
const res = wx.getSystemInfoSync();
|
||||
const statusHeight = res.statusBarHeight; //状态栏高度
|
||||
const cusnavbarheight = (statusHeight + 30) + "px";
|
||||
|
||||
const selectZc = ref(false)
|
||||
const lssjFlag = ref(false)
|
||||
const sssjFlag = ref(false)
|
||||
const nowDateTime = ref("")
|
||||
const caijiText = ref("停止采集")
|
||||
const stationList = ref([])
|
||||
const stationID = ref("")
|
||||
const stationName = ref(" ")
|
||||
const jlData = ref([])
|
||||
const jldData = ref({})
|
||||
const sssjUrl = ref('wss://szcx.zyyt.sinopec.com/Gyk/websocket/')
|
||||
const jlByzc = ref('https://szcx.zyyt.sinopec.com/Gyk/sssj/GetJlByZc')
|
||||
|
||||
function openSssjChart(e) {
|
||||
sssjFlag.value = true;
|
||||
console.log(11, e)
|
||||
jldData.value = e
|
||||
console.log(selectZc.value)
|
||||
}
|
||||
|
||||
function openlssjChart(e) {
|
||||
lssjFlag.value = true;
|
||||
jldData.value = e
|
||||
console.log(selectZc.value)
|
||||
}
|
||||
|
||||
function handleRightClick() {
|
||||
selectZc.value = true;
|
||||
console.log(selectZc.value)
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
console.log(selectZc.value)
|
||||
}
|
||||
|
||||
function onChange(e, data) {
|
||||
console.log(2, e, data.value);
|
||||
stationID.value = e
|
||||
stationName.value = data.value.title
|
||||
|
||||
getScData(); //获取生产数据
|
||||
|
||||
}
|
||||
|
||||
function handleStop() {
|
||||
|
||||
if (caijiText.value === "停止采集") {
|
||||
console.log('清除定时器,停止采集')
|
||||
caijiText.value = "开始采集"
|
||||
clearInterval(timer2.value);
|
||||
timer2.value = null;
|
||||
|
||||
} else {
|
||||
console.log('开始采集,打开定时器')
|
||||
caijiText.value = "停止采集"
|
||||
websocketheart()
|
||||
}
|
||||
}
|
||||
|
||||
const websock = ref(null);
|
||||
const timer2 = ref(null);
|
||||
// 封装心跳函数
|
||||
const websocketheart = () => {
|
||||
// 先清除之前的定时器
|
||||
if (timer2.value) {
|
||||
clearInterval(timer2.value);
|
||||
timer2.value = null;
|
||||
}
|
||||
timer2.value = setInterval(() => {
|
||||
nowDateTime.value = formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
|
||||
if (websock.value && websock.value.readyState === 1) {
|
||||
// 如果连接正常,发送心跳消息
|
||||
// connectSocketInit()
|
||||
}
|
||||
if (stationID.value) {
|
||||
getScData();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
onMounted(() => {
|
||||
websocketheart()
|
||||
// stationID.value = "1267633458481725442"
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer2.value);
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
console.log('页面隐藏,清除定时器')
|
||||
clearInterval(timer2.value);
|
||||
timer2.value = null;
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
// 页面显示时重新启动定时器
|
||||
websocketheart()
|
||||
})
|
||||
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 formatNumber = (num) => {
|
||||
let temp = 0;
|
||||
try {
|
||||
temp = parseFloat(num);
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
return temp.toFixed(4).replace(/\.?0+$/, '');
|
||||
};
|
||||
</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-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: 10px;
|
||||
flex: 1;
|
||||
margin-right: 2px;
|
||||
width: 80px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.field-labelssll {
|
||||
color: #0000ff;
|
||||
text-decoration: underline;
|
||||
font-size: 10px;
|
||||
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;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
133
src/pages.json
133
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,80 @@
|
||||
"type": "page"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages-production",
|
||||
"pages": [
|
||||
{
|
||||
"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>
|
||||
</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>
|
||||
@ -9,51 +9,35 @@
|
||||
</route>
|
||||
<template>
|
||||
<PageLayout :navbarShow="false">
|
||||
<view>
|
||||
<view class="placeholder"></view>
|
||||
<view style="width: 100%; display: grid; place-items: center">
|
||||
<uni-title :title="dateDate + ':生产情况'" type="h1" color="blue" />
|
||||
</view>
|
||||
<view style="margin: 0 10px;">
|
||||
<uni-segmented-control style="margin-top: 10px;margin-bottom: 10px" :current="current" :values="items"
|
||||
@clickItem="onClickItem" styleType="button" activeColor="#0055ff"></uni-segmented-control>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-if="current === 0">
|
||||
<view style="padding: 0 10px">
|
||||
<view class="progress-bartime">
|
||||
<!-- 动态设置宽度和颜色 -->
|
||||
<view class="progressTime"
|
||||
:style="{ width: `${timePercent}%`, 'background-color': '#0055ff' }">
|
||||
</view>
|
||||
<!-- 显示带符号的百分比 -->
|
||||
<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||
<trq-data></trq-data>
|
||||
<yy-data></yy-data>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="current === 1">
|
||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||
<sssjForm></sssjForm>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<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' }">
|
||||
<sssjData></sssjData>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="current === 1">
|
||||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
||||
<trq-data></trq-data>
|
||||
<yy-data></yy-data>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import trqData from './ribaoshuju/trqRbsj';
|
||||
import yyData from './ribaoshuju/yyRbsj';
|
||||
import sssjForm from './shishishuju/index';
|
||||
import {
|
||||
formatDate,
|
||||
getDateAfterDays,
|
||||
getYearProgress
|
||||
} from '@/utils/dateTime';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
@ -62,14 +46,19 @@
|
||||
watchEffect,
|
||||
onUnmounted
|
||||
} from 'vue';
|
||||
const items = ref(['日报数据', '实时数据'])
|
||||
//、、东风风光的
|
||||
import trqData from '@/pages-production/ribaoshuju/trqRbsj';
|
||||
import yyData from '@/pages-production/ribaoshuju/yyRbsj';
|
||||
import sssjData from '@/pages-production/shishishuju/index';
|
||||
const items = ref(['实时数据', '日报数据', '安全管理', '工程技术', '仪控设备'])
|
||||
const current = ref(0)
|
||||
const res = wx.getSystemInfoSync();
|
||||
const statusHeight = res.statusBarHeight; //状态栏高度
|
||||
const cusnavbarheight = statusHeight + 44 + 'px';
|
||||
const scrollViewHeight = ref(0); //状态栏高度
|
||||
const timePercent = ref(0);
|
||||
const dateDate = ref('');
|
||||
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) {
|
||||
@ -77,31 +66,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
const strDate = () => {
|
||||
const now = new Date();
|
||||
if (now.getHours() < 11) {
|
||||
return formatDate(getDateAfterDays(now, -1)); //11点之前 头一天的数据
|
||||
} else {
|
||||
return formatDate(now);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
dateDate.value = strDate();
|
||||
timePercent.value = getYearProgress();
|
||||
calculateScrollViewHeight();
|
||||
// 监听窗口大小变化事件,当窗口大小改变时重新计算高度
|
||||
window.addEventListener('resize', calculateScrollViewHeight);
|
||||
// 使用 Uniapp 提供的窗口大小变化监听方法
|
||||
uni.onWindowResize(calculateScrollViewHeight);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除窗口大小变化事件监听器
|
||||
window.removeEventListener('resize', calculateScrollViewHeight);
|
||||
// 移除 Uniapp 窗口大小变化监听
|
||||
uni.offWindowResize(calculateScrollViewHeight);
|
||||
});
|
||||
|
||||
onHide(()=>{ //切换首页后,将生产切换为日本数据以清楚定时 by闵
|
||||
current.value = 0;
|
||||
})
|
||||
|
||||
const calculateScrollViewHeight = () => {
|
||||
// 获取屏幕的总高度
|
||||
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||||
@ -111,18 +85,7 @@
|
||||
query
|
||||
.select('.nav')
|
||||
.boundingClientRect();
|
||||
query
|
||||
.select('.placeholder')
|
||||
.boundingClientRect();
|
||||
query
|
||||
.select('.uni-title')
|
||||
.boundingClientRect();
|
||||
query
|
||||
.select('.uni-segmented-control')
|
||||
.boundingClientRect();
|
||||
query
|
||||
.select('.progress-bartime')
|
||||
.boundingClientRect();
|
||||
|
||||
// 执行查询操作
|
||||
query.exec((res) => {
|
||||
let totalHeight = 0;
|
||||
@ -132,62 +95,38 @@
|
||||
}
|
||||
});
|
||||
// 计算 scroll-view 的高度
|
||||
scrollViewHeight.value = screenHeight - totalHeight - 80;
|
||||
scrollViewHeight.value = screenHeight - totalHeight;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav {
|
||||
width: calc(100% - 60rpx);
|
||||
padding: 0 30rpx;
|
||||
width: calc(100%);
|
||||
height: v-bind(cusnavbarheight);
|
||||
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
//color: #333333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
background-image: url('../../static/my/navbg.png');
|
||||
background-image: url('@/static/navbg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 750rpx 458rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: v-bind(cusnavbarheight);
|
||||
}
|
||||
.nav_box {
|
||||
font-size: 18;
|
||||
|
||||
.progress-bartime {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.progressTime {
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: red;
|
||||
/* 保持红色 */
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
/* 提升可读性 */
|
||||
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>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<trqSssjVue></trqSssjVue>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import trqSssjVue from './trqSssj';
|
||||
</script>
|
||||
@ -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>
|
||||
24
src/types/uni-pages.d.ts
vendored
24
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,18 @@ 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/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 {}
|
||||
|
||||
|
||||
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view>
|
||||
<l-echart ref="chart" @finished="drawChart" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onUnmounted
|
||||
} from 'vue'; // 补充导入ref等API
|
||||
import {
|
||||
formatDate,
|
||||
getDateAfterDays,
|
||||
getDateAfterMonths
|
||||
} from '@/utils/dateTime';
|
||||
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true
|
||||
},
|
||||
xField: {
|
||||
type: String,
|
||||
default: 'createTime' // 原xField默认值是'rqDate',与数据中的createTime匹配,修正为createTime
|
||||
},
|
||||
yFields: {
|
||||
type: Object, // 注意:yFields应是数组(存储多条线配置),原代码写的是String,这里修正为Array
|
||||
default: () => [],
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// 响应式数据定义
|
||||
const colorData = ref([{
|
||||
color: '#000000'
|
||||
},
|
||||
{
|
||||
color: '#00007f'
|
||||
},
|
||||
{
|
||||
color: '#ff0000'
|
||||
},
|
||||
{
|
||||
color: '#005500'
|
||||
},
|
||||
{
|
||||
color: '#55007f'
|
||||
},
|
||||
{
|
||||
color: '#ffff00'
|
||||
}
|
||||
]);
|
||||
const chart = ref(null);
|
||||
const chartOption = ref({}); // 初始化为空对象,避免undefined
|
||||
const chartTitle = ref('历史趋势'); // 直接初始化标题,无需在watch中重复赋值
|
||||
|
||||
// 1. 修复:生成图表配置(返回配置对象,供赋值给chartOption.value)
|
||||
const generateOptions = () => {
|
||||
|
||||
const serie = []; // 局部变量:存储系列配置
|
||||
const yData = []; // 局部变量:存储Y轴配置
|
||||
const xData = []; // 局部变量:存储X轴数据
|
||||
const legendData = []; // 局部变量:存储图例数据
|
||||
let positionIndex = 0;
|
||||
const yDataNum = props.yFields.length; // Y轴数量 = 线条数量
|
||||
|
||||
// 初始化X轴(若需默认占位,可保留;建议后续用真实数据覆盖)
|
||||
for (let i = 0; i < yDataNum; i++) {
|
||||
xData.push('');
|
||||
}
|
||||
|
||||
// 循环处理每条线的Y轴和系列配置
|
||||
for (let i = 0; i < props.yFields.length; i++) {
|
||||
const yFieldItem = props.yFields[i]; // 简化变量引用
|
||||
// Y轴配置模板
|
||||
const yaxisTemp = {
|
||||
type: 'value',
|
||||
nameRotate: 270,
|
||||
nameLocation: 'middle',
|
||||
nameGap: 20,
|
||||
name: '',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#61A0A8',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 图例名称(拼接名称+单位)
|
||||
const legendName = `${yFieldItem.name}(${yFieldItem.unit})`;
|
||||
legendData.push(legendName);
|
||||
|
||||
|
||||
|
||||
// 调整Y轴位置(ssll放左侧,其他放右侧)
|
||||
if (yFieldItem.field === 'ssll') {
|
||||
yaxisTemp.position = 'left';
|
||||
yaxisTemp.nameGap = -15;
|
||||
} else {
|
||||
yaxisTemp.position = 'right';
|
||||
yaxisTemp.offset = 30 * positionIndex;
|
||||
positionIndex++;
|
||||
}
|
||||
|
||||
// 填充Y轴配置(修复v[i].max错误,改为yFieldItem.max)
|
||||
yaxisTemp.name = legendName;
|
||||
yaxisTemp.min = yFieldItem.min ?? 0; // 兜底:无min时设为0
|
||||
yaxisTemp.max = yFieldItem.max ?? 100; // 兜底:无max时设为100
|
||||
yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底
|
||||
// yaxisTemp.show=false
|
||||
|
||||
yData.push(yaxisTemp);
|
||||
|
||||
// 系列配置模板
|
||||
const serieTemp = {
|
||||
field: yFieldItem.field,
|
||||
name: legendName,
|
||||
showSymbol: false,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
data: [],
|
||||
yAxisIndex: i // 对应第i个Y轴
|
||||
};
|
||||
|
||||
// 修复this.serie.push错误:向局部变量seriepush
|
||||
serie.push(serieTemp);
|
||||
|
||||
}
|
||||
|
||||
// 修复:返回完整配置对象
|
||||
return {
|
||||
color: ['#000000', '#00007f', '#ff0000', '#005500', '#55007f', '#ffff00'],
|
||||
title: {
|
||||
textAlign: 'auto',
|
||||
text: chartTitle.value
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
alwaysShowContent: true,
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
showTitle: true,
|
||||
orient: 'horizontal',
|
||||
feature: {
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false
|
||||
},
|
||||
restore: {
|
||||
show: true
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
right: '10%',
|
||||
top: '0'
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
itemGap: 5,
|
||||
padding: [35, 5, 25, 5],
|
||||
type: 'scroll',
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
width: 'auto',
|
||||
top: '20%',
|
||||
left: '5px',
|
||||
right: '5px', // 动态调整右侧间距(避免Y轴标签被截断)
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
show: true,
|
||||
data: xData
|
||||
},
|
||||
yAxis: yData,
|
||||
series: serie
|
||||
};
|
||||
};
|
||||
|
||||
// 2. 修复:数据处理(正确访问响应式变量)
|
||||
const processSeriesData = () => {
|
||||
const ssData = props.dataList;
|
||||
|
||||
// 修复:访问chartOption.value的属性
|
||||
const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据(避免直接修改) series
|
||||
const serie = [...chartOption.value.series]; // 拷贝原系列数据
|
||||
const yData = [...chartOption.value.yAxis]; // 拷贝原Y轴数据
|
||||
|
||||
// 清空历史数据(避免重复添加)
|
||||
xData.length = 0;
|
||||
serie.forEach(item => (item.data.length = 0));
|
||||
|
||||
// 处理每条数据
|
||||
ssData.forEach(item => {
|
||||
// 格式化X轴时间(用props.xField获取字段名,避免硬编码createTime)
|
||||
const ctime = item[props.xField];
|
||||
xData.push(ctime);
|
||||
|
||||
// 填充每条线的数值
|
||||
serie.forEach((serieItem, j) => {
|
||||
const field = props.yFields[j].field;
|
||||
const tempValue = item[field];
|
||||
// 兜底:空值设为0(避免图表断层)
|
||||
serieItem.data.push(tempValue ?? 0);
|
||||
});
|
||||
});
|
||||
|
||||
// 动态调整Y轴最大值(修复this.serie和this.maxArrValue错误)
|
||||
serie.forEach((serieItem, mm) => {
|
||||
const maxValue = maxArrValue(serieItem.data);
|
||||
console.log(1, maxValue)
|
||||
yData[mm].max = Math.round(maxValue * 12) / 10 || 100; // 兜底:最大值为0时设为100
|
||||
console.log(2, yData[mm].max)
|
||||
});
|
||||
|
||||
// 修复:更新响应式数据(必须通过.value)
|
||||
chartOption.value = {
|
||||
...chartOption.value, // 保留原有配置
|
||||
xAxis: {
|
||||
...chartOption.value.xAxis,
|
||||
data: xData
|
||||
},
|
||||
series: serie,
|
||||
yAxis: yData
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// 3. 修复:计算数组最大值(过滤NaN,避免排序错误)
|
||||
const maxArrValue = (data) => {
|
||||
// 过滤非数字项,转为Number后取最大值
|
||||
const validNumbers = data
|
||||
.map(item => Number(item))
|
||||
.filter(item => !isNaN(item));
|
||||
|
||||
// 兜底:无有效数字时返回0
|
||||
return validNumbers.length > 0 ?
|
||||
Math.max(...validNumbers) :
|
||||
0;
|
||||
};
|
||||
|
||||
// 4. 修复:监听数据变化(直接使用初始化后的标题)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(newVal) => {
|
||||
if (newVal.length === 0) return; // 空数据不处理
|
||||
drawChart()
|
||||
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
} // 立即执行:初始数据加载时触发
|
||||
);
|
||||
|
||||
// 5. 修复:初始化图表(正确赋值chartOption.value)
|
||||
const drawChart = async () => {
|
||||
// 生成配置并赋值给响应式变量
|
||||
chartOption.value = generateOptions();
|
||||
processSeriesData()
|
||||
if (!chart.value) return;
|
||||
|
||||
// 初始化ECharts实例(去掉setTimeout,用async/await更可靠)
|
||||
const myChart = await chart.value.init(echarts);
|
||||
myChart.setOption(chartOption.value);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 生命周期:挂载时初始化
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
drawChart();
|
||||
}, 500)
|
||||
|
||||
});
|
||||
|
||||
// 生命周期:卸载时销毁图表(避免内存泄漏)
|
||||
onUnmounted(() => {
|
||||
if (chart.value) {
|
||||
const myChart = chart.value.getInstance();
|
||||
myChart.dispose();
|
||||
chart.value = null;
|
||||
}
|
||||
window.removeEventListener('resize', () => {}); // 移除监听
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
97
src/uni_modules/cxc-szcx-multiLineChart/package.json
Normal file
97
src/uni_modules/cxc-szcx-multiLineChart/package.json
Normal file
@ -0,0 +1,97 @@
|
||||
{
|
||||
"id": "cxc-szcx-multiLineChart",
|
||||
"displayName": "cxc-szcx-multiLineChart",
|
||||
"version": "1.0.0",
|
||||
"description": "cxc-szcx-multiLineChart",
|
||||
"keywords": [
|
||||
"cxc-szcx-multiLineChart"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0",
|
||||
"uni-app": "^3.1.0",
|
||||
"uni-app-x": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "",
|
||||
"data": "",
|
||||
"permissions": ""
|
||||
},
|
||||
"npmurl": "",
|
||||
"darkmode": "-",
|
||||
"i18n": "-",
|
||||
"widescreen": "-"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "-",
|
||||
"aliyun": "-",
|
||||
"alipay": "-"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "-",
|
||||
"vue3": "-"
|
||||
},
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"vue": "-",
|
||||
"nvue": "-",
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-",
|
||||
"alipay": "-",
|
||||
"toutiao": "-",
|
||||
"baidu": "-",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "-",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/uni_modules/cxc-szcx-multiLineChart/readme.md
Normal file
34
src/uni_modules/cxc-szcx-multiLineChart/readme.md
Normal file
@ -0,0 +1,34 @@
|
||||
# cxc-szcx-multiLineChart
|
||||
# 这个多字段趋势图组件具有以下特点和功能:
|
||||
类型安全:使用 TypeScript 定义了清晰的接口,确保数据类型正确
|
||||
灵活配置:通过 props 参数可以配置需要展示的字段、时间字段、标题等
|
||||
多字段展示:支持同时展示多个数据字段的趋势线(如 yl, wd, yc 等)
|
||||
参考线功能:每个字段都可以设置参考值,自动生成对应的参考线
|
||||
交互功能:
|
||||
支持图例筛选,可单独显示 / 隐藏某个字段
|
||||
提供数据缩放功能,可查看局部数据
|
||||
悬停时显示详细数据信息
|
||||
窗口大小变化时自动调整图表
|
||||
使用示例:
|
||||
<template>
|
||||
<view class="container">
|
||||
<multi-field-trend-chart
|
||||
:data-list="dataList"
|
||||
time-field="createTime"
|
||||
:fields="[
|
||||
{ field: 'yl', name: '压力', referenceValue: 0.73 },
|
||||
{ field: 'wd', name: '温度', color: '#ff6347' },
|
||||
{ field: 'yc', name: '压力差' },
|
||||
{ field: 'ssll', name: '瞬时流量' },
|
||||
{ field: 'jrl', name: '累计流量' }
|
||||
]"
|
||||
title="文增伴生气外输数据趋势"
|
||||
height="600rpx"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MultiFieldTrendChart from '@/components/MultiFieldTrendChart.vue';
|
||||
import { dataList } from '@/data/trendData'; // 导入您的数据
|
||||
</script>
|
||||
309
vite.config.ts
309
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