[update 移动端-天然气数据远传终端] 门站信息

.env.app

@@ -0,0 +1,5 @@
+NODE_ENV=production
+VUE_APP_PLATFORM_NAME=昆鸿设备管理系统
+VUE_APP_SSO=false
+VUE_APP_ROUTER_MODE=hash
+VUE_APP_IS_APP=true

package-lock.json

@@ -10630,6 +10630,11 @@
       "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "heic2any": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmmirror.com/heic2any/-/heic2any-0.0.4.tgz",
+      "integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA=="
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz",

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:app": "vue-cli-service build --mode app",
     "lint": "vue-cli-service lint",
     "build:test": "vue-cli-service build --mode test",
     "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org "
@@ -23,6 +24,7 @@
     "dom-align": "1.12.0",
     "echarts": "^5.4.2",
     "enquire.js": "^2.1.6",
+    "heic2any": "0.0.4",
     "js-base64": "^3.6.0",
     "js-cookie": "^2.2.0",
     "jsencrypt": "^3.0.0-rc.1",

public/app_api_address_config.js

@@ -0,0 +1,12 @@
+/**
+ * 防止打包部署时路径被写死
+ */
+window._CONFIG = {}
+window._CONFIG.domianURL = 'http://139.9.235.66:9393/jero-boot' // 路由转发 devServer
+window._CONFIG.domianWebSocketURL = 'http://139.9.235.66:9393'
+// 单点登录地址
+window._CONFIG.staticDomainURL = window._CONFIG.domianURL + '/sys/common/download'
+window._CONFIG.pdfDomainURL = window._CONFIG.domianURL + '/sys/common/pdf/pdfPreviewIframe'
+window._CONFIG.casPrefixUrl = 'http://cas.example.org:8443/cas'
+// 预览文件地址
+window._CONFIG.onlinePreviewDomainURL = 'http://127.0.0.1:8012/onlinePreview'

public/index.html

@@ -9,6 +9,10 @@
   <!--<link rel="icon" href="<%= BASE_URL %>logo.png">-->
   <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
   <script src="<%= BASE_URL %>api_address_config.js"></script>
+  <!-- 打包app的接口 -->
+  <% if (process.env.VUE_APP_IS_APP === 'true' ) { %>
+  <script src="<%= BASE_URL %>app_api_address_config.js"></script>
+  <% } %>
   <style>
     html,
     body,

src/api/systemOverview.js

@@ -26,6 +26,9 @@ const saveSysSetting = (params) => postAction('/systemSetting/save', params)
 // 油井实时数据：（油井实时参数、实时示功图、载荷分布图）
 const getOilWellRealTimeData = (params) => getAction('/khOilRealtimeData/realtimeDataResults', params)
 
+// 天然气数据远传终端-实时运行参数（移动端）
+const getRealTimeRunningParams = (params) => getAction('/khNgRealtimeData/realtimeDataResults', params)
+
 // 用户信息分页列表
 const getUserPage = (params) => getAction('/sys/user/page', params)
 // 添加用户
@@ -46,6 +49,7 @@ export {
   getSysSetting,
   saveSysSetting,
   getOilWellRealTimeData,
+  getRealTimeRunningParams,
   getUserPage,
   addUserInfo,
   delUserInfo,

src/assets/less/common.less

@@ -499,7 +499,7 @@ button.ant-btn {
   line-height: 16px;
 }
 .info-row .info-label::after {
-  content: '：'
+  content: ':'
 }
 .info-row .info-value {
   text-align: right;

src/components/tools/UserMenu.vue

@@ -11,9 +11,9 @@
       </span>
       <a-dropdown>
       <span class=" small-action">
-        <div class="operate" :title="nickname()">
+        <div class="operate" :title="userInfo().username">
           <img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
-          <span class="operate-text">{{ nickname() }}</span>
+          <span class="operate-text">{{ userInfo().username }}</span>
         </div>
       </span>
         <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
@@ -165,7 +165,7 @@ export default {
           message: '真的要注销登录吗 ?'
         }).then(() => {
           return that.Logout({}).then(() => {
-            window.location.replace('/user/login')
+            this.$router.replace('/user/login')
           }).catch(err => {
             that.$message.error({
               title: '错误',
@@ -180,7 +180,7 @@ export default {
         content: '真的要注销登录吗 ?',
         onOk () {
           return that.Logout({}).then(() => {
-            window.location.replace('/user/login')
+            this.$router.replace('/user/login')
           }).catch(err => {
             that.$message.error({
               title: '错误',

src/enums/commonEnums.js

@@ -45,3 +45,13 @@ export const deviceType = {
 export const wellheadArea = {
   tree101: { label: '树101井', value: '1' }
 }
+
+// 门站数据字典
+export const stationGateStationEnum = {
+  baimamenStation: { label: '白马门站', value: '1' }
+}
+
+// 门站数据字典
+export const dataAcquisitionEquipmentEnum = {
+  mediumPressureOutputFlowMeter: { label: '中压输出流量计', value: '1' }
+}

src/router/index.js

@@ -11,7 +11,8 @@ Router.prototype.push = function push (location, onResolve, onReject) {
 }
 
 export default new Router({
-  mode: 'history',
+  // 打包app使用hash模式
+  mode: process.env.VUE_APP_ROUTER_MODE || 'history',
   base: process.env.BASE_URL,
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap

src/views/mobile/home/Home.vue

@@ -82,13 +82,13 @@
         <!-- 实时运行参数 -->
         <div class="mb-12">
           <common-card title="实时运行参数">
-            <template v-for="(item, index) in allData.realTimeRunningParamsList">
+            <template v-for="(item, index) in realTimeRunningParamsList">
               <common-card-info :data="item"
                                 :key="(item.id || item.channelNo) + 'info'"
                                 :left-list="labelData.realTimeRunningParamsLeft || []"
                                 :right-list="labelData.realTimeRunningParamsRight || []"/>
                 <div class="divider-horizontal"
-                     v-if="index !== allData.realTimeRunningParamsList.length - 1"
+                     v-if="index !== realTimeRunningParamsList.length - 1"
                      :key="(item.id || item.channelNo) + 'horizontal-line'"></div>
             </template>
           </common-card>
@@ -147,16 +147,14 @@
               <span slot="label" class="vertical-label">场站<br/>门站</span>
               <dict-picker :triggerChange="true"
                            class="search-input mb-8"
-                           dictCode="wellhead_area"
-                           @change="changeStationGateStation"
+                           dictCode="gate_station"
                            v-model="queryParam.stationGateStation"
                            placeholder="请选择场站门站"/>
-              <select-picker class="search-input"
-                             v-model="queryParam.dataAcquisitionEquipment"
-                             placeholder="请选择数采设备"
-                             label-key="wellheadName"
-                             :list="singleWellList"
-                             allowClear/>
+              <dict-picker :triggerChange="true"
+                           class="search-input"
+                           dictCode="data_acquisition_equipment"
+                           v-model="queryParam.dataAcquisitionEquipment"
+                           placeholder="请选择数采设备"/>
             </a-form-item>
           </a-col>
           <a-col flex="0.8rem">
@@ -186,9 +184,15 @@ import CommonCard from '@comp/CommonCard'
 import CommonCardInfo from '@comp/CommonCardInfo'
 import ResponsiveChart from '@comp/ResponsiveChart'
 import CommonEmpty from '@comp/CommonEmpty'
-import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
+import { getOilWellRealTimeData, getWellheadList, getRealTimeRunningParams } from '@api/systemOverview'
 import { generateBaseOption } from '@/utils/charts'
-import { deviceType, wellheadArea, wellheadType } from '@/enums/commonEnums'
+import {
+  dataAcquisitionEquipmentEnum,
+  deviceType,
+  stationGateStationEnum,
+  wellheadArea,
+  wellheadType
+} from '@/enums/commonEnums'
 import DictPicker from '@comp/vant/DictPicker'
 import SelectPicker from '@comp/vant/SelectPicker'
 
@@ -218,25 +222,12 @@ const staticData = {
   comment: '当前工作状态良好，请按时检查',
   pumpType: '常规泵',
   // 门站信息
-  stationName: '济源1#2号站',
-  region: '济宁区域',
-  terminalType: '电池供电设备',
-  flowmetersNumber: '30',
-  dataAcquisitionTerminals: '5',
-  equipmentInstallationTime: '2024-12-25',
-  // 实时运行参数
-  realTimeRunningParamsList: [
-    ...new Array(4).fill(0).map((_, i) => {
-      return {
-        channelNo: '济源1#通道' + i,
-        cumulativeFlow: '1232222',
-        instantaneousStandardCondition: '236.33',
-        realTimeTemperature: '35',
-        realTimePressure: '1.23',
-        instantaneousWorkingConditions: '256.33'
-      }
-    })
-  ]
+  stationName: '白马门站',
+  region: '溧水区域',
+  terminalType: '外部电源供电',
+  flowmetersNumber: '2',
+  dataAcquisitionTerminals: '1',
+  equipmentInstallationTime: '2024-05-30'
 }
 
 export default {
@@ -253,6 +244,8 @@ export default {
       hasData: false, // 有没有请求到数据
       // 油井实时数据
       oilWellRealTimeData: {},
+      // 实时运行参数
+      realTimeRunningParamsList: [],
       // 所有面板展示的数据
       allData: {},
       // 定时器，用于10秒请求一次
@@ -305,13 +298,13 @@ export default {
         // 实时运行参数
         realTimeRunningParamsLeft: [
           { label: '通道编号', valueField: 'channelNo', unit: '' },
-          { label: '累计流量', valueField: 'cumulativeFlow', unit: 'm³' },
-          { label: '标况瞬时', valueField: 'instantaneousStandardCondition', unit: 'm³/d' }
+          { label: '累计流量', valueField: 'cumulativeFlow', unit: '' },
+          { label: '标况瞬时', valueField: 'stdInstant', unit: '' }
         ],
         realTimeRunningParamsRight: [
-          { label: '实时温度', valueField: 'realTimeTemperature', unit: '℃' },
-          { label: '实时压力', valueField: 'realTimePressure', unit: 'Mpa' },
-          { label: '工况瞬时', valueField: 'instantaneousWorkingConditions', unit: 'm³/d' }
+          { label: '实时温度', valueField: 'realTimeTemp', unit: '' },
+          { label: '实时压力', valueField: 'realTimePressure', unit: '' },
+          { label: '工况瞬时', valueField: 'operationalInstant', unit: '' }
         ]
       },
       // 油井下拉
@@ -336,15 +329,11 @@ export default {
       switch (params.deviceType + '') {
         // 天然气数据远传终端
         case deviceType.transmissionTerminal.value:
-          clearInterval(this.timer)
-          this.timer = null
           // 默认回显井场和单井
-          this.$set(this.queryParam, 'stationGateStation', wellheadArea.tree101.value)
-          this.loadOilWellList(wellheadArea.tree101.value).then(() => {
-            this.$set(this.queryParam, 'dataAcquisitionEquipment', this.singleWellList[0].id)
-            // 查询数据
-            this.loadTransmissionTerminalData()
-          })
+          this.$set(this.queryParam, 'stationGateStation', stationGateStationEnum.baimamenStation.value)
+          this.$set(this.queryParam, 'dataAcquisitionEquipment', dataAcquisitionEquipmentEnum.mediumPressureOutputFlowMeter.value)
+          // 查询数据
+          this.loadTransmissionTerminalData()
           break
         // 井口设备
         case deviceType.wellheadEquipment.value:
@@ -369,7 +358,12 @@ export default {
         this.clearPageData()
         return
       }
-      this.loadOilWellRealTimeData()
+      // 每10秒请求一次实时数据
+      this.loadRealTimeRunningParams()
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.loadRealTimeRunningParams()
+      }, 1000 * 10)
     },
     // 获取井口设备页面数据
     loadWellheadEquipment () {
@@ -408,6 +402,19 @@ export default {
       }).finally(() => {
       })
     },
+    // 加载天然气数据远传终端实施参数
+    loadRealTimeRunningParams () {
+      getRealTimeRunningParams().then(res => {
+        if (res.success) {
+          const data = res.result || []
+          this.hasData = !!data.length
+          this.allData = Object.assign({}, staticData)
+          this.realTimeRunningParamsList = data
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
     // 初始化 实时示功图
     initIndicatorDiagram (data) {
       this.$nextTick(() => {

src/views/mobile/manage/Manage.vue

@@ -523,7 +523,7 @@ export default {
         word-break: break-all;
         flex: auto;
         margin: 0;
-        font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
+        font-family: Rubik, Rubik, sans-serif;
         font-size: 0.12rem;
         line-height: 0.14rem;
 
@@ -540,6 +540,7 @@ export default {
           margin-bottom: 0;
         }
         & > p:first-child {
+          font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
           width: 100%;
           min-height: 0.16rem;
           font-size: 0.14rem;

src/views/mobile/mine/Mine.vue

@@ -13,6 +13,7 @@
                           :max-size="global.maxUploadFileSize"
                           @oversize="onOversize"
                           v-model="fileList"
+                          :after-read="handleAfterRead"
                           max-count="1"></van-uploader>
           </div>
         </a-form-item>
@@ -49,7 +50,9 @@ import { queryDepartTreeList } from '@api/api'
 import DictPicker from '@comp/vant/DictPicker'
 import SelectPicker from '@comp/vant/SelectPicker'
 import { getAction, getFileAccessHttpUrl } from '@api/manage'
+import heic2any from 'heic2any'
 import { Toast } from 'vant'
+
 export default {
   name: 'Mine',
   components: { SelectPicker, DictPicker },
@@ -90,6 +93,71 @@ export default {
     this.getUserDeparts(this.model.id)
   },
   methods: {
+    // 文件读取完成
+    handleAfterRead (file) {
+      // 先不回显图片（上传中）
+      this.fileList = [{ status: 'uploading' }]
+      // 判断是否heic格式与后缀不对的图片
+      this.isHEICFile(file.file)
+        // 如果是heic转成真正的后缀图片，否则就展示当前的图片
+        .then(bool => {
+          console.log(bool, 'isHEICFile')
+          if (bool) {
+            return heic2any({
+              blob: file.file,
+              toType: file.file.type,
+              quality: 1
+            })
+          } else {
+            this.fileList = [{
+              isImage: true,
+              url: URL.createObjectURL(file.file)
+            }]
+          }
+        })
+        // 成功了就显示转换后的图片
+        .then(blob => {
+          if (blob) {
+            this.fileList = [{
+              url: URL.createObjectURL(blob),
+              isImage: true
+            }]
+          }
+        })
+        // 失败了就不显示
+        .catch(err => {
+          console.log(err.message)
+          Toast('上传图片格式有误，请重试')
+          this.fileList = []
+        })
+    },
+    /**
+     * 判断文件是否heic图片
+     * @param file
+     * @description heic格式hex参考 https://www.garykessler.net/library/file_sigs.html
+     * @return {Promise<unknown>}
+     */
+    isHEICFile (file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        const offset = 4
+        const blob = file.slice(offset, 8 + offset) // 取文件的前8位，偏移4位
+
+        reader.onload = function () {
+          const uint8Arr = new Uint8Array(reader.result)
+          const HEIC_HEADER = [0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63]
+          for (let i = 0; i < HEIC_HEADER.length; i++) {
+            if (uint8Arr[i] !== HEIC_HEADER[i]) {
+              resolve(false)
+            }
+            if (i === HEIC_HEADER.length - 1) {
+              resolve(true)
+            }
+          }
+        }
+        reader.readAsArrayBuffer(blob)
+      })
+    },
     onOversize () {
       Toast('最大上传图片20MB')
     },
@@ -168,6 +236,9 @@ export default {
       width: 1.2rem;
       height: 1.2rem;
     }
+    /deep/ .van-uploader__file {
+      opacity: 0;
+    }
     /deep/ .van-uploader__preview-image {
       width: 100%;
       height: 100%;
@@ -181,6 +252,9 @@ export default {
       font-size: 0.16rem;
       color: #fff;
     }
+    /deep/ .van-uploader__mask {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
   }
 }
 </style>

src/views/user/Login.vue

@@ -383,12 +383,24 @@ export default {
         padding: 0;
 
         // 输入框
-        .ant-input {
+        /deep/.ant-input {
           height: 48px;
           font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
           font-weight: 400;
           font-size: 14px;
           color: @text-color;
+
+          // 处理自动填充的样式
+          &:-webkit-autofill,
+          &:-webkit-autofill:hover,
+          &:-webkit-autofill:focus,
+          &:-webkit-autofill:active {
+            -webkit-transition-delay: 999999s;
+            -webkit-transition: color 999999s ease-out, background-color 999999s ease-out;
+            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
+            font-weight: 400;
+            font-size: 14px;
+          }
         }
 
         // label
@@ -481,7 +493,7 @@ export default {
           border: none !important;
           box-shadow: none !important;
           background: none !important;
-          border-bottom: 0.01rem solid rgba(0,148,255,0.4) !important;
+          border-bottom: 0.01rem solid rgba(0, 148, 255, 0.4) !important;
           border-radius: 0 !important;
           height: 0.48rem;
           padding-left: 0.36rem;
@@ -489,7 +501,20 @@ export default {
           font-weight: 400;
           font-size: 0.16rem;
           line-height: 0.24rem;
+
+          // 处理自动填充的样式
+          &:-webkit-autofill,
+          &:-webkit-autofill:hover,
+          &:-webkit-autofill:focus,
+          &:-webkit-autofill:active {
+            -webkit-transition-delay: 999999s;
+            -webkit-transition: color 999999s ease-out, background-color 999999s ease-out;
+            font-family: PingFang SC, PingFang SC, sans-serif;
+            font-weight: 400;
+            font-size: 0.16rem;
+          }
         }
+
         .login-btn {
           .ant-btn {
             height: 0.48rem;

vue.config.js

@@ -15,7 +15,7 @@ module.exports = {
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // 打包app时放开该配置
-  // publicPath:'./',
+  publicPath: process.env.VUE_APP_IS_APP === 'true' ? './' : '/',
   configureWebpack: config => {
     // 生产环境取消 console.log
     if (process.env.NODE_ENV === 'production') {