init():初始化
commit
b839e671d6
|
|
@ -0,0 +1,26 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
/.pnp
|
||||
.pnp.js
|
||||
unpackage/
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
yarn.lock
|
||||
build.7z
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
// launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
||||
"version" : "0.0",
|
||||
"configurations" : [
|
||||
{
|
||||
"app-plus" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"default" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
},
|
||||
{
|
||||
"playground" : "standard",
|
||||
"type" : "uni-app:app-android"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
const token = {
|
||||
loginName: uni.getStorageSync('loginName'),
|
||||
secretKey: uni.getStorageSync('secretKey'),
|
||||
}
|
||||
if (token.secretKey){
|
||||
uni.reLaunch({
|
||||
url: '/pages/homeIndex/index'
|
||||
})
|
||||
console.log(token.secretKey,'App Launch')
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
console.log(token.secretKey,'App Launch2')
|
||||
}
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import '@/uni_modules/uni-scss/index.scss';
|
||||
@import "@/uni_modules/uview-ui/index.scss";
|
||||
/* #ifndef APP-NVUE */
|
||||
@import '@/static/customicons.css';
|
||||
// 设置整个项目的背景色
|
||||
page {
|
||||
// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-info {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<script>
|
||||
var coverSupport =
|
||||
'CSS' in window &&
|
||||
typeof CSS.supports === 'function' &&
|
||||
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') +
|
||||
'" />'
|
||||
)
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
<script src="./static/h5Player/h5player.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import uView from '@/uni_modules/uview-ui'
|
||||
Vue.use(uView)
|
||||
import App from './App'
|
||||
import {
|
||||
$http
|
||||
} from '@escook/request-miniprogram'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
uni.$http = $http
|
||||
// $http.baseUrl = 'http://local.gunshiiot.com:18083'
|
||||
$http.baseUrl = 'http://36.139.207.50:18083'
|
||||
// 请求拦截器
|
||||
$http.beforeRequest = function(options) {
|
||||
// uni.showLoading({
|
||||
// title: '数据加载中'
|
||||
// })
|
||||
// if (
|
||||
// options.url.indexOf('/gunshiApp/xfflood/doLogin') == -1
|
||||
// && options.url.indexOf('/gunshiApp/xfflood/getLoginInfo') == -1
|
||||
// && options.url.indexOf('/gunshiApp/xfflood/my/info/getByUserId') == -1
|
||||
// && options.url.indexOf('/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/') == -1
|
||||
// ) {
|
||||
// // uni.showLoading({
|
||||
// // title: '数据加载中'
|
||||
// // })
|
||||
// }
|
||||
|
||||
|
||||
if (options.url.indexOf('/doLogin') == -1) {
|
||||
options.header = {
|
||||
'gs-token': uni.getStorageSync('Gs-Token')
|
||||
}
|
||||
}
|
||||
}
|
||||
// 响应拦截器
|
||||
$http.afterRequest = function(options) {
|
||||
// uni.hideLoading()
|
||||
}
|
||||
uni.$showMsg = function(title = '数据请求失败了', duration = 1500) {
|
||||
return uni.showToast({
|
||||
title,
|
||||
duration,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import {
|
||||
createSSRApp
|
||||
} from 'vue'
|
||||
import App from './App.vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
{
|
||||
"name" : "咸丰水利",
|
||||
"appid" : "__UNI__FB46C1F",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.2",
|
||||
"versionCode" : 1,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
/* 5+App特有相关 */
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {
|
||||
"VideoPlayer" : {},
|
||||
"Contacts" : {},
|
||||
"Messaging" : {},
|
||||
"Camera" : {},
|
||||
"Maps" : {}
|
||||
},
|
||||
/* 模块配置 */
|
||||
"distribute" : {
|
||||
/* 应用发布信息 */
|
||||
"android" : {
|
||||
/* android打包配置 */
|
||||
"packagename" : "com.gunshi.xffxkh",
|
||||
"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\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"sdkConfigs" : {
|
||||
"ad" : {},
|
||||
"maps" : {
|
||||
"amap" : {
|
||||
"name" : "4799ff37874e604a22b910b44ca948e5",
|
||||
"appkey_ios" : "755dafdf984df7a1609fb30f6861bd17",
|
||||
"appkey_android" : "755dafdf984df7a1609fb30f6861bd17"
|
||||
}
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "common"
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"quickapp" : {},
|
||||
/* 快应用特有相关 */
|
||||
"mp-weixin" : {
|
||||
/* 小程序特有相关 */
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"h5" : {
|
||||
"template" : "template.html",
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"amap" : {
|
||||
"key" : "4799ff37874e604a22b910b44ca948e5",
|
||||
"securityJsCode" : "",
|
||||
"serviceHost" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* android打包配置 *//* ios打包配置 */
|
||||
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
{
|
||||
"name": "xffxkh-app",
|
||||
"version": "1.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@escook/request-miniprogram": "^0.2.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^4.9.0",
|
||||
"es6-promise": "^4.2.8",
|
||||
"flv.js": "^1.6.2",
|
||||
"moment": "^2.30.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@amap/amap-jsapi-loader": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
|
||||
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
|
||||
},
|
||||
"node_modules/@escook/request-miniprogram": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
|
||||
"integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
|
||||
},
|
||||
"node_modules/crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
|
||||
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
|
||||
"dependencies": {
|
||||
"zrender": "4.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
|
||||
},
|
||||
"node_modules/flv.js": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.6.2.tgz",
|
||||
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
|
||||
"dependencies": {
|
||||
"es6-promise": "^4.2.8",
|
||||
"webworkify-webpack": "^2.1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/webworkify-webpack": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
|
||||
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
|
||||
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
|
||||
},
|
||||
"@escook/request-miniprogram": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
|
||||
"integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
|
||||
},
|
||||
"crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"echarts": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
|
||||
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
|
||||
"requires": {
|
||||
"zrender": "4.3.2"
|
||||
}
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
|
||||
},
|
||||
"flv.js": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.6.2.tgz",
|
||||
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
|
||||
"requires": {
|
||||
"es6-promise": "^4.2.8",
|
||||
"webworkify-webpack": "^2.1.5"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||
},
|
||||
"webworkify-webpack": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
|
||||
},
|
||||
"zrender": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
|
||||
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@escook/request-miniprogram": "^0.2.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^4.9.0",
|
||||
"es6-promise": "^4.2.8",
|
||||
"flv.js": "^1.6.2",
|
||||
"moment": "^2.30.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
{
|
||||
"easycom": {
|
||||
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"pages": [{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/upgrade/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"animationType": "none",
|
||||
"background": "transparent"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/rain/rain",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/homeIndex/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true,
|
||||
"app-plus": {
|
||||
"pullToRefresh": {
|
||||
"support": true,
|
||||
"style": "default",
|
||||
"offset": "70px"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xxsb/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "信息上报"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xxsb/from",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xxsb/fromSeverity",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xxsb/dsfrom",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xxsb/map",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地图示例"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工情信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/zqxx",
|
||||
"style": {
|
||||
"navigationBarTitleText": "灾情信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "查看"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/mypage",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personInfo/personInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/modifyPassword/modifyPassword",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/forewarning/forewarning",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/forewarning/sh",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/forewarning/shInformation/shInformation",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/addressBook/addressBook",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/water/water",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
},
|
||||
"onMessage": "handleMessage"
|
||||
},
|
||||
{
|
||||
"path": "pages/rainDetail/rainDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/hdDetail/hdDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/skDetail/skDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/addressBook/follow",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/addressBook/myDept",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/orderFeedback/orderFeedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/orderFeedback/orderInformation",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx/gqxx",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx/qk",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx/xq",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx/qkForm",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/gqxx/xqForm",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/zqxx/zqxx",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/zqxx/table",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/gqzq/zqxx/form",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"usingComponents": {
|
||||
"map": "/uni_modules/@dcloudio/uni-map/components/uni-map/uni-map"
|
||||
},
|
||||
|
||||
"tabBar": {
|
||||
"color": "#333333",
|
||||
"selectedColor": "#59A7FF",
|
||||
"list": [{
|
||||
"pagePath": "pages/homeIndex/index",
|
||||
"iconPath": "/static/tabs/home.png",
|
||||
"selectedIconPath": "static/tabs/home2.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/addressBook/addressBook",
|
||||
"iconPath": "/static/tabs/phone_icon@2x.png",
|
||||
"selectedIconPath": "static/tabs/phone_icon@2x2.png",
|
||||
"text": "通讯录"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mypage/mypage",
|
||||
"iconPath": "/static/images/my2_icon@2x.png",
|
||||
"selectedIconPath": "static/images/my2_icon@2x2.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"backgroundColorTop": "transparent",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"background": "#efeff4"
|
||||
}
|
||||
},
|
||||
"subPackages": [{
|
||||
"root": "subpkg",
|
||||
"pages": [{
|
||||
"path": "rainDetail/rainDetail"
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"backgroundColorTop": "transparent",
|
||||
"navigationStyle": "custom",
|
||||
"app-plus": {
|
||||
"background": "#efeff4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<view :style="{backgroundColor:'#f7f7f7'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<div class="titleBar">通讯录</div>
|
||||
<div class="searchBar">
|
||||
<u-search
|
||||
placeholder="请输入姓名或手机号"
|
||||
shape="square"
|
||||
:showAction="false"
|
||||
v-model="keyword"
|
||||
@change="getSearch"
|
||||
></u-search>
|
||||
<div class="iconRow">
|
||||
<div class="iconBox" @click="toMyDept">
|
||||
<u--image :src="'../../static/images/dept.png'" width="22px" height="22px"></u--image>
|
||||
<text class="icon_text">我的部门</text>
|
||||
</div>
|
||||
<div class="iconBox" @click="toFollow">
|
||||
<u--image :src="'../../static/images/follow.png'" width="22px" height="22px"></u--image>
|
||||
<text class="icon_text">关注人员</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div class="breadcrumb">
|
||||
<text
|
||||
v-for="(item,index) in treePath"
|
||||
class="breadcrumb_item"
|
||||
:style="{color:(treePath.length-1)===index?'#000000':'#3595F9'}"
|
||||
@click="breadcrumbClick(item,index)"
|
||||
>
|
||||
{{item.name}}
|
||||
<text v-if="(treePath.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
|
||||
</text>
|
||||
</div>
|
||||
<div :style="{height:'calc( 100vh - 280px)',overflow:'scroll'}">
|
||||
<div v-if="!keyword">
|
||||
<div v-for="(item,index) in treeData">
|
||||
<div class="deptItem" @click="itemClick(item,index)">
|
||||
<u--image :src="'../../static/images/deptItem.png'" width="22px" height="22px"></u--image>
|
||||
<div class="deptItem_border">
|
||||
<text class="deptItem_name">{{item.departmentName}}</text>
|
||||
<text class="deptItem_num">{{item.count}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="treeData==null || keyword">
|
||||
<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in personList">
|
||||
<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
|
||||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personItemRow_right2">
|
||||
<u-icon v-if="item.isMyAttendee" name="star-fill" color="#f5dc4d" size="24" @click="follow(false,item.userId)"></u-icon>
|
||||
<u-icon v-if="!item.isMyAttendee" name="star" color="#f5dc4d" size="24" @click="follow(true,item.userId)"></u-icon>
|
||||
<u-icon name="phone" size="24" :style="{margin:'3px 10px 0 10px'}" @click="callNum(item.phone)"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword:'',
|
||||
show:'',
|
||||
treeData:[],
|
||||
treePath:[],
|
||||
personList:[],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getItem() {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
watch: {
|
||||
treePath(newData,oldData){
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
if(this.keyword){
|
||||
this.getPerson({code:last.code, name:this.keyword})
|
||||
}else{
|
||||
if(last.data.children === null){
|
||||
this.getPerson({code:last.code})
|
||||
}else{
|
||||
this.personList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getSearch(this.keyword)
|
||||
this.setInsert()
|
||||
},
|
||||
methods: {
|
||||
getHighlight(val) {
|
||||
const keyword = this.keyword
|
||||
if (keyword && val.indexOf(keyword) !== -1) {
|
||||
const text = val.replace(keyword, `<text :style="{color:'#42cccc'}">${keyword}</text>`)
|
||||
console.log(text)
|
||||
return text
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
},
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
getSearch(e) {
|
||||
if(e){
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
this.getPerson({name:e, code:last.code})
|
||||
}else{
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
if(last.data.children === null){
|
||||
this.getPerson({code:last.code})
|
||||
}else{
|
||||
// this.getPerson({code:last.code,name:'不可能查到的值'})
|
||||
this.personList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
async getPerson({code,name}) {
|
||||
try{
|
||||
let url = '/gunshiApp/xfflood/addressbook/list/query'
|
||||
if(name){
|
||||
//搜索名字
|
||||
url = '/gunshiApp/xfflood/addressbook/list/query?args='+name+'&departmentCode='+code
|
||||
}else{
|
||||
//搜索code
|
||||
url = '/gunshiApp/xfflood/addressbook/list/query?departmentCode='+code
|
||||
}
|
||||
console.log('查询的url',url)
|
||||
const res = await uni.$http.get(url)
|
||||
this.personList = res.data.data
|
||||
console.log('查询的人员',res)
|
||||
}catch(e){
|
||||
this.personList = []
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/department/app/tree')
|
||||
this.treeData = res.data.data[0].children
|
||||
this.treePath = [...this.treePath,{
|
||||
name:res.data.data[0].departmentName,
|
||||
code:res.data.data[0].departmentCode,
|
||||
data:res.data.data[0],
|
||||
}]
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async follow (flag,id) {
|
||||
let url = flag?'/gunshiApp/xfflood/addressbook/attendee/add':'/gunshiApp/xfflood/addressbook/attendee/cancel'
|
||||
const params = {
|
||||
addUserId:id
|
||||
}
|
||||
try {
|
||||
const res = await uni.$http.post(url,params)
|
||||
if(res.data.code === 200){
|
||||
//关注成功
|
||||
this.getSearch(this.keyword)
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
|
||||
},
|
||||
async setInsert () {
|
||||
try {
|
||||
const params = {
|
||||
createId: uni.getStorageSync('value').userId,
|
||||
loginType:1,
|
||||
menu1:'通讯录',
|
||||
menu2:'通讯录',
|
||||
}
|
||||
|
||||
const { data } = await uni.$http.post('/gunshiApp/xfflood/visitMenuLog/insert',params)
|
||||
console.log('用户行为',params,data)
|
||||
} catch (error) {}
|
||||
},
|
||||
itemClick(item,index) {
|
||||
this.treeData = item.children,
|
||||
this.treePath = [...this.treePath,{
|
||||
name:item.departmentName,
|
||||
code:item.departmentCode,
|
||||
data:item,
|
||||
},
|
||||
]
|
||||
},
|
||||
breadcrumbClick(item,index) {
|
||||
this.treeData = item.data.children,
|
||||
this.treePath = [...this.treePath].filter((item,index2)=>index2<=index)
|
||||
},
|
||||
callNum(num) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: num //仅为示例
|
||||
});
|
||||
},
|
||||
toFollow() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/addressBook/follow'
|
||||
});
|
||||
},
|
||||
toMyDept() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/addressBook/myDept'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.titleBar{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #007afd;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.searchBar{
|
||||
background-color: #ffffff;
|
||||
padding: 10px 10px 0 10px;
|
||||
border-bottom: 1px solid rgba(233, 233, 233, 1);
|
||||
}
|
||||
.iconRow{
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.iconBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon_text{
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid rgba(233, 233, 233, 1);
|
||||
height: calc( 100vh - 233px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.breadcrumb{
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.breadcrumb_item{
|
||||
padding: 8px;
|
||||
padding-right: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.deptItem{
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.deptItem_border{
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.deptItem_num{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.personItemIcon{
|
||||
width: 40px;
|
||||
height:40px;
|
||||
background-color: rgb(53, 133, 249);;
|
||||
border-radius: 20px;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.personItemRow_right{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.personItemRow_right2{
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.personItemRow_right_top{
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="关注"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="searchBar">
|
||||
<u-search
|
||||
placeholder="请输入姓名或手机号"
|
||||
shape="square"
|
||||
:showAction="false"
|
||||
height="35"
|
||||
v-model="keyword"
|
||||
></u-search>
|
||||
</div>
|
||||
|
||||
<div class="mybody">
|
||||
<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in getList">
|
||||
<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
|
||||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personItemRow_right2">
|
||||
<u-icon v-if="item.isMyAttendee" name="star-fill" color="#f5dc4d" size="24" @click="follow(false,item.userId)"></u-icon>
|
||||
<u-icon v-if="!item.isMyAttendee" name="star" color="#f5dc4d" size="24" @click="follow(true,item.userId)"></u-icon>
|
||||
<u-icon name="phone" size="24" :style="{margin:'3px 10px 0 10px'}" @click="callNum(item.phone)"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword:'',
|
||||
list:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getList() {
|
||||
if(this.keyword){
|
||||
return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1)
|
||||
}else{
|
||||
return [...this.list]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
async getData () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/attendee')
|
||||
this.list = res.data.data
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async follow (flag,id) {
|
||||
let url = flag?'/gunshiApp/xfflood/addressbook/attendee/add':'/gunshiApp/xfflood/addressbook/attendee/cancel'
|
||||
const params = {
|
||||
addUserId:id
|
||||
}
|
||||
try {
|
||||
const res = await uni.$http.post(url,params)
|
||||
if(res.data.code === 200){
|
||||
//关注成功
|
||||
this.getData()
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
|
||||
},
|
||||
callNum(num) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: num //仅为示例
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchBar{
|
||||
background-color: #ffffff;
|
||||
margin-top: 44px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 0px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.personItemIcon{
|
||||
width: 40px;
|
||||
height:40px;
|
||||
background-color: rgb(53, 133, 249);;
|
||||
border-radius: 20px;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.personItemRow_right{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.personItemRow_right2{
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.personItemRow_right_top{
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="我的部门"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="searchBar">
|
||||
<u-search
|
||||
placeholder="请输入姓名或手机号"
|
||||
shape="square"
|
||||
:showAction="false"
|
||||
height="35"
|
||||
v-model="keyword"
|
||||
></u-search>
|
||||
</div>
|
||||
<div class="breadcrumb" v-if="deptList.length>0">
|
||||
<text
|
||||
v-for="(item,index) in deptList"
|
||||
class="breadcrumb_item"
|
||||
>
|
||||
{{item.departmentName}}
|
||||
<text v-if="(deptList.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
|
||||
</text>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in getList">
|
||||
<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
|
||||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personItemRow_right2">
|
||||
<u-icon v-if="item.isMyAttendee" name="star-fill" color="#f5dc4d" size="24" @click="follow(false,item.userId)"></u-icon>
|
||||
<u-icon v-if="!item.isMyAttendee" name="star" color="#f5dc4d" size="24" @click="follow(true,item.userId)"></u-icon>
|
||||
<u-icon name="phone" size="24" :style="{margin:'3px 10px 0 10px'}" @click="callNum(item.phone)"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword:'',
|
||||
list:[],
|
||||
deptList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getList() {
|
||||
if(this.keyword){
|
||||
return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1||o.phone.indexOf(this.keyword)!==-1)
|
||||
}else{
|
||||
return [...this.list]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
async getData () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department')
|
||||
console.log('人员信息',res)
|
||||
this.list = [...res.data.data]
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async getDept () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department/super')
|
||||
console.log('部门信息',res)
|
||||
this.deptList = res.data.data
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async follow (flag,id) {
|
||||
let url = flag?'/gunshiApp/xfflood/addressbook/attendee/add':'/gunshiApp/xfflood/addressbook/attendee/cancel'
|
||||
const params = {
|
||||
addUserId:id
|
||||
}
|
||||
try {
|
||||
const res = await uni.$http.post(url,params)
|
||||
if(res.data.code === 200){
|
||||
//关注成功
|
||||
this.getData()
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
|
||||
},
|
||||
callNum(num) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: num //仅为示例
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
this.getDept()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.searchBar{
|
||||
background-color: #ffffff;
|
||||
margin-top: 44px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
// margin: 5px 5px;
|
||||
padding: 5px 0px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.personItemIcon{
|
||||
width: 40px;
|
||||
height:40px;
|
||||
background-color: rgb(53, 133, 249);;
|
||||
border-radius: 20px;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.personItemRow_right{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.personItemRow_right2{
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.personItemRow_right_top{
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start
|
||||
}
|
||||
.breadcrumb{
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.breadcrumb_item{
|
||||
padding: 8px;
|
||||
padding-right: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<view :style="{ height: '100vh', overflow: 'hidden' }">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="预警"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize: '18px',
|
||||
}"
|
||||
:height="44"
|
||||
:safeAreaInsetTop="true"
|
||||
leftIconSize="20"
|
||||
leftIconColor="rgb(153, 153, 153)"
|
||||
>
|
||||
</u-navbar>
|
||||
<!-- <u-tabs
|
||||
:list="tabsOptions"
|
||||
@click="tabsChange"
|
||||
:scrollable="false"
|
||||
class="tabsClass"
|
||||
:activeStyle="{ color: 'rgb(37, 157, 255)', fontSize: '16px' }"
|
||||
:inactiveStyle="{ color: '#606266', fontSize: '16px' }"
|
||||
lineColor="transparent"
|
||||
itemStyle="height: 44px"
|
||||
:customItemClass="getCustomItemClass"
|
||||
>
|
||||
</u-tabs> -->
|
||||
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(item, index) in tabsOptions"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-active': tabsVal === item.components }"
|
||||
@click="tabsChange(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
<view v-if="item.hasData" class="red-dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
<uniSh
|
||||
v-show="tabsVal === 'uniSh'"
|
||||
@hasData="updateTabData('uniSh', $event)"
|
||||
ref="shComponent"
|
||||
></uniSh>
|
||||
<uniSk
|
||||
v-show="tabsVal === 'uniSk'"
|
||||
@hasData="updateTabData('uniSk', $event)"
|
||||
ref="skComponent"
|
||||
></uniSk>
|
||||
<uniHd
|
||||
v-show="tabsVal === 'uniHd'"
|
||||
@hasData="updateTabData('uniHd', $event)"
|
||||
ref="hdComponent"
|
||||
></uniHd>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
import uniSh from "./sh.vue";
|
||||
import uniSk from "./sk.vue";
|
||||
import uniHd from "./hd.vue";
|
||||
|
||||
export default {
|
||||
components: { uniSh, uniSk, uniHd },
|
||||
data() {
|
||||
return {
|
||||
tabsOptions: [
|
||||
{
|
||||
name: "山洪预警",
|
||||
components: "uniSh",
|
||||
hasData: true,
|
||||
},
|
||||
{
|
||||
name: "水库预警",
|
||||
components: "uniSk",
|
||||
hasData: false,
|
||||
},
|
||||
{
|
||||
name: "河道预警",
|
||||
components: "uniHd",
|
||||
hasData: false,
|
||||
},
|
||||
],
|
||||
tabsVal: "uniSh",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCustomItemClass(item, index) {
|
||||
return item.hasData ? "u-tabs__wrapper__nav__item--data-dot" : "";
|
||||
},
|
||||
tabsChange(item) {
|
||||
this.tabsVal = item.components;
|
||||
console.log(this.tabsVal);
|
||||
// 直接调用当前激活组件的submit方法
|
||||
if (this.tabsVal === 'uniSh') {
|
||||
this.$refs.shComponent.submit();
|
||||
} else if (this.tabsVal === 'uniSk') {
|
||||
this.$refs.skComponent.submit();
|
||||
} else if (this.tabsVal === 'uniHd') {
|
||||
this.$refs.hdComponent.submit();
|
||||
}
|
||||
|
||||
},
|
||||
updateTabData(component, hasData) {
|
||||
const index = this.tabsOptions.findIndex(
|
||||
(item) => item.components === component
|
||||
);
|
||||
if (index !== -1) {
|
||||
this.tabsOptions[index].hasData = hasData;
|
||||
}
|
||||
},
|
||||
// 初始化所有子组件的数据
|
||||
initAllTabsData() {
|
||||
// 这里不需要做任何事情，因为子组件在created钩子中会自动请求数据
|
||||
// 由于我们使用了v-show而不是v-if，所有子组件都会被创建并执行created钩子
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完成后初始化所有标签页数据
|
||||
this.initAllTabsData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myTitleStyle {
|
||||
font-size: 30px;
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
}
|
||||
.tabsClass {
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
color: rgb(37, 157, 255);
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入站名'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableHead">
|
||||
<div class="td t1">站名</div>
|
||||
<div class="td t2">水位(m)</div>
|
||||
<div class="td t3">类型</div>
|
||||
<div class="td t4">预警类型</div>
|
||||
</div>
|
||||
<div class="tableBody">
|
||||
<div v-for="(item,index) in getSearchVal" class="tableRow">
|
||||
<div class="td t1" @click="toSh(item)">{{item.stnm}}</div>
|
||||
<div class="td t2">{{Number(item.z).toFixed(2)}}({{Number(item.gstate===1?(item.z-item.grz):(item.z-item.wrz)).toFixed(2)}})</div>
|
||||
<div class="td t3">{{sttp[item.sttp]}}</div>
|
||||
<div class="td t4">{{item.gstate===1?'超危险水位':item.wstate===1?'超警戒水位':'-'}}</div>
|
||||
</div>
|
||||
<div :style="{height:'80px'}">
|
||||
</div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="SH" label="山洪" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="SW" label="水文" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="title">按预警类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check2"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="超危险水位" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="超警戒水位" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const sttp = {
|
||||
RR:'水库水文站',
|
||||
ZQ:'河道水文站',
|
||||
ZP:'河道水文站',
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sttp:sttp,
|
||||
show:false,
|
||||
searchVal:'',
|
||||
check1:['SH','SW'],
|
||||
check2:['1','2'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => o.adnm && o.adnm?.indexOf(this.searchVal)>-1)
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.check1 = ['SH','SW']
|
||||
this.check2 = ['1','2']
|
||||
},
|
||||
async submit() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
try{
|
||||
const params = {
|
||||
sources:this.check1,
|
||||
types:this.check2
|
||||
}
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/rv/warn',params)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
uni.hideLoading();
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toSh(params) {
|
||||
console.log(`/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`)
|
||||
uni.navigateTo({
|
||||
url:`/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
getSearchVal: {
|
||||
handler(newVal) {
|
||||
console.log('newVal----',newVal);
|
||||
|
||||
this.$emit('hasData', newVal && newVal.length > 0);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tableHead{
|
||||
width: 97%;
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
background-color: #e4f2fe;
|
||||
display: flex;
|
||||
color: #208FEE;
|
||||
}
|
||||
.tableBody{
|
||||
width: 97%;
|
||||
height: calc( 100vh - 214px );
|
||||
background-color: #f7f7f7;//#ffffff;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tableRow{
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.td{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.t1{
|
||||
width: 25%;
|
||||
color: #208FEE;
|
||||
}
|
||||
.t2{
|
||||
width: 25%;
|
||||
}
|
||||
.t3{
|
||||
width: 25%;
|
||||
}
|
||||
.t4{
|
||||
width: 25%;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入乡镇'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableHead">
|
||||
<div class="td t1">乡镇</div>
|
||||
<div class="td t2">预警时间</div>
|
||||
<div class="td t3">预警状态</div>
|
||||
<div class="td t4">危险等级</div>
|
||||
</div>
|
||||
<div class="tableBody">
|
||||
<div v-for="(item,index) in getSearchVal" class="tableRow">
|
||||
<div class="td t1" @click="toSh(item)">{{item.adnm}}</div>
|
||||
<div class="td t2">{{item.warnstm}}</div>
|
||||
<div class="td t3">{{warnstatus[item.warnstatusid]}}</div>
|
||||
<div class="td t4">{{warngrade[item.warngradeid]}}</div>
|
||||
</div>
|
||||
<div :style="{height:'80px'}">
|
||||
</div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
@close="close"
|
||||
@open="myShow"
|
||||
>
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按预警状态</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="0" label="新产生" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="30" label="已关闭" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="title">按危险等级</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check2"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="6" label="立即转移" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="5" label="准备转移" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="title">按预警时间</text>
|
||||
<div :style="{display:'flex',marginTop:'10px'}">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showStmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showEtmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%'}"></text>
|
||||
</div>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showStmPicker"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showStmPicker = false"
|
||||
@cancel="showStmPicker = false"
|
||||
@close="showStmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showEtmPicker"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showEtmPicker = false"
|
||||
@cancel="showEtmPicker = false"
|
||||
@close="showEtmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const warnstatus = {
|
||||
'0':'新产生',
|
||||
'10':'已内部告警',
|
||||
'20':'已外部告警',
|
||||
'30':'关闭预警',
|
||||
'70':'灾情上报',
|
||||
}
|
||||
const warngrade = {
|
||||
'5':'准备转移',
|
||||
'6':'立即转移'
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
warnstatus:warnstatus,
|
||||
warngrade:warngrade,
|
||||
show:false,
|
||||
showStmPicker:false,
|
||||
showEtmPicker:false,
|
||||
searchVal:'',
|
||||
stm:Number(moment(new Date()).add(-1,'days')),
|
||||
etm:Number(new Date()),
|
||||
check1:['0','30'],
|
||||
check2:['6','5'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStmStr() {
|
||||
return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getEtmStr() {
|
||||
return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => o.adnm && o.adnm?.indexOf(this.searchVal)>-1)
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.stm = Number(moment(new Date()).add(-1,'days'))
|
||||
this.etm = Number(new Date())
|
||||
this.check1 = ['0','30']
|
||||
this.check2 = ['6','5']
|
||||
},
|
||||
async submit() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
if(!moment(this.stm).isBefore(this.etm)){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "开始时间需小于结束时间",
|
||||
})
|
||||
return
|
||||
}
|
||||
try{
|
||||
const params = {
|
||||
stm:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
etm:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
warnstatusids:this.check1,
|
||||
warngradeids:this.check2
|
||||
}
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/flood/warn',params)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
uni.hideLoading();
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toSh(record) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/forewarning/shInformation/shInformation?obj='+JSON.stringify(record) // 跳转到对应路径的页面
|
||||
});
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
getSearchVal: {
|
||||
handler(newVal) {
|
||||
console.log('newVal----',newVal);
|
||||
|
||||
this.$emit('hasData', newVal && newVal.length > 0);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tableHead{
|
||||
width: 97%;
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
background-color: #e4f2fe;
|
||||
display: flex;
|
||||
color: #208FEE;
|
||||
}
|
||||
.tableBody{
|
||||
width: 97%;
|
||||
height: calc( 100vh - 214px );
|
||||
background-color: #f7f7f7;//#ffffff;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tableRow{
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.td{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.t1{
|
||||
width: 25%;
|
||||
color: #208FEE;
|
||||
}
|
||||
.t2{
|
||||
width: 37%;
|
||||
}
|
||||
.t3{
|
||||
width: 18%;
|
||||
}
|
||||
.t4{
|
||||
width: 20%;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="山洪预警详情"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="bodyBg">
|
||||
<div class="mybody">
|
||||
<div class="row">
|
||||
<text class="lf">乡镇:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="xz"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">危险等级:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="wxdj"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">预警依据:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="yjyj"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">预警时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="yjsj"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
xz:'',
|
||||
wxdj:'',
|
||||
yjyj:'',
|
||||
yjsj:'',
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
onLoad(props){
|
||||
const record = JSON.parse(props.obj)
|
||||
this.xz = record.adnm
|
||||
this.wxdj = {'5':'准备转移','6':'立即转移'}[record.warngradeid]
|
||||
this.yjyj = record.warndesc
|
||||
this.yjsj = record.warnstm
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bodyBg{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.mybody{
|
||||
margin-top: 50px;
|
||||
padding-top: 10px;
|
||||
width: 97%;
|
||||
height: 92%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
width: 25%;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
width: 75%;
|
||||
min-height: 40px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入站名'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableHead">
|
||||
<div class="td t1">站名</div>
|
||||
<div class="td t2">水位(m)</div>
|
||||
<div class="td t3">类型</div>
|
||||
<div class="td t4">预警类型</div>
|
||||
</div>
|
||||
<div class="tableBody">
|
||||
<div v-for="(item,index) in getSearchVal" class="tableRow">
|
||||
<div class="td t1" @click="toSh(item)">{{item.stnm}}</div>
|
||||
<div class="td t2">{{Number(item.rz).toFixed(2)}}({{Number(item.calState===1?(item.rz-item.calFloodLev):item.desState===1?(item.rz-item.desFloodLev):(item.afsltdz)).toFixed(2)}})</div>
|
||||
<div class="td t3">{{sttp[item.sttp]}}</div>
|
||||
<div class="td t4">{{item.calState===1?'超校核水位':item.desState===1?'超设计水位':item.flState===1?'超汛限水位':'-'}}</div>
|
||||
</div>
|
||||
<div :style="{height:'80px'}">
|
||||
</div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="SK" label="水库" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="SW" label="水文" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="title">按预警类型</text>
|
||||
<u-checkbox-group
|
||||
placement="col"
|
||||
v-model="check2"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="超校核洪水位" :style="{marginTop:'5px'}" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="超设计洪水位" :style="{marginTop:'5px'}" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="3" label="超汛限水位" :style="{marginTop:'5px'}" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const sttp = {
|
||||
RR:'水库水文站',
|
||||
ZQ:'河道水文站',
|
||||
ZP:'河道水文站',
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sttp:sttp,
|
||||
show:false,
|
||||
searchVal:'',
|
||||
check1:['SK','SW'],
|
||||
check2:['1','2','3'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => o.adnm && o.adnm?.indexOf(this.searchVal)>-1)
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.check1 = ['SK','SW']
|
||||
this.check2 = ['1','2','3']
|
||||
},
|
||||
async submit() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
try{
|
||||
const params = {
|
||||
sources:this.check1,
|
||||
types:this.check2
|
||||
}
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/res/warn',params)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
uni.hideLoading();
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toSh(params) {
|
||||
console.log(`/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`)
|
||||
uni.navigateTo({
|
||||
url:`/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
getSearchVal: {
|
||||
handler(newVal) {
|
||||
console.log('newVal----',newVal);
|
||||
|
||||
this.$emit('hasData', newVal && newVal.length > 0);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tableHead{
|
||||
width: 97%;
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
background-color: #e4f2fe;
|
||||
display: flex;
|
||||
color: #208FEE;
|
||||
}
|
||||
.tableBody{
|
||||
width: 97%;
|
||||
height: calc( 100vh - 214px );
|
||||
background-color: #f7f7f7;//#ffffff;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.tableRow{
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.td{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.t1{
|
||||
width: 25%;
|
||||
color: #208FEE;
|
||||
}
|
||||
.t2{
|
||||
width: 25%;
|
||||
}
|
||||
.t3{
|
||||
width: 25%;
|
||||
}
|
||||
.t4{
|
||||
width: 25%;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="nav_bar">
|
||||
<!-- <u-navbar title="查看" @rightClick="rightClick" :autoBack="true">
|
||||
</u-navbar> -->
|
||||
<u-icon
|
||||
name="arrow-left"
|
||||
@click="rightClick"
|
||||
color="#2979ff"
|
||||
size="28"
|
||||
></u-icon>
|
||||
<view class="nav_bar_tit"> 查看 </view>
|
||||
</view>
|
||||
|
||||
<!-- 上一条下一条 -->
|
||||
<view class="tabs_h">
|
||||
<div
|
||||
class="leftTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||||
@click="perClick(1)"
|
||||
>
|
||||
上一条
|
||||
</div>
|
||||
<div
|
||||
class="rightTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||||
@click="nextClick(2)"
|
||||
>
|
||||
下一条
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<!-- info -->
|
||||
<view class="info">
|
||||
<u-form
|
||||
labelPosition="left"
|
||||
:model="infoForm"
|
||||
ref="infoForm"
|
||||
labelWidth="100"
|
||||
>
|
||||
<u-form-item
|
||||
label="工程类型"
|
||||
prop="projectType"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.projectType"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 工程名称 -->
|
||||
<u-form-item
|
||||
label="工程名称"
|
||||
prop="projectName"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.projectName"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 是否发电 -->
|
||||
<u-form-item
|
||||
label="是否发电"
|
||||
prop="isPowerGeneration"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.isPowerGeneration"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 是否泄洪 -->
|
||||
<u-form-item
|
||||
label="是否泄洪"
|
||||
prop="isFloodRelease"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.isFloodRelease"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 水位(m) -->
|
||||
<u-form-item label="水位(m)" prop="waterLevel" borderBottom ref="item3">
|
||||
<u--input
|
||||
v-model="infoForm.waterLevel"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 入库流量 (m³/s)： -->
|
||||
<u-form-item
|
||||
label="入库流量(m³/s)"
|
||||
prop="inflowVolume"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.inflowVolume"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<!-- 出库流量 (m³/s)： -->
|
||||
<u-form-item
|
||||
label="出库流量(m³/s)"
|
||||
prop="outflowVolume"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.outflowVolume"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 其他运行情况 -->
|
||||
<u-form-item
|
||||
label="其他运行情况"
|
||||
prop="remark"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
v-model="infoForm.remark"
|
||||
placeholder="请输入内容"
|
||||
disabled
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<!-- 上报人 -->
|
||||
<u-form-item label="上报人" prop="reporter" borderBottom ref="item3">
|
||||
<u--input
|
||||
v-model="infoForm.reporter"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 上报单位 -->
|
||||
<u-form-item
|
||||
label="上报单位"
|
||||
prop="reportUnit"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.reportUnit"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 上报时间 -->
|
||||
<u-form-item
|
||||
label="上报时间"
|
||||
prop="reportTime"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="infoForm.reportTime"
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 附件 -->
|
||||
<u-form-item
|
||||
label="附件"
|
||||
prop="checkboxValue1"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<image
|
||||
:showLoading="true"
|
||||
:src="src"
|
||||
width="80px"
|
||||
height="80px"
|
||||
mode="aspectFit"
|
||||
@click="toggleZoom"
|
||||
:style="{ transform: `scale(${zoomed ? 2 : 1})` }"
|
||||
></image>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
props: ['info'],
|
||||
data () {
|
||||
return {
|
||||
showTextTypeTab: 0,
|
||||
src: '../../../static/tabs/bigImg.png',
|
||||
infoForm: {
|
||||
checkboxValue1: '水库',
|
||||
reporter: '' // 上报人
|
||||
},
|
||||
zoomed: false
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
console.log('info', this.info)
|
||||
this.infoForm = this.info
|
||||
},
|
||||
methods: {
|
||||
// 切换图片放大状态的方法
|
||||
toggleZoom () {
|
||||
this.zoomed = !this.zoomed
|
||||
},
|
||||
perClick (val) {
|
||||
this.showTextTypeTab = val
|
||||
},
|
||||
nextClick (val) {
|
||||
this.showTextTypeTab = val
|
||||
},
|
||||
// 返回按钮
|
||||
rightClick () {
|
||||
console.log('rightClick')
|
||||
this.$emit('rightClick', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.tabs_h {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 56rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.leftTab {
|
||||
width: 80px;
|
||||
}
|
||||
.rightTab {
|
||||
width: 80px;
|
||||
}
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
// border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
|
||||
.nav_bar {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
// text-align: right;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
}
|
||||
.flsb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
width: 100%; /* 或者其他尺寸 */
|
||||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,521 @@
|
|||
<template>
|
||||
<view class="container" v-if="isdetail">
|
||||
<view class="nav_bar">
|
||||
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
||||
<view class="nav_bar_tit"> 工情信息 </view>
|
||||
</view>
|
||||
<!-- tabs -->
|
||||
<view class="table_h">
|
||||
<div
|
||||
class="leftTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||||
@click="tabChange(1)"
|
||||
>
|
||||
运行情况
|
||||
</div>
|
||||
<div
|
||||
class="rightTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||||
@click="tabChange(2)"
|
||||
>
|
||||
工程险情
|
||||
</div>
|
||||
</view>
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search">
|
||||
<view class="search_sear">
|
||||
<input
|
||||
class="searchInput"
|
||||
confirm-type="search"
|
||||
placeholder-style="color:#bbb"
|
||||
v-model="saerchValue"
|
||||
placeholder="请输入工程名称/上报人"
|
||||
@input="myinput"
|
||||
@confirm="myconfirm"
|
||||
/>
|
||||
<icon class="icon-small" type="search" size="14"></icon>
|
||||
|
||||
<icon
|
||||
v-if="saerchValue.length > 0"
|
||||
class="clear-icon"
|
||||
type="clear"
|
||||
size="16"
|
||||
@click="clearnClick"
|
||||
></icon>
|
||||
</view>
|
||||
<view class="more">
|
||||
<image
|
||||
style="width: 20px; height: 20px; margin-right: 10px"
|
||||
src="../../static/images/filter.png"
|
||||
@click="openpop"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表区域 -->
|
||||
<view class="table_info" v-if="list.length > 0">
|
||||
<p class="p" v-if="total > 0">共{{ total }}条信息</p>
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<view class="table_Page" @tap="toDetail(item)">
|
||||
<view class="info">
|
||||
<h4>{{ item.projectName }}</h4>
|
||||
<p class="info_P">
|
||||
<span class="info_n">{{ item.reporter }}</span>
|
||||
<span>{{ item.reportTime }}</span>
|
||||
</p>
|
||||
</view>
|
||||
<view v-if="item.isRead == 0" class="badge"
|
||||
><u-badge :isDot="true"></u-badge
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无数据 -->
|
||||
<view class="table_info" v-if="list.length == 0">
|
||||
<view class="table_Page" @tap="toDetail('item')">
|
||||
<view class="info">
|
||||
<h4>朝阳寺水库</h4>
|
||||
<p class="info_P">
|
||||
<span class="info_n">刘明</span>
|
||||
<span>2024-03-06 13:50:47</span>
|
||||
</p>
|
||||
</view>
|
||||
<view class="badge"><u-badge :isDot="true"></u-badge></view> </view
|
||||
></view>
|
||||
|
||||
<!-- 筛选抽屉 -->
|
||||
<view class="popup" v-if="popupOpen">
|
||||
<u-popup
|
||||
:show="popupOpen"
|
||||
mode="bottom"
|
||||
@close="() => (this.popupOpen = false)"
|
||||
>
|
||||
<view style="padding: 30px 20px">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u-form
|
||||
labelPosition="left"
|
||||
:model="model1"
|
||||
ref="uForm"
|
||||
labelWidth="100"
|
||||
>
|
||||
<u-form-item
|
||||
label="工程类型"
|
||||
prop="checkboxValue1"
|
||||
borderBottom
|
||||
labelWidth="80"
|
||||
ref="item3"
|
||||
>
|
||||
<u-checkbox-group
|
||||
v-model="model1.userInfo.checkboxValue1"
|
||||
shape="square"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{ marginRight: '16px' }"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</u-form-item>
|
||||
<!-- 时间 -->
|
||||
<u-form-item
|
||||
label="上报开始时间"
|
||||
prop="userInfo.start"
|
||||
borderBottom
|
||||
@click="
|
||||
isTime = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u-input
|
||||
v-model="model1.userInfo.start"
|
||||
border="none"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择上报开始时间"
|
||||
></u-input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item
|
||||
label="上报结束时间"
|
||||
prop="userInfo.end"
|
||||
borderBottom
|
||||
@click="isTime2 = true"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.userInfo.end"
|
||||
border="none"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择上报结束时间"
|
||||
></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="bottom">
|
||||
<u-button
|
||||
text="重置"
|
||||
customStyle="margin: 10px"
|
||||
@click="reset"
|
||||
></u-button>
|
||||
<u-button
|
||||
type="primary"
|
||||
text="确认"
|
||||
customStyle="margin: 10px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="isTime"
|
||||
v-model="valueTime"
|
||||
mode="datetime"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
></u-datetime-picker>
|
||||
|
||||
<u-datetime-picker
|
||||
:show="isTime2"
|
||||
v-model="valueTime2"
|
||||
mode="datetime"
|
||||
@confirm="confirm2"
|
||||
@cancel="cancel2"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container" v-else>
|
||||
<detail :info="detailInfo" @rightClick="rightClick"></detail>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import detail from './detail/index.vue'
|
||||
export default {
|
||||
components: { detail },
|
||||
data () {
|
||||
return {
|
||||
isdetail: true,
|
||||
detailInfo: {},
|
||||
showTextTypeTab: 1,
|
||||
saerchValue: '',
|
||||
popupOpen: false, //抽屉打开,
|
||||
// 基本案列数据
|
||||
checkboxList1: [
|
||||
{
|
||||
name: '水库',
|
||||
disabled: false,
|
||||
key: 'sk'
|
||||
},
|
||||
{
|
||||
name: '水电站',
|
||||
disabled: false,
|
||||
key: 'sdz'
|
||||
}
|
||||
],
|
||||
isTime: false,
|
||||
valueTime: Number(moment()),
|
||||
valueTime2: Number(moment()),
|
||||
isTime2: false,
|
||||
model1: {
|
||||
userInfo: {
|
||||
start: '',
|
||||
end: '',
|
||||
checkboxValue1: ['水库', '水电站']
|
||||
}
|
||||
},
|
||||
list: {},
|
||||
total: '',
|
||||
isfixed: false,
|
||||
params: {
|
||||
pageSo: { pageSize: 10, pageNumber: 0 },
|
||||
isRead: 0,
|
||||
projectName: this.saerchValue
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad () {
|
||||
this.getData()
|
||||
},
|
||||
// 页面滚动时，固定头部
|
||||
onPageScroll () {
|
||||
this.isfixed = true
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh () {
|
||||
uni.showToast({
|
||||
title: '努力加载中...'
|
||||
})
|
||||
this.params.pageSo.pageNumber = 0
|
||||
this.list = []
|
||||
this.getData()
|
||||
},
|
||||
// 上拉加载
|
||||
onReachBottom () {
|
||||
if (this.list.length >= this.total) {
|
||||
uni.showToast({
|
||||
title: '没有更多的数据了1'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
rightClick (val) {
|
||||
this.isdetail = true
|
||||
},
|
||||
toDetail (item) {
|
||||
console.log('item', item)
|
||||
this.detailInfo = item
|
||||
this.isdetail = false
|
||||
// uni.navigateTo({
|
||||
// url: './detail/index'
|
||||
// })
|
||||
},
|
||||
async getData () {
|
||||
let obj = this.params
|
||||
this.params.pageSo.pageNumber++
|
||||
if (this.model1.userInfo.start != '' && this.model1.userInfo.end != '') {
|
||||
obj.timeSo = {
|
||||
start: this.model1.userInfo.start,
|
||||
end: this.model1.userInfo.end
|
||||
}
|
||||
}
|
||||
|
||||
this.list = []
|
||||
try {
|
||||
if (this.showTextTypeTab === 1) {
|
||||
let res = await uni.$http.post(
|
||||
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
||||
obj
|
||||
)
|
||||
|
||||
let res2 = await uni.$http.post(
|
||||
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
||||
{ ...obj, isRead: 1 }
|
||||
)
|
||||
this.total = res.data.data.total + res2.data.data.total
|
||||
|
||||
this.list = res.data.data.records.concat(res2.data.data.records)
|
||||
console.log('--1-', res.data.data, res.data.data.records)
|
||||
console.log('--2-', res2.data.data, this.total, this.list)
|
||||
} else {
|
||||
let res = await uni.$http.post(
|
||||
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
||||
obj
|
||||
)
|
||||
let res2 = await uni.$http.post(
|
||||
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
||||
{ ...obj, isRead: 1 }
|
||||
)
|
||||
this.total = res.data.data.total + res2.data.data.total
|
||||
this.list = res.data.data.records.concat(res2.data.data.records)
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
|
||||
tabChange (val) {
|
||||
console.log('tabChange0', val)
|
||||
this.showTextTypeTab = val
|
||||
this.params.pageSo.pageNumber = 0
|
||||
this.getData()
|
||||
},
|
||||
submit () {
|
||||
this.popupOpen = false
|
||||
console.log('res', this.$refs.uForm)
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
// this.$refs.uForm
|
||||
// .validate()
|
||||
// .then(res => {
|
||||
// uni.$u.toast('校验通过')
|
||||
// this.popupOpen = false
|
||||
// })
|
||||
// .catch(errors => {
|
||||
// uni.$u.toast('校验失败')
|
||||
// })
|
||||
},
|
||||
reset () {
|
||||
const validateList = [
|
||||
'userInfo.start',
|
||||
'userInfo.end',
|
||||
'userInfo.checkboxValue1'
|
||||
]
|
||||
this.$refs.uForm.resetFields()
|
||||
this.$refs.uForm.clearValidate()
|
||||
setTimeout(() => {
|
||||
this.$refs.uForm.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.uForm.clearValidate()
|
||||
}, 10)
|
||||
this.model1 = {
|
||||
userInfo: {
|
||||
start: '',
|
||||
end: '',
|
||||
checkboxValue1: ['水库', '水电站']
|
||||
}
|
||||
}
|
||||
},
|
||||
confirm (val) {
|
||||
console.log(
|
||||
'点击确定按钮时触发',
|
||||
val.value,
|
||||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
)
|
||||
this.valueTime = Number(val)
|
||||
this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
this.isTime = false
|
||||
},
|
||||
cancel () {
|
||||
console.log('取消')
|
||||
this.isTime = false
|
||||
},
|
||||
confirm2 (val) {
|
||||
console.log(
|
||||
'点击确定按钮时触发',
|
||||
val.value,
|
||||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
)
|
||||
this.valueTime2 = Number(val)
|
||||
this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
this.isTime2 = false
|
||||
this.params.timeSo.end = this.model1.userInfo.end
|
||||
},
|
||||
cancel2 () {
|
||||
console.log('取消')
|
||||
this.isTime2 = false
|
||||
},
|
||||
|
||||
openpop () {
|
||||
this.popupOpen = true
|
||||
},
|
||||
myinput () {},
|
||||
myconfirm () {},
|
||||
clearnClick () {
|
||||
console.log('打印了clearnClick', this.saerchValue)
|
||||
this.saerchValue = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.table_info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20px;
|
||||
.p {
|
||||
text-align: right;
|
||||
}
|
||||
.table_Page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-top: 12rpx;
|
||||
padding-bottom: 12rpx;
|
||||
|
||||
.info_P {
|
||||
color: #a2a2a2;
|
||||
font-size: 24rpx;
|
||||
.info_n {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table_h {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 56rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.leftTab {
|
||||
width: 80px;
|
||||
}
|
||||
.rightTab {
|
||||
width: 80px;
|
||||
}
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
// border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
.nav_bar {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.search_sear {
|
||||
// background-color: #eee;
|
||||
width: 100%;
|
||||
padding: 30rpx 16rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
|
||||
.searchInput {
|
||||
background-color: #eee;
|
||||
height: 60rpx;
|
||||
border-radius: 6rpx;
|
||||
color: #bbb;
|
||||
padding-left: 60rpx;
|
||||
}
|
||||
|
||||
.icon-small {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 36rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 36rpx;
|
||||
transform: translateY(-50%);
|
||||
icon {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="工情信息"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<u-tabs
|
||||
:list="tabsOptions"
|
||||
@click="tabsChange"
|
||||
:scrollable=false
|
||||
class="tabsClass"
|
||||
:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
|
||||
:inactiveStyle="{color: '#606266',fontSize: '16px'}"
|
||||
lineColor="transparent"
|
||||
itemStyle="height: 44px"
|
||||
>
|
||||
</u-tabs>
|
||||
<uniQk v-if="tabsVal==='uniQk'" ref="childRef1"></uniQk>
|
||||
<uniXq v-if="tabsVal==='uniXq'" ref="childRef2"></uniXq>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import uniQk from './qk.vue';
|
||||
import uniXq from './xq.vue';
|
||||
|
||||
export default {
|
||||
components: { uniQk, uniXq },
|
||||
data() {
|
||||
return {
|
||||
tabsOptions:[
|
||||
{
|
||||
name:'运行情况',
|
||||
components:'uniQk'
|
||||
},
|
||||
{
|
||||
name:'工程险情',
|
||||
components:'uniXq'
|
||||
}
|
||||
],
|
||||
tabsVal:'uniQk'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
this.tabsVal = item.components
|
||||
console.log(this.tabsVal);
|
||||
},
|
||||
refresh(fun) {
|
||||
console.log('执行刷新')
|
||||
fun()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if(this.tabsVal==='uniQk'){
|
||||
this.$refs.childRef1.submit();
|
||||
}else{
|
||||
this.$refs.childRef2.submit();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myTitleStyle{
|
||||
font-size: 30px;
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
}
|
||||
.tabsClass{
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入工程名称/上报人'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div class="countNum"><text>共{{getSearchVal.length}}条信息</text></div>
|
||||
<div v-for="(item,index) in getSearchVal" class="listItem" @click="toForm(index)">
|
||||
<div>
|
||||
<div class="row1"><text>{{item.projectName}}</text></div>
|
||||
<div class="row2">
|
||||
<div>
|
||||
<text :style="{marginRight:'5px'}">{{item.reporter}}</text>
|
||||
<text>{{item.reportTime}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon" v-show="item.isRead===0"></div>
|
||||
</div>
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按工程类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="水库" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="水电站" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{display:'flex',alignItems:'center'}">
|
||||
<text class="title">按上报时间</text>
|
||||
<u-switch v-model="isTime" size="20" :style="{margin:'2px 0 0 10px'}"></u-switch>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showStmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showEtmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%'}"></text>
|
||||
</div>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showStmPicker"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showStmPicker = false"
|
||||
@cancel="showStmPicker = false"
|
||||
@close="showStmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showEtmPicker"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showEtmPicker = false"
|
||||
@cancel="showEtmPicker = false"
|
||||
@close="showEtmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
showStmPicker:false,
|
||||
showEtmPicker:false,
|
||||
searchVal:'',
|
||||
stm:Number(moment(new Date()).add(-7,'days')),
|
||||
etm:Number(new Date()),
|
||||
isTime:false,
|
||||
check1:['1','2'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStmStr() {
|
||||
return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getEtmStr() {
|
||||
return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => (o.projectName?.indexOf(this.searchVal)>-1 || o.reporter?.indexOf(this.searchVal)>-1))
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.isTime = false
|
||||
this.stm = Number(moment(new Date()).add(-7,'days'))
|
||||
this.etm = Number(new Date())
|
||||
this.check1 = ['1','2']
|
||||
},
|
||||
async submit() {
|
||||
if(!moment(this.stm).isBefore(this.etm)){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "开始时间需小于结束时间",
|
||||
})
|
||||
return
|
||||
}
|
||||
try{
|
||||
const params = {
|
||||
projectTypes:this.check1.length===0?['999']:this.check1,
|
||||
}
|
||||
if(this.isTime){
|
||||
params.timeSo = {
|
||||
start:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
console.log('params',this.check1==[])
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/xfProjectRun/list',params)
|
||||
console.log('res',res)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toForm(myIndex) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gqzq/gqxx/qkForm?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 20px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.countNum{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listItem{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row1{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.row2{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.icon{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<view :style="{backgroundColor: 'rgba(247, 247, 247, 1)',height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="查看"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="bodyBg">
|
||||
<div class="mybody">
|
||||
<div class="myHead" v-if="list.length>1">
|
||||
<div class="paging">
|
||||
<view
|
||||
class="paging_left"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(false)"
|
||||
>{{index===0?'返回':'上一条'}}</view>
|
||||
<view
|
||||
class="paging_right"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(true)"
|
||||
>{{index===list.length-1?'返回':'下一条'}}</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myscroll">
|
||||
<div :style="{height:'10px'}"></div>
|
||||
<div class="row">
|
||||
<text class="lf">上报时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportTime"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">工程类型:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'1':'水库','2':'水电站'}[getRecord.projectType]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>工程名称:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.projectName"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">是否发电:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'0':'否','1':'是'}[getRecord.isPowerGeneration]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">是否泄洪:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'0':'否','1':'是'}[getRecord.isFloodRelease]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">水位(m):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.waterLevel"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">入库流量(m³/s):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.inflowVolume"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">出库流量(m³/s):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.outflowVolume"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">其他运行情况:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="getRecord.remark"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报人:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reporter"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报单位:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportUnit"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">附件:</text>
|
||||
<div class="rf">
|
||||
<text v-if="imgList.length===0">{{getRecord.fileIds || '暂无数据'}}</text>
|
||||
<u-image
|
||||
:style="{marginTop:'10px'}"
|
||||
v-for="item in imgList"
|
||||
:src="'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath"
|
||||
width="100%"
|
||||
mode="aspectFit"
|
||||
@click="previewImage(0,'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath)"
|
||||
></u-image>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height:'20vh'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
record:{},
|
||||
list:[],
|
||||
index:0,
|
||||
cs:'',
|
||||
imgList:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getState()
|
||||
},
|
||||
computed: {
|
||||
getRecord() {
|
||||
return this.list[this.index] || {}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getState() {
|
||||
try{
|
||||
const id = this.getRecord.id
|
||||
console.log('id',id)
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/xfProjectRun/detail?id='+id)
|
||||
this.imgList = res.data.data
|
||||
console.log('res2',res.data.data)
|
||||
}catch(e){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
}
|
||||
},
|
||||
changePage(flag) {
|
||||
if(flag){
|
||||
if(this.index===this.list.length-1){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index+1
|
||||
this.getState()
|
||||
}
|
||||
}else{
|
||||
if(this.index===0){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index-1
|
||||
this.getState()
|
||||
}
|
||||
}
|
||||
},
|
||||
previewImage(index,url) {
|
||||
// 使用uni.previewImage预览图片
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: [url]
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad(props){
|
||||
const record = JSON.parse(props.obj)
|
||||
this.index = record.myIndex
|
||||
this.list= record.list
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bodyBg{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.mybody{
|
||||
margin-top: 50px;
|
||||
padding-top: 10px;
|
||||
width: 97%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
// width: 30%;
|
||||
width: 6.5rem;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
flex: 1;
|
||||
// width: 70%;
|
||||
min-height: 40px;
|
||||
line-height: 36px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.paging{
|
||||
position: relative;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 5px 50px 15px 50px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.paging_left{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
border-right: 0;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.paging_right{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.myHead{
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.myscroll{
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入工程名称/上报人'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div class="countNum"><text>共{{getSearchVal.length}}条信息</text></div>
|
||||
<div v-for="(item,index) in getSearchVal" class="listItem" @click="toForm(index)">
|
||||
<div>
|
||||
<div class="row1"><text>{{item.projectName}}</text></div>
|
||||
<div class="row2">
|
||||
<div>
|
||||
<text :style="{marginRight:'5px'}">{{item.reporter}}</text>
|
||||
<text>{{item.reportTime}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon" v-show="item.isRead===0"></div>
|
||||
</div>
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按严重程度</text>
|
||||
<u-checkbox-group
|
||||
placement="col"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="一般险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="较大险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="3" label="重大险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="4" label="特别重大险情" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="title">按工程类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check2"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="水库" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="水电站" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{display:'flex',alignItems:'center'}">
|
||||
<text class="title">按上报时间</text>
|
||||
<u-switch v-model="isTime" size="20" :style="{margin:'2px 0 0 10px'}"></u-switch>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showStmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showEtmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%'}"></text>
|
||||
</div>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showStmPicker"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showStmPicker = false"
|
||||
@cancel="showStmPicker = false"
|
||||
@close="showStmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showEtmPicker"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showEtmPicker = false"
|
||||
@cancel="showEtmPicker = false"
|
||||
@close="showEtmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
showStmPicker:false,
|
||||
showEtmPicker:false,
|
||||
searchVal:'',
|
||||
stm:Number(moment(new Date()).add(-7,'days')),
|
||||
etm:Number(new Date()),
|
||||
isTime:false,
|
||||
check1:['1','2','3','4'],
|
||||
check2:['1','2'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStmStr() {
|
||||
return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getEtmStr() {
|
||||
return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => (o.projectName?.indexOf(this.searchVal)>-1 || o.reporter?.indexOf(this.searchVal)>-1))
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.isTime = false
|
||||
this.stm = Number(moment(new Date()).add(-7,'days'))
|
||||
this.etm = Number(new Date())
|
||||
this.check1 = ['1','2','3','4']
|
||||
this.check2 = ['1','2']
|
||||
},
|
||||
async submit() {
|
||||
if(!moment(this.stm).isBefore(this.etm)){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "开始时间需小于结束时间",
|
||||
})
|
||||
return
|
||||
}
|
||||
try{
|
||||
const params = {
|
||||
severitys:this.check1.length===0?['999']:this.check1,
|
||||
projectTypes:this.check2.length===0?['999']:this.check2,
|
||||
}
|
||||
if(this.isTime){
|
||||
params.timeSo = {
|
||||
start:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
|
||||
console.log('params',params)
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/xfProjectIncident/list',params)
|
||||
console.log('res',res)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toForm(myIndex) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gqzq/gqxx/xqForm?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 20px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.countNum{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listItem{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row1{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.row2{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.icon{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
<template>
|
||||
<view :style="{backgroundColor: 'rgba(247, 247, 247, 1)',height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="查看"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="bodyBg">
|
||||
<div class="mybody">
|
||||
<div class="myHead" v-if="list.length>1">
|
||||
<div class="paging">
|
||||
<view
|
||||
class="paging_left"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(false)"
|
||||
>{{index===0?'返回':'上一条'}}</view>
|
||||
<view
|
||||
class="paging_right"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(true)"
|
||||
>{{index===list.length-1?'返回':'下一条'}}</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myscroll">
|
||||
<div :style="{height:'10px'}"></div>
|
||||
<div class="row">
|
||||
<text class="lf">上报时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportTime"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">工程类型:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'1':'水库','2':'水电站'}[getRecord.projectType]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>工程名称:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.projectName"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">严重程度:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'1':'一般险情','2':'较大险情','3':'重大险情','4':'特别重大险情'}[getRecord.severity]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">是否已管控:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'0':'否','1':'是'}[getRecord.isControlled]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">险情描述:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="getRecord.incidentDescription"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">管控责任人:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.controlResponsiblePerson"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">联系电话:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.responsiblePersonPhone"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">其他运行情况:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="getRecord.remark"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报人:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reporter"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报单位:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportUnit"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportTime"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">附件:</text>
|
||||
<div class="rf">
|
||||
<text v-if="imgList.length===0">{{getRecord.fileIds || '暂无数据'}}</text>
|
||||
<u-image
|
||||
:style="{marginTop:'10px'}"
|
||||
v-for="item in imgList"
|
||||
:src="'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath"
|
||||
width="100%"
|
||||
mode="aspectFit"
|
||||
@click="previewImage(0,'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath)"
|
||||
></u-image>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height:'20vh'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
record:{},
|
||||
list:[],
|
||||
index:0,
|
||||
cs:'',
|
||||
imgList:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getState()
|
||||
},
|
||||
computed: {
|
||||
getRecord() {
|
||||
return this.list[this.index] || {}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getState() {
|
||||
try{
|
||||
const id = this.getRecord.id
|
||||
console.log('id',id)
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/xfProjectIncident/detail?id='+id)
|
||||
this.imgList = res.data.data
|
||||
console.log('res',res)
|
||||
}catch(e){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
}
|
||||
},
|
||||
changePage(flag) {
|
||||
if(flag){
|
||||
if(this.index===this.list.length-1){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index+1
|
||||
this.getState()
|
||||
}
|
||||
}else{
|
||||
if(this.index===0){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index-1
|
||||
this.getState()
|
||||
}
|
||||
}
|
||||
},
|
||||
previewImage(index,url) {
|
||||
// 使用uni.previewImage预览图片
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: [url]
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad(props){
|
||||
const record = JSON.parse(props.obj)
|
||||
this.index = record.myIndex
|
||||
this.list= record.list
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bodyBg{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.mybody{
|
||||
margin-top: 50px;
|
||||
padding-top: 10px;
|
||||
width: 97%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
// width: 30%;
|
||||
width: 6rem;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
// width: 70%;
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
line-height: 36px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.paging{
|
||||
position: relative;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 5px 50px 15px 50px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.paging_left{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
border-right: 0;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.paging_right{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.myHead{
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.myscroll{
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="工情灾情"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="info">
|
||||
<div class="ul_list" @click="todetail(1)">
|
||||
<div class="left">工情信息</div>
|
||||
<div class="left" :style="{display:'flex',alignItems:'center'}">
|
||||
<div class="redDot" v-show="gq"></div>
|
||||
<text>></text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul_list" @click="todetail(2)">
|
||||
<div class="left">灾情信息</div>
|
||||
<div class="left" :style="{display:'flex',alignItems:'center'}">
|
||||
<div class="redDot" v-show="zq"></div>
|
||||
<text>></text>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
gq:false,
|
||||
zq:false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
todetail (val) {
|
||||
console.log('val', val)
|
||||
if (val == 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gqzq/gqxx/gqxx'
|
||||
})
|
||||
}
|
||||
if (val == 2) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gqzq/zqxx/zqxx'
|
||||
})
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
try{
|
||||
const res = await uni.$http.get("/gunshiApp/xfflood/xfProjectRun/has/read")
|
||||
const data = res.data.data
|
||||
if(data){
|
||||
console.log(data['1'],data['2'],data['3'])
|
||||
this.gq = (data['1']||data['2'])?true:false
|
||||
this.zq = data['3']?true:false
|
||||
}
|
||||
console.log('res',res)
|
||||
}catch(e){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.nav_bar {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
background-color: #fff;
|
||||
margin-top: 44px;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.ul_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.redDot{
|
||||
margin-right: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="nav_bar">
|
||||
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
||||
<view class="nav_bar_tit"> 灾情信息 </view>
|
||||
</view>
|
||||
<view class="search">
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search_sear">
|
||||
<input
|
||||
class="searchInput"
|
||||
confirm-type="search"
|
||||
placeholder-style="color:#bbb"
|
||||
v-model="saerchValue"
|
||||
placeholder="请输入"
|
||||
@input="myinput"
|
||||
@confirm="myconfirm"
|
||||
/>
|
||||
<icon class="icon-small" type="search" size="14"></icon>
|
||||
|
||||
<icon
|
||||
v-if="saerchValue.length > 0"
|
||||
class="clear-icon"
|
||||
type="clear"
|
||||
size="16"
|
||||
@click="clearnClick"
|
||||
></icon>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
<view class="more">
|
||||
<image
|
||||
style="width: 20px; height: 20px; margin-right: 10px"
|
||||
src="../../static/images/filter.png"
|
||||
@click="openpop"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- table_info -->
|
||||
<view class="table_info">
|
||||
<p class="p">共4条信息</p>
|
||||
<view>
|
||||
<view class="table_Page">
|
||||
<view class="info">
|
||||
<h4>朝阳寺水库</h4>
|
||||
<p class="info_P">
|
||||
<span class="info_n">刘明</span>
|
||||
<span>2024-03-06 13:50:47</span>
|
||||
</p>
|
||||
</view>
|
||||
<view class="badge"><u-badge :isDot="true"></u-badge></view>
|
||||
</view>
|
||||
<view class="table_Page">
|
||||
<view class="info">
|
||||
<h4>朝阳寺水库</h4>
|
||||
<p class="info_P">
|
||||
<span class="info_n">刘明</span>
|
||||
<span>2024-03-06 13:50:47</span>
|
||||
</p>
|
||||
</view>
|
||||
<view class="badge"><u-badge :isDot="true"></u-badge></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 抽屉 -->
|
||||
<view class="popup" v-if="popupOpen">
|
||||
<u-popup
|
||||
:show="popupOpen"
|
||||
mode="bottom"
|
||||
@close="() => (this.popupOpen = false)"
|
||||
>
|
||||
<view style="padding: 30px 20px">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u-form
|
||||
labelPosition="left"
|
||||
:model="model1"
|
||||
ref="uForm"
|
||||
labelWidth="100"
|
||||
>
|
||||
<u-form-item
|
||||
label="工程类型"
|
||||
prop="checkboxValue1"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
:customStyle="{ height: '55px' }"
|
||||
>
|
||||
<u-checkbox-group
|
||||
v-model="model1.userInfo.checkboxValue1"
|
||||
placement="row"
|
||||
@change="checkboxChange"
|
||||
style="flex-wrap: wrap; position: absolute"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{ marginRight: '16px', margin: '5px' }"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</u-form-item>
|
||||
<!-- 时间 -->
|
||||
<u-form-item
|
||||
label="上报开始时间"
|
||||
prop="userInfo.start"
|
||||
borderBottom
|
||||
@click="
|
||||
isTime = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u-input
|
||||
v-model="model1.userInfo.start"
|
||||
border="none"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择上报开始时间"
|
||||
></u-input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item
|
||||
label="上报结束时间"
|
||||
prop="userInfo.end"
|
||||
borderBottom
|
||||
@click="isTime2 = true"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.userInfo.end"
|
||||
border="none"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择上报结束时间"
|
||||
></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="bottom">
|
||||
<u-button
|
||||
text="重置"
|
||||
customStyle="margin: 10px"
|
||||
@click="reset"
|
||||
></u-button>
|
||||
<u-button
|
||||
type="primary"
|
||||
text="确认"
|
||||
customStyle="margin: 10px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="isTime"
|
||||
v-model="valueTime"
|
||||
mode="datetime"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
></u-datetime-picker>
|
||||
|
||||
<u-datetime-picker
|
||||
:show="isTime2"
|
||||
v-model="valueTime2"
|
||||
mode="datetime"
|
||||
@confirm="confirm2"
|
||||
@cancel="cancel2"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
saerchValue: '',
|
||||
popupOpen: false, //抽屉打开,
|
||||
// 基本案列数据
|
||||
checkboxList1: [
|
||||
{
|
||||
name: '一般险情',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '较大险情',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '重大险情',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '特别重大险情',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
isTime: false,
|
||||
valueTime: Number(moment()),
|
||||
valueTime2: Number(moment()),
|
||||
isTime2: false,
|
||||
model1: {
|
||||
userInfo: {
|
||||
start: '',
|
||||
end: '',
|
||||
checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
|
||||
}
|
||||
},
|
||||
params: {
|
||||
pageSo: { pageSize: 10, pageNumber: 0 },
|
||||
isRead: 0,
|
||||
projectName: this.saerchValue
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit () {
|
||||
this.popupOpen = false
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
// this.$refs.uForm
|
||||
// .validate()
|
||||
// .then(res => {
|
||||
// // uni.$u.toast('校验通过')
|
||||
// })
|
||||
// .catch(errors => {
|
||||
// // uni.$u.toast('校验失败')
|
||||
// })
|
||||
},
|
||||
reset () {
|
||||
const validateList = [
|
||||
'userInfo.start',
|
||||
'userInfo.end',
|
||||
'userInfo.checkboxValue1'
|
||||
]
|
||||
this.$refs.uForm.resetFields()
|
||||
this.$refs.uForm.clearValidate()
|
||||
setTimeout(() => {
|
||||
this.$refs.uForm.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.uForm.clearValidate()
|
||||
}, 10)
|
||||
|
||||
this.model1 = {
|
||||
userInfo: {
|
||||
start: '',
|
||||
end: '',
|
||||
checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
|
||||
}
|
||||
}
|
||||
},
|
||||
confirm (val) {
|
||||
console.log(
|
||||
'点击确定按钮时触发',
|
||||
val.value,
|
||||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
)
|
||||
this.valueTime = Number(val)
|
||||
this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
this.isTime = false
|
||||
},
|
||||
cancel () {
|
||||
console.log('取消')
|
||||
this.isTime = false
|
||||
},
|
||||
confirm2 (val) {
|
||||
console.log(
|
||||
'点击确定按钮时触发',
|
||||
val.value,
|
||||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
)
|
||||
this.valueTime2 = Number(val)
|
||||
this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||||
this.isTime2 = false
|
||||
},
|
||||
cancel2 () {
|
||||
console.log('取消')
|
||||
this.isTime2 = false
|
||||
},
|
||||
checkboxChange (n) {
|
||||
console.log('change', n)
|
||||
// this.model1.userInfo.checkboxValue1 = e.name
|
||||
},
|
||||
openpop () {
|
||||
this.popupOpen = true
|
||||
},
|
||||
myinput () {},
|
||||
myconfirm () {},
|
||||
clearnClick () {
|
||||
console.log('打印了clearnClick', this.saerchValue)
|
||||
this.saerchValue = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
|
||||
.table_info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20px;
|
||||
.p {
|
||||
text-align: right;
|
||||
}
|
||||
.table_Page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-top: 12rpx;
|
||||
padding-bottom: 12rpx;
|
||||
|
||||
.info_P {
|
||||
color: #a2a2a2;
|
||||
font-size: 24rpx;
|
||||
.info_n {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav_bar {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.search_sear {
|
||||
// background-color: #eee;
|
||||
width: 100%;
|
||||
padding: 30rpx 16rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
|
||||
.searchInput {
|
||||
background-color: #eee;
|
||||
height: 60rpx;
|
||||
border-radius: 6rpx;
|
||||
color: #bbb;
|
||||
padding-left: 60rpx;
|
||||
}
|
||||
|
||||
.icon-small {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 36rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 36rpx;
|
||||
transform: translateY(-50%);
|
||||
icon {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<view :style="{backgroundColor: 'rgba(247, 247, 247, 1)',height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="查看"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<div class="bodyBg">
|
||||
<div class="mybody">
|
||||
<div class="myHead" v-if="list.length>1">
|
||||
<div class="paging">
|
||||
<view
|
||||
class="paging_left"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(false)"
|
||||
>{{index===0?'返回':'上一条'}}</view>
|
||||
<view
|
||||
class="paging_right"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
@click="changePage(true)"
|
||||
>{{index===list.length-1?'返回':'下一条'}}</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myscroll">
|
||||
<div :style="{height:'10px'}"></div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>灾害发生时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.otime"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>严重程度:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="{'1':'一般险情','2':'较大险情','3':'重大险情','4':'特别重大险情'}[getRecord.severity]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>灾害发生地点:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.address"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">经度:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.lgtd"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">纬度:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.lttd"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>灾情描述:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="getRecord.ddscrib"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">伤亡人数:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.dpcount"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">失踪人数:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.mpcount"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">转移人数:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.spcount"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">损毁房屋(间):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.chcount"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">直接经济损失(万元):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.elose"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">过程降雨量(mm):</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.pfrain"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">其他运行情况:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="getRecord.remark"
|
||||
:disabled='true'
|
||||
height=300
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报人:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reporter"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报单位:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportUnit"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">上报时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="getRecord.reportTime"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">附件:</text>
|
||||
<div class="rf">
|
||||
<text v-if="imgList.length===0">{{getRecord.fileIds || '暂无数据'}}</text>
|
||||
<u-image
|
||||
:style="{marginTop:'10px'}"
|
||||
v-for="item in imgList"
|
||||
:src="'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath"
|
||||
width="100%"
|
||||
mode="aspectFit"
|
||||
@click="previewImage(0,'http://223.75.53.141:9102/test.by-lyf.tmp'+item.filePath)"
|
||||
></u-image>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height:'20vh'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
record:{},
|
||||
list:[],
|
||||
index:0,
|
||||
cs:'',
|
||||
imgList:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getState()
|
||||
},
|
||||
computed: {
|
||||
getRecord() {
|
||||
return this.list[this.index] || {}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getState() {
|
||||
try{
|
||||
const mtcd = this.getRecord.mtcd
|
||||
console.log('mtcd',mtcd)
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/iaCHsfwater/detail?mtcd='+mtcd)
|
||||
this.imgList = res.data.data
|
||||
console.log('res',res)
|
||||
}catch(e){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
}
|
||||
},
|
||||
changePage(flag) {
|
||||
if(flag){
|
||||
if(this.index===this.list.length-1){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index+1
|
||||
this.getState()
|
||||
}
|
||||
}else{
|
||||
if(this.index===0){
|
||||
uni.navigateBack()
|
||||
}else{
|
||||
this.index = this.index-1
|
||||
this.getState()
|
||||
}
|
||||
}
|
||||
},
|
||||
previewImage(index,url) {
|
||||
// 使用uni.previewImage预览图片
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: [url]
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad(props){
|
||||
const record = JSON.parse(props.obj)
|
||||
this.index = record.myIndex
|
||||
this.list= record.list
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bodyBg{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.mybody{
|
||||
margin-top: 50px;
|
||||
padding-top: 10px;
|
||||
width: 97%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
// width: 30%;
|
||||
width: 8rem;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
// width: 70%;
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
line-height: 36px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.paging{
|
||||
position: relative;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: 5px 50px 15px 50px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.paging_left{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
border-right: 0;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.paging_right{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border: 1px solid #dadbde;
|
||||
background: rgb(245, 247, 250);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.myHead{
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.myscroll{
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<template>
|
||||
<view class="tabBody">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction=false
|
||||
v-model="searchVal"
|
||||
placeholder='请输入灾害发生地点/上报人'
|
||||
height=40
|
||||
>
|
||||
</u-search>
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<view
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../../static/images/filter.png'" width="22px" height="22px"></u--image>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div class="countNum"><text>共{{getSearchVal.length}}条信息</text></div>
|
||||
<div v-for="(item,index) in getSearchVal" class="listItem" @click="toForm(index)">
|
||||
<div>
|
||||
<div class="row1"><text>{{item.address+'('+{'1':'一般险情','2':'较大险情','3':'重大险情','4':'特别重大险情'}[item.severity]+')'}}</text></div>
|
||||
<div class="row2">
|
||||
<div>
|
||||
<text :style="{marginRight:'5px'}">{{item.reporter}}</text>
|
||||
<text>{{item.reportTime}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon" v-show="item.isRead===0"></div>
|
||||
</div>
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按严重程度</text>
|
||||
<u-checkbox-group
|
||||
placement="col"
|
||||
v-model="check1"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="1" label="一般险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="2" label="较大险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="3" label="重大险情" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="4" label="特别重大险情" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{display:'flex',alignItems:'center'}">
|
||||
<text class="title">按上报时间</text>
|
||||
<u-switch v-model="isTime" size="20" :style="{margin:'2px 0 0 10px'}"></u-switch>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showStmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showEtmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%'}"></text>
|
||||
</div>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showStmPicker"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showStmPicker = false"
|
||||
@cancel="showStmPicker = false"
|
||||
@close="showStmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showEtmPicker"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showEtmPicker = false"
|
||||
@cancel="showEtmPicker = false"
|
||||
@close="showEtmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
showStmPicker:false,
|
||||
showEtmPicker:false,
|
||||
searchVal:'',
|
||||
stm:Number(moment(new Date()).add(-7,'days')),
|
||||
etm:Number(new Date()),
|
||||
isTime:false,
|
||||
check1:['1','2','3','4'],
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStmStr() {
|
||||
return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getEtmStr() {
|
||||
return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getSearchVal() {
|
||||
if(this.searchVal){
|
||||
return this.list.filter(o => (o.reporter?.indexOf(this.searchVal)>-1 || o.address?.indexOf(this.searchVal)>-1))
|
||||
}else{
|
||||
return this.list
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.isTime = false
|
||||
this.stm = Number(moment(new Date()).add(-7,'days'))
|
||||
this.etm = Number(new Date())
|
||||
this.check1 = ['1','2','3','4']
|
||||
},
|
||||
async submit() {
|
||||
if(!moment(this.stm).isBefore(this.etm)){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "开始时间需小于结束时间",
|
||||
})
|
||||
return
|
||||
}
|
||||
try{
|
||||
const params = {
|
||||
severitys:this.check1.length===0?['999']:this.check1,
|
||||
}
|
||||
if(this.isTime){
|
||||
params.timeSo = {
|
||||
start:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
console.log('params',params)
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/iaCHsfwater/queryList',params)
|
||||
console.log('res',res)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
toForm(myIndex) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gqzq/zqxx/form?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabBody{
|
||||
margin-top: 44px;
|
||||
background-color: rgba(247, 247, 247, 1);
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
}
|
||||
.searchBox{
|
||||
height: 62px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 20px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.countNum{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listItem{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row1{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.row2{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.icon{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.searchBox_left{
|
||||
width: 82%;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.searchBox_right{
|
||||
width: 18%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="灾情信息"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<uniTable ref="childRef"></uniTable>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import uniTable from './table.vue';
|
||||
|
||||
export default {
|
||||
components: { uniTable },
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
onShow() {
|
||||
this.$refs.childRef.submit();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myTitleStyle{
|
||||
font-size: 30px;
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
}
|
||||
.tabsClass{
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view class="rain-detail-box">
|
||||
<u-status-bar></u-status-bar>
|
||||
<view class="nav-bar">
|
||||
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||
<view class="title">
|
||||
{{stnm}}
|
||||
<text style="font-size:12px;margin-left:5px">{{sta}}({{rain}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar" >
|
||||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||||
监测数据
|
||||
</view>
|
||||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
|
||||
统计数据
|
||||
</view>
|
||||
<view class="spjk" @click="activeOne = 3" :class="{'active':activeOne == 3}">
|
||||
视频监控
|
||||
</view>
|
||||
<view class="zbyq" @click="activeOne = 2" :class="{'active':activeOne == 2}">
|
||||
周边雨情
|
||||
</view>
|
||||
</view>
|
||||
<view class="rain-detail-content">
|
||||
<Jcsj :stcd="stcd" :source="source" :grz="grz" :wrz="wrz" v-if="activeOne == 0"/>
|
||||
<Tjsj :stcd="stcd" :source="source" v-else-if="activeOne == 1"/>
|
||||
<Spjk :stcd="stcd" :source="source" v-else-if="activeOne == 3"/>
|
||||
<Zbyq :stcd="stcd" v-else-if="activeOne == 2"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Jcsj from "./jcsj/jcsj.vue"
|
||||
import Tjsj from "./tjsj/tjsj.vue"
|
||||
import Zbyq from "./zbyq/zbyq.vue"
|
||||
import Spjk from "./spjk/spjk.vue"
|
||||
const staType = {
|
||||
MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"
|
||||
}
|
||||
const rainType = {'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
activeOne:0,
|
||||
stcd:'',
|
||||
stnm:'',
|
||||
source:'',
|
||||
wrz:'',
|
||||
grz:''
|
||||
}
|
||||
},
|
||||
components:{
|
||||
Jcsj,
|
||||
Tjsj,
|
||||
Zbyq,
|
||||
Spjk,
|
||||
},
|
||||
methods:{
|
||||
backTo(){
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.stcd = option.stcd;
|
||||
this.stnm = option.stnm;
|
||||
this.source = option.source;
|
||||
this.grz = option.grz;
|
||||
this.wrz = option.wrz;
|
||||
this.sta = staType[option.sttp];
|
||||
this.rain = rainType[option.source];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rain-detail-box{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
// margin-top: 30px;
|
||||
// padding-top: 20px;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
}
|
||||
.title{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
margin-right: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 30px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.active{
|
||||
color: #39a6ff;
|
||||
}
|
||||
.rain-detail-content{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
|
||||
export default function DrpOption(data=[],wrz,grz) {
|
||||
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||
const maxSw = Math.max(...data.map(obj => obj.z))
|
||||
const minSw = Math.min(...data.map(obj => obj.z))
|
||||
const maxLl = Math.max(...data.map(obj => obj.tq))
|
||||
const minLl = Math.min(...data.map(obj => obj.tq))
|
||||
console.log("maxLl",wrz,grz);
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "13%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '35%'
|
||||
},
|
||||
{
|
||||
bottom: "5%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '35%'
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
// 图例的位置
|
||||
data: ['警戒水位', '危险水位', "降雨量", "水位", "转换流量"],
|
||||
left:3,
|
||||
right:0,
|
||||
itemWidth:16,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm).reverse(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm.substr("2020-".length,11)),
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
formatter: val => val.substr('2020-'.length, 11)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
inverse: true,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "降雨量(mm)",
|
||||
nameLocation: "start",
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: maxVal
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: "水位(m)",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minSw,
|
||||
max: maxSw
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "流量(m³/s)",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: minLl,
|
||||
max: maxLl
|
||||
}
|
||||
],
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '危险水位',
|
||||
type: 'line',
|
||||
color: "#D9001B",
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => grz),
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '警戒水位',
|
||||
type: 'line',
|
||||
color: "#F59A23",
|
||||
barWidth: '60%',
|
||||
data: data.map(o => wrz),
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
name: '降雨量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: data.map(o => o.drp).reverse(),
|
||||
itemStyle: {
|
||||
color: "#007AFD",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: "#0AE0B5",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.z ? o.z.toFixed(2) : null),
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 2,
|
||||
name: '转换流量',
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.tq),
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
<!-- <uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <view class="" style="width: 100%; height: 3px; background-color: #dfdfdf; margin-bottom: 2px;">
|
||||
|
||||
" </view> -->
|
||||
<view style="text-align: right; margin-bottom: -15px;">
|
||||
<text :class="{'active':selactOne == 0}" @click="selactOne = 0" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">图</text>
|
||||
<text :class="{'active':selactOne == 1}" @click="selactOne = 1" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">表</text>
|
||||
</view>
|
||||
<view class="jcsj-content">
|
||||
<view class="jcsj-charts" v-if="selactOne == 0">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<view style="margin-top: 20px;" v-if="selactOne == 1">
|
||||
<JcsjTable :tableData="tableData" />
|
||||
</view>
|
||||
<view style="height:300px" v-if="selactOne == 0"></view>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="datetime"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="datetime"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
import JcsjTable from "./jcsjTable"
|
||||
import drpOption from "./chartOption.js"
|
||||
const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const etm = moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
wrz:String,
|
||||
grz:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
stm,
|
||||
etm,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
tableData:[],
|
||||
chartData: {},
|
||||
rainChartData:[],
|
||||
selactOne:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
JcsjTable
|
||||
},
|
||||
watch:{
|
||||
rainChartData(newV, oldV){
|
||||
this.chartData = {...drpOption(newV,this.wrz,this.grz)}
|
||||
this.tableData = [...newV]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
handleRanger(e){
|
||||
console.log(e);
|
||||
this.tm = [...e]
|
||||
},
|
||||
// 搜索
|
||||
async getJcsjData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/river/water/monitor/data",
|
||||
{
|
||||
stcd:this.stcd,
|
||||
stm:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
etm:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
source:this.source
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.rainChartData = [...data.data];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
searchHandle(){
|
||||
this.getJcsjData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getJcsjData();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jcsj-box{
|
||||
.time-ranger{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.search-btn{
|
||||
margin: 3px 0 0 5px;
|
||||
// color: #3399ef;
|
||||
}
|
||||
}
|
||||
.jcsj-content{
|
||||
max-height:100vh;
|
||||
overflow-y:auto
|
||||
}
|
||||
.jcsj-charts{
|
||||
width:100%;
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.active{
|
||||
border-color: #68bbff !important;
|
||||
color: #68bbff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 40px;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 80px">时间</th>
|
||||
<th style="width: 80px;">
|
||||
雨量(mm)
|
||||
</th>
|
||||
<th style="width: 90px;">
|
||||
水位(m)
|
||||
</th>
|
||||
<th style="width: 80px; position: relative;">
|
||||
<view>
|
||||
转换流量<br>
|
||||
<text style="position: absolute; bottom:-10px; left: 20px;">(m³/s)</text>
|
||||
</view>
|
||||
</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in newList" :key="index">
|
||||
<td style="width: 30px">{{ index + 1 }}</td>
|
||||
<td style="width: 80px;">{{ item.tm }}</td>
|
||||
<td style="width: 80px">{{ item.drp }}</td>
|
||||
<td style="width: 100px">{{ item.z ? item.z.toFixed(2) : "-" }}</td>
|
||||
<td style="width: 80px">{{ item.tq ? item.tq : "-" }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
newList(){
|
||||
if(this.tableData.length){
|
||||
return this.tableData.map(item => ({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 85rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<view class="spjk-box">
|
||||
<view class="select-bar">
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="list"
|
||||
@change="change"
|
||||
:clear="false"
|
||||
>
|
||||
</uni-data-select>
|
||||
</view>
|
||||
<view class="video-box" v-if="this.list.length">
|
||||
<!-- <web-view :src="webURL" style="height: 400px;"></web-view> -->
|
||||
<iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
list:[],
|
||||
webURL:'',
|
||||
show:0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
receiveRenderData(e){
|
||||
this.show = e.data
|
||||
},
|
||||
async getList(){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
`/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
|
||||
if(data.code == 200){
|
||||
let newData;
|
||||
console.log("23",data.data);
|
||||
if(data.data.length > 0){
|
||||
newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
|
||||
this.list = [...newData];
|
||||
this.value = newData[0].value
|
||||
this.getVideoSrc(newData[0].camId)
|
||||
}
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async getVideoSrc(id){
|
||||
console.log(id);
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
`/gunshiApp/xfflood/xfCctvB/preview/${id}`)
|
||||
if(data.code == 200){
|
||||
this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
this.getVideoSrc(e)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
// this.creatFlvElement()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script module="renderModal" lang="renderjs">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dom: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dom = document.getElementById('iframe')
|
||||
// 接收iframe传过来的值
|
||||
window.addEventListener('message', (e)=> {
|
||||
var data = e.data;
|
||||
this.emitData(data)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
emitData(e) {
|
||||
this.$ownerInstance.callMethod('receiveRenderData',e)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spjk-box{
|
||||
.select-bar{
|
||||
margin: 10px 15px;
|
||||
}
|
||||
.video-box{
|
||||
|
||||
.normal{
|
||||
position: absolute;
|
||||
// width: 370px;
|
||||
// height: 300px;
|
||||
top: 170px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.active{
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<view class="tjsj-box">
|
||||
<uni-row class="tjsj-row" :width="700">
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近1h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h1||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近3h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h3||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近6h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h6||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近12h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h12||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近24h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h24||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近48h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h48||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">今日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.today||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">昨日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本月雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.monthDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年降雨天数</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" >本年最大日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="display: flex; justify-content: center;">
|
||||
<text>{{tableData.maxDrp||0}}</text>
|
||||
<text style="color: #E69224;">({{maxDrpTime}})</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">24h水位变幅(m)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.rzDiff > 0 ? "+" :"" }}{{tableData.rzDiff?tableData.rzDiff.toFixed(2) : 0}}</view>
|
||||
</uni-col> <uni-col :span="12">
|
||||
<view class="first-row" style="border-bottom: 1px solid #dfdfdf;">本年最高水位(m)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="border-bottom: 1px solid #dfdfdf;">{{tableData.maxRz ? tableData.maxRz.toFixed(2) :0}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<view style="height:150px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
default:''
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData:{},
|
||||
days:moment().diff(moment().startOf('year'),'days')+1
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
maxDrpTime(){
|
||||
if(this.tableData.maxDrpTime){
|
||||
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
`/gunshiApp/xfflood/river/water/detail`,{
|
||||
source:this.source,
|
||||
stcd:this.stcd,
|
||||
type:1
|
||||
}
|
||||
)
|
||||
if(data.code == 200){
|
||||
this.tableData = {...data.data};
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tjsj-box{
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
.tjsj-row{
|
||||
.first-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
}
|
||||
.second-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<view class="list-box">
|
||||
<uni-row class="list-row" >
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" style="margin-left: 10px;">
|
||||
<text style="display: inline-block; margin-bottom: 10px; font-weight: bold;">{{info.stnm}}</text>
|
||||
<view>
|
||||
<text style="margin-right: 60px; color: #aaaaaa;">{{sttype[info.source]}}</text>
|
||||
<text style="color: #aaaaaa;">{{info.distance ? info.distance.toFixed(2) : 0}}km</text>
|
||||
</view>
|
||||
<text style="color: #aaaaaa;">{{info.tm}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12" >
|
||||
<view class="second-row" style="border: 1px solid #dfdfdf; font-size: 12px;border-bottom: 1px solid #dfdfdf;">
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
1h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
3h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h1}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h3}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
6h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
24h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-right: 1px solid #dfdfdf;">
|
||||
{{info.h6}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; ">
|
||||
{{info.h24}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
info:Object,
|
||||
default:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sttype: {
|
||||
"SH": '山洪',
|
||||
"SW": '水文',
|
||||
"QX": '气象',
|
||||
"SK": '水库',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box{
|
||||
.list-row{
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
.second-row{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="zbyq-box">
|
||||
<view class="search-bar">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
placeholder="请输入站点"
|
||||
height="40px"
|
||||
@change="inputChange"
|
||||
v-model="formData.value"
|
||||
></u-search>
|
||||
<image
|
||||
src="../../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; margin-right: 10px; margin-left: 10px;"
|
||||
@click="popupOpen = true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-for="(item,index) in list" :key="index" style="margin-bottom: 5px;">
|
||||
<ResList :info="item" />
|
||||
</view>
|
||||
<view style="height:300px"></view>
|
||||
</view>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
||||
<view style="padding: 30px 20px;">
|
||||
<text style="font-weight: bold;">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px;">
|
||||
<u-checkbox-group
|
||||
v-model="formData.sources"
|
||||
@change="checkboxChange"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{margin: '7px'}"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<text style="font-weight: bold; margin-bottom: 5px;">按距离</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
<u--input
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
type="number"
|
||||
v-model="formData.distance"
|
||||
style="width: 50%; margin-top: 5px; margin-right: 10px;"
|
||||
></u--input>
|
||||
<text>(km)</text>
|
||||
</view>
|
||||
<view style="display: flex; position:absolute;bottom:20px;right:20px">
|
||||
<u-button text="重置" class="bottom-btn1"
|
||||
@click="formData = {...formData,sources,distance:1}"></u-button>
|
||||
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popConfirm"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResList from "./resList.vue"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupOpen:false,
|
||||
sources:["SH","SW","QX","SK"],
|
||||
checkboxList1: [{
|
||||
name: '山洪',
|
||||
value: "SH"
|
||||
},
|
||||
{
|
||||
name: '水文',
|
||||
value: "SW"
|
||||
},
|
||||
{
|
||||
name: '气象',
|
||||
value: "QX"
|
||||
},
|
||||
{
|
||||
name: '水库',
|
||||
value: "SK"
|
||||
}
|
||||
],
|
||||
|
||||
formData:{
|
||||
value:'',
|
||||
sources:["SH","SW","QX","SK"],
|
||||
distance:1,
|
||||
stcd:this.stcd
|
||||
},
|
||||
list:[], //搜索结果
|
||||
saveList:[] //保存搜索结果
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ResList
|
||||
},
|
||||
methods: {
|
||||
inputChange(e){
|
||||
console.log("e",e);
|
||||
if(!e) this.list = this.saveList;
|
||||
this.formData={...this.formData,value:e}
|
||||
let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
|
||||
this.list = filterData;
|
||||
},
|
||||
checkboxChange(n) {
|
||||
console.log('change', n);
|
||||
this.formData = {...this.formData,sources:n};
|
||||
},
|
||||
popConfirm(){
|
||||
this.popupOpen = false
|
||||
this.getList()
|
||||
},
|
||||
async getList(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryNearbyRainStations",{...this.formData}
|
||||
)
|
||||
console.log("data",data);
|
||||
if(data.code == 200){
|
||||
this.list = [...data.data]
|
||||
this.saveList = [...data.data]
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zbyq-box{
|
||||
.search-bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content{
|
||||
margin-top: 10px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-btn1{
|
||||
width: 100px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2{
|
||||
width: 100px;
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
import moment from 'moment';
|
||||
|
||||
export default function DrpOption(data=[]) {
|
||||
const maxY = Math.max(...data.map(item => item.sumDrp))
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
x: 18,
|
||||
y: 24,
|
||||
x2: 28,
|
||||
y2: 36,
|
||||
borderWidth: 0,
|
||||
bottom: '10%',
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => moment(o.time).format("HH:mm")),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bbb',
|
||||
fontSize: 14,
|
||||
overflow: 'truncate',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#dfdfdf',
|
||||
width: 0.5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bbb',
|
||||
fontSize: 10,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: 0,
|
||||
max:maxY
|
||||
}
|
||||
],
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: 'slider', // 设置为滑动条类型
|
||||
// xAxisIndex: 0, // 指定控制第一个 x 轴
|
||||
// start: 0, // 初始窗口的起始位置（百分比）
|
||||
// end: 100, // 初始窗口的结束位置（百分比）
|
||||
|
||||
// }
|
||||
// ],
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
name: '面雨量(mm)',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: data.map(o => o.sumDrp),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6395f9"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<view class="warn-swiper" v-if="warnings.length > 0">
|
||||
<view class="warn-icon">
|
||||
<image
|
||||
style="
|
||||
width: 18rpx;
|
||||
height: 22rpx;
|
||||
margin-right: 16rpx;
|
||||
vertical-align: middle;
|
||||
"
|
||||
src="../../static/tabs/ld.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<view class="marquee-container">
|
||||
<view
|
||||
class="marquee-content"
|
||||
:style="{ animationDuration: `${duration}s` }"
|
||||
>
|
||||
<text
|
||||
v-for="(item, index) in loopWarnings"
|
||||
:key="index"
|
||||
class="warn-item"
|
||||
@tap="goDetail(item)"
|
||||
>
|
||||
{{ item.content }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WarnSwiper",
|
||||
props: {
|
||||
warnings: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 15, // 动画持续时间，可根据内容长度调整
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
loopWarnings() {
|
||||
// 复制一份数据实现无缝循环
|
||||
return [...this.warnings, ...this.warnings];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goDetail(record) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/forewarning/shInformation/shInformation?obj=" +
|
||||
JSON.stringify(record), // 跳转到对应路径的页面
|
||||
});
|
||||
|
||||
// this.$emit("onWarnClick", item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.warn-swiper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background: rgba(255, 77, 79, 0.1);
|
||||
padding: 20rpx;
|
||||
padding-left: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.warn-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.marquee-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.marquee-content {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
animation: marquee linear infinite;
|
||||
|
||||
.warn-item {
|
||||
color: #ff9001;
|
||||
font-size: 28rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<div class="img">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
src="../../static/images/u8.png"
|
||||
mode="scaleToFill"
|
||||
></image>
|
||||
</div>
|
||||
<uni-forms :modelValue="formData" class="form">
|
||||
<uni-forms-item>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.username"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<uni-easyinput
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<checkbox :checked="formData.checked" @click="handleChange(formData)" /><text
|
||||
>记住用户名和密码</text
|
||||
>
|
||||
</uni-forms-item>
|
||||
<!-- <button type="primary" class="button" @click="xian">县</button> -->
|
||||
<!-- <button type="primary" class="button" @click="xiang">乡</button> -->
|
||||
<button type="primary" class="button" @click="login(formData)">
|
||||
登录
|
||||
</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CryptoJS from 'crypto-js'
|
||||
import { onMounted } from "vue"
|
||||
let checked = false
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
username: '',
|
||||
password: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(uni.getStorageSync('loginChecked'));
|
||||
|
||||
if (uni.getStorageSync('loginChecked')===true){
|
||||
this.formData = {
|
||||
username: uni.getStorageSync('loginName'),
|
||||
password: uni.getStorageSync('password'),
|
||||
checked: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新版本
|
||||
init() {
|
||||
console.log("sfsfsfsf");
|
||||
this.checkVersion();
|
||||
},
|
||||
// 检查版本更新情况
|
||||
async checkVersion() {
|
||||
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.get("/gunshiApp/xfflood/appVersionRecord/latest");
|
||||
console.log("data",data);
|
||||
|
||||
if (data.code == 200) {
|
||||
const selfVersionCode = uni.getSystemInfoSync().appWgtVersion //当前App版本号
|
||||
const newVersionCode = data.data.version; //线上最新版本号
|
||||
console.log("selfVersionCode111",selfVersionCode);
|
||||
|
||||
if (selfVersionCode != newVersionCode) {
|
||||
let platform = uni.getSystemInfoSync().platform //手机平台
|
||||
//安卓手机弹窗升级
|
||||
if (platform === 'android') {
|
||||
uni.navigateTo({
|
||||
url: `/pages/upgrade/index?info=${encodeURIComponent(JSON.stringify(data.data))}`
|
||||
})
|
||||
}
|
||||
//IOS无法在线升级提示到商店下载
|
||||
else {
|
||||
uni.showModal({
|
||||
title: '发现新版本 ' + 'V' + newVersionCode,
|
||||
content: '请到App store进行升级',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// uni.$showMsg()
|
||||
}
|
||||
},
|
||||
handleChange (formData) {
|
||||
checked = !checked
|
||||
formData.checked = !formData.checked
|
||||
},
|
||||
xian () {
|
||||
this.formData = {
|
||||
username: 'cwz',
|
||||
password: '12345678a',
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
xiang () {
|
||||
this.formData = {
|
||||
username: 'glszfz',
|
||||
password: '12345678a',
|
||||
checked: false
|
||||
}
|
||||
},
|
||||
login (formData) {
|
||||
//loading
|
||||
uni.showLoading({title:'努力登录中...', mask:true});
|
||||
|
||||
//MD5加密
|
||||
const encryptData = data => {
|
||||
const encryptedData = CryptoJS.MD5(data).toString()
|
||||
return encryptedData
|
||||
}
|
||||
|
||||
//创建提交表单
|
||||
let postForm = {
|
||||
loginName: formData.username,
|
||||
secretKey: encryptData(formData.password)
|
||||
}
|
||||
|
||||
//记住密码功能
|
||||
if (formData.checked === true) {
|
||||
uni.setStorageSync('loginChecked', true)
|
||||
uni.setStorageSync('loginName', postForm.loginName)
|
||||
uni.setStorageSync('password',formData.password)
|
||||
uni.setStorageSync('secretKey', postForm.secretKey)
|
||||
} else {
|
||||
uni.setStorageSync('loginChecked', false)
|
||||
uni.removeStorageSync('loginName')
|
||||
uni.removeStorageSync('secretKey')
|
||||
uni.removeStorageSync('password')
|
||||
this.formData.username = ''
|
||||
this.formData.password = ''
|
||||
}
|
||||
|
||||
//提交表单
|
||||
|
||||
uni.$http.post('/gunshiApp/xfflood/doLogin', postForm).then(res => {
|
||||
uni.showLoading({ title: '努力登录中...', mask: true })
|
||||
|
||||
if (res.data.code === 200) {
|
||||
//localStorage保存token
|
||||
if (res.data.data) {
|
||||
uni.setStorageSync('Gs-Token', res.data.data)
|
||||
uni.$http.get('/gunshiApp/xfflood/getLoginInfo').then(res => {
|
||||
console.log('sss', res.data.data)
|
||||
uni.setStorageSync('value', res.data.data)
|
||||
console.log('-----value------', res.data.data)
|
||||
})
|
||||
|
||||
//获取userId并获取头像
|
||||
uni.$http
|
||||
.get('/gunshiApp/xfflood/my/info/getByUserId')
|
||||
.then(res => {
|
||||
console.log('-----avatar1------', res.data)
|
||||
if (res.data.data) {
|
||||
let url =
|
||||
'/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/'
|
||||
url = url + res.data.data.fileId
|
||||
uni.$http.get(url).then(res => {
|
||||
uni.setStorageSync(
|
||||
'avatar',
|
||||
'http://223.75.53.141:9102/test.by-lyf.tmp' +
|
||||
res.data.data.filePath
|
||||
)
|
||||
console.log(
|
||||
'-----avatar------',
|
||||
uni.getStorageSync('avatar')
|
||||
)
|
||||
})
|
||||
} else {
|
||||
uni.setStorageSync('avatar', '../../static/tabs/touxiang.png')
|
||||
}
|
||||
|
||||
|
||||
|
||||
// uni.showLoading({title:'努力登录中...', mask:true});
|
||||
//登录成功后跳转界
|
||||
setTimeout(function () {
|
||||
uni.hideLoading()
|
||||
uni.reLaunch({
|
||||
url: '/pages/homeIndex/index'
|
||||
})
|
||||
}, 1000)
|
||||
clearTimeout()
|
||||
})
|
||||
}
|
||||
} else if (res.data.code === 400) {
|
||||
//登录失败后弹出信息
|
||||
setTimeout(function () {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.data.description,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
}, 1000)
|
||||
clearTimeout()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.img {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
margin-top: 5vh;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.form {
|
||||
margin-top: 4vh;
|
||||
width: 80%;
|
||||
height: 8vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.button {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<div class="userinfo">
|
||||
<div class="icon" @click="goBack">
|
||||
<uni-icons type="back" size="25" color="white"></uni-icons>
|
||||
</div>
|
||||
<div class="Header">
|
||||
<span>修改密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<uni-forms :modelValue="formData" >
|
||||
<uni-forms-item label="原密码" :required="true" class="form">
|
||||
<uni-easyinput type="password" v-model="formData.oldSecretKey" placeholder="请输入原密码" class="password"/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="新密码" :required="true" class="form">
|
||||
<uni-easyinput type="password" v-model="formData.newSecretKey" placeholder="请输入新密码" class="password"/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="再次输入新密码" label-width="120px" :required="true" class="form">
|
||||
<uni-easyinput type="password" v-model="formData.secondSecretKey" placeholder="请再次输入新密码" class="password"/>
|
||||
</uni-forms-item>
|
||||
<button type="primary" class="button" @click="save(formData)">保存</button>
|
||||
</uni-forms>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
oldSecretKey: '',
|
||||
newSecretKey: '',
|
||||
secondSecretKey: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
save(formData){
|
||||
|
||||
let new_params = {
|
||||
userId: '' ,
|
||||
oldSecretKey: '',
|
||||
newSecretKey: '',
|
||||
secondSecretKey: '',
|
||||
}
|
||||
|
||||
new_params.oldSecretKey = CryptoJS.MD5(formData.oldSecretKey).toString()
|
||||
new_params.newSecretKey = CryptoJS.MD5(formData.newSecretKey).toString()
|
||||
new_params.secondSecretKey = CryptoJS.MD5(formData.secondSecretKey).toString()
|
||||
new_params.userId = uni.getStorageSync('value').userId
|
||||
// console.log(formData)
|
||||
|
||||
uni.$http.post('/gunshiApp/xfflood/user/updateSecretKey',new_params).then(res=>{
|
||||
console.log(res);
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: res.data.description,
|
||||
icon:'none',
|
||||
duration: 2000
|
||||
})
|
||||
setTimeout(uni.navigateBack(),2500)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.description,
|
||||
icon:'none',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
// uni.navigateBack()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.userinfo{
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5vh;
|
||||
margin-left: 2vw;
|
||||
margin-bottom: 2vh;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 6vh;
|
||||
background-color: #007afd;
|
||||
|
||||
}
|
||||
.icon{
|
||||
width: 6vw;
|
||||
height: 6vh;
|
||||
align-items: center;
|
||||
line-height: 6vh;
|
||||
}
|
||||
.Header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 0.95;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
.form{
|
||||
height: 50px;
|
||||
width: 95%;
|
||||
/* background-color: red; */
|
||||
margin-left: 1vw;
|
||||
align-items: center;
|
||||
}
|
||||
.password{
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
}
|
||||
.button{
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 50vh;
|
||||
width: 92%;
|
||||
height: 6vh;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: #007afd;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="userInfo">
|
||||
<div class="icon">
|
||||
<image
|
||||
class="image-left"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="default_src"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="username">{{this.userList.userName}}</div>
|
||||
<div class="userresponse">{{this.userList.orgList[0].orgName}}</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="funcBar">
|
||||
<div class="funcList" v-for="(item, index) in func" :key="index" >
|
||||
<div @click="navigateToSubPage(index)">
|
||||
<div class="funcIcon">
|
||||
<image
|
||||
class="icon-left"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item.img"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</div>
|
||||
<div class="funcTxt">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="version">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<uni-icons type="info" size="25" class="icon-left"></uni-icons>
|
||||
版本号
|
||||
</div>
|
||||
<div class="mid"></div>
|
||||
<div class="right">{{version}}</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="null"></view>
|
||||
<button type="primary" class="button" @click="logout">退出账号</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const func = [
|
||||
{img: '../../static/images/info.png', name: '个人信息', url:'/pages/personInfo/personInfo'},
|
||||
{img: '../../static/images/password.png', name: '修改密码', url:'/pages/modifyPassword/modifyPassword'},
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
userList: uni.getStorageSync('value'),
|
||||
username:'',
|
||||
userresponse:'防汛办',
|
||||
version:'011.14.23',
|
||||
func: func,
|
||||
default_src: uni.getStorageSync('avatar'),
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.setInsert()
|
||||
},
|
||||
mounted() {
|
||||
this.default_src = uni.getStorageSync('avatar')
|
||||
this.userList = uni.getStorageSync('value')
|
||||
console.log('----mypageAvatar',this.default_src);
|
||||
console.log('-----userList-----',this.userList);
|
||||
},
|
||||
methods: {
|
||||
navigateToSubPage(index){
|
||||
|
||||
uni.navigateTo({
|
||||
url: func[index].url,
|
||||
animationType:'pop-in',
|
||||
})
|
||||
// console.log('click',index,func[index].url)
|
||||
},
|
||||
async setInsert () {
|
||||
try {
|
||||
const params = {
|
||||
createId: uni.getStorageSync('value').userId,
|
||||
loginType:1,
|
||||
menu1:'我的',
|
||||
menu2:'我的',
|
||||
}
|
||||
|
||||
const { data } = await uni.$http.post('/gunshiApp/xfflood/visitMenuLog/insert',params)
|
||||
console.log('用户行为',params,data)
|
||||
} catch (error) {}
|
||||
},
|
||||
logout(){
|
||||
if(uni.getStorageSync('loginChecked')===true){
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else {
|
||||
uni.removeStorageSync('loginName')
|
||||
uni.removeStorageSync('secretKey')
|
||||
uni.removeStorageSync('Gs-Token')
|
||||
uni.removeStorageSync('value')
|
||||
uni.removeStorageSync('password')
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.userInfo{
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 5vh;
|
||||
margin-left: 2vw;
|
||||
margin-bottom: 2vh;
|
||||
width: 95%;
|
||||
height: 15vh;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
.icon{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-left: 2vw;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
color: #007afd;
|
||||
line-height: 50px;
|
||||
}
|
||||
.image-left{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 6vw;
|
||||
}
|
||||
.username{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
.funcIcon{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 4px;
|
||||
margin-bottom: 1vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.funcBar {
|
||||
border-radius: 5px;
|
||||
margin-bottom: 2vh;
|
||||
margin-left: 2vw;
|
||||
display: flex;
|
||||
justify-content: row;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 15vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
.funcList {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin: 2vw;
|
||||
}
|
||||
.version{
|
||||
margin-left: 2vw;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
height: 8vh;
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.left{
|
||||
width:100px;
|
||||
text-align: start;
|
||||
margin-left: 1vw;
|
||||
line-height: 8vh;
|
||||
}
|
||||
.icon-left{
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.mid{
|
||||
flex: 1;
|
||||
line-height: 8vh;
|
||||
}
|
||||
.right{
|
||||
width:100px;
|
||||
text-align: end;
|
||||
line-height: 8vh;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.null{
|
||||
height: 45vh;
|
||||
}
|
||||
.button{
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
width: 92%;
|
||||
height: 6vh;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: #007afd;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<view :style="{height:'99%',position:'relative'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<div class="row" v-if="!record.isDisabled">
|
||||
<text class="lf">指令内容:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="value"
|
||||
height=100
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{margin:'0 10px'}"><u-divider></u-divider></div>
|
||||
<div class="mybody">
|
||||
<div class="row2" v-for="(item,index) in list">
|
||||
<text>{{item.tm+' '+item.content}}</text>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{width:'100%',position:'absolute',bottom:'40px'}" v-if="!record.isDisabled">
|
||||
<u-button
|
||||
type="primary"
|
||||
text="反馈"
|
||||
customStyle="margin-top: 20px"
|
||||
@click="show1 = true"
|
||||
></u-button>
|
||||
<u-button
|
||||
type="primary"
|
||||
text="反馈并结束"
|
||||
customStyle="margin-top: 10px"
|
||||
@click="show2 = true"
|
||||
></u-button>
|
||||
</div>
|
||||
|
||||
<u-modal
|
||||
width="250"
|
||||
:show="show1"
|
||||
showCancelButton
|
||||
closeOnClickOverlay
|
||||
@confirm="submit1"
|
||||
@cancel="() => show1 = false"
|
||||
@close="() => show1 = false"
|
||||
>
|
||||
<view class="slot-content">
|
||||
<rich-text :nodes="'确认反馈?'" :style="{fontSize:'16px'}"></rich-text>
|
||||
</view>
|
||||
</u-modal>
|
||||
<u-modal
|
||||
width="250"
|
||||
:show="show2"
|
||||
showCancelButton
|
||||
closeOnClickOverlay
|
||||
@confirm="submit2"
|
||||
@cancel="() => show2 = false"
|
||||
@close="() => show2 = false"
|
||||
>
|
||||
<view class="slot-content">
|
||||
<rich-text :nodes="'确认反馈并结束?'" :style="{fontSize:'16px'}"></rich-text>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
props:{
|
||||
record:{
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value:'',
|
||||
list:[],
|
||||
show1:false,
|
||||
show2:false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
},
|
||||
async getData() {
|
||||
try{
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/xfEmerDispatchR/getFeedbackById/'+this.record.id)
|
||||
console.log('res',res)
|
||||
this.list = res.data.data
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async submit1() {
|
||||
this.show1 = false
|
||||
try{
|
||||
if(!this.value){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请输入指令内容",
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
dispatchId:this.record.id,
|
||||
content:this.value,
|
||||
}
|
||||
console.log('params',params)
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/feedback',params)
|
||||
console.log('res',res)
|
||||
this.value = ''
|
||||
this.getData()
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async submit2() {
|
||||
this.show2 = false
|
||||
try{
|
||||
if(!this.value){
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请输入指令内容",
|
||||
})
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
dispatchId:this.record.id,
|
||||
content:this.value,
|
||||
}
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/feedbackAndEnd',params)
|
||||
uni.navigateBack()
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
width: 25%;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
width: 75%;
|
||||
min-height: 40px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 10px;
|
||||
height: calc( 100vh - 410px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.row2{
|
||||
background-color: rgba(217, 217, 217, 1);
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
title="调令反馈"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
<view
|
||||
slot="right"
|
||||
hover-class="is-hover"
|
||||
class="searchBox_right_btn"
|
||||
hover-stay-time=100
|
||||
@click="myShow"
|
||||
>
|
||||
<u--image :src="'../../static/images/filter.png'" width="20px" height="20px"></u--image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<u-tabs
|
||||
:list="tabsOptions"
|
||||
@click="tabsChange"
|
||||
:scrollable=false
|
||||
class="tabsClass"
|
||||
:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
|
||||
:inactiveStyle="{color: '#606266',fontSize: '16px'}"
|
||||
lineColor="transparent"
|
||||
itemStyle="height: 44px"
|
||||
>
|
||||
</u-tabs>
|
||||
<div class="mybody">
|
||||
<div class="countNum"><text>共{{list.length}}条信息</text></div>
|
||||
<div v-for="(item,index) in list" class="listItem" @click="myNavigateTo(item)">
|
||||
<div class="row1"><text>{{item.year+'年度调令第'+item.serial+'号'}}</text></div>
|
||||
<div class="row2">
|
||||
<div>
|
||||
<text :style="{marginRight:'5px'}">{{item.createUserName}}</text>
|
||||
<text>{{item.createTm}}</text>
|
||||
</div>
|
||||
<div><text>{{myType[item.dispatchType]}}</text></div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</div>
|
||||
|
||||
<u-popup
|
||||
:show="show"
|
||||
mode="right"
|
||||
:safeAreaInsetTop='true'
|
||||
:closeOnClickOverlay='false'
|
||||
@close="close"
|
||||
@open="myShow">
|
||||
<view :style="{padding:'10px',width:'250px'}">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<text class="title">按类型</text>
|
||||
<u-checkbox-group
|
||||
placement="row"
|
||||
v-model="check"
|
||||
:style="{padding:'10px 0px 20px 0px'}"
|
||||
>
|
||||
<u-checkbox name="0" label="水库调洪" class="checkItem"></u-checkbox>
|
||||
<u-checkbox name="1" label="人员转移" class="checkItem"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div :style="{display:'flex',alignItems:'center'}">
|
||||
<text class="title">按时间</text>
|
||||
<u-switch v-model="isTime" size="20" :style="{margin:'2px 0 0 10px'}"></u-switch>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showStmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
|
||||
</div>
|
||||
<div :style="{display:'flex',marginTop:'10px'}" v-if="isTime">
|
||||
<view
|
||||
class="tmPicker"
|
||||
@click="showEtmPicker = true"
|
||||
hover-class="is-hover"
|
||||
hover-stay-time=100
|
||||
>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
|
||||
</view>
|
||||
<text :style="{width:'20%'}"></text>
|
||||
</div>
|
||||
<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
|
||||
<u-button
|
||||
:style="{width:'80px',marginRight:'10px'}"
|
||||
text="重置"
|
||||
@click="reSet"
|
||||
></u-button>
|
||||
<u-button
|
||||
:style="{width:'80px'}"
|
||||
color="rgba(217, 0, 27, 1)"
|
||||
type="primary"
|
||||
text="确定"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
</div>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showStmPicker"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showStmPicker = false"
|
||||
@cancel="showStmPicker = false"
|
||||
@close="showStmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showEtmPicker"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="showEtmPicker = false"
|
||||
@cancel="showEtmPicker = false"
|
||||
@close="showEtmPicker = false"
|
||||
>
|
||||
</u-datetime-picker>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const tabsOptions = [
|
||||
{
|
||||
name:'执行中',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
name:'完成',
|
||||
value:2
|
||||
},
|
||||
]
|
||||
const myType = {
|
||||
0:'水库调洪',
|
||||
1:'人员转移'
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsOptions:tabsOptions,
|
||||
myType:myType,
|
||||
show:false,
|
||||
tabVal:1,
|
||||
check:['0','1'],
|
||||
showStmPicker:false,
|
||||
showEtmPicker:false,
|
||||
stm:Number(moment(new Date()).add(-7,'days')),
|
||||
etm:Number(new Date()),
|
||||
isTime:false,
|
||||
list:[],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getStmStr() {
|
||||
return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
getEtmStr() {
|
||||
return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
this.tabVal = item.value
|
||||
this.submit()
|
||||
},
|
||||
myShow() {
|
||||
this.show = true
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
reSet() {
|
||||
this.isTime = false
|
||||
this.stm = Number(moment(new Date()).add(-7,'days'))
|
||||
this.etm = Number(new Date())
|
||||
this.check = ['0','1']
|
||||
},
|
||||
async submit() {
|
||||
try{
|
||||
const params = {
|
||||
status:this.tabVal,
|
||||
dispatchTypeList:this.check,
|
||||
}
|
||||
if(this.check.length===0){
|
||||
params.dispatchTypeList = ['不可能存在的值']
|
||||
}
|
||||
if(this.isTime){
|
||||
params.dateTimeRangeSo = {
|
||||
start:moment(this.stm).format('YYYY-MM-DD HH:mm:sss'),
|
||||
end:moment(this.etm).format('YYYY-MM-DD HH:mm:sss')
|
||||
}
|
||||
}
|
||||
console.log('params',params)
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/app/list',params)
|
||||
console.log('res',res)
|
||||
this.list = res.data.data
|
||||
this.close()
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: '失败主题',
|
||||
message: "请求失败",
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.close()
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
myNavigateTo (record) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/orderFeedback/orderInformation?obj='+JSON.stringify({...record,isDisabled:this.tabVal===1?false:true}) // 跳转到对应路径的页面
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.submit()
|
||||
},
|
||||
onShow() {
|
||||
this.submit()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myTitleStyle{
|
||||
font-size: 30px;
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
}
|
||||
.tabsClass{
|
||||
background-color: #ffffff;
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
padding: 5px 20px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.countNum{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listItem{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.row1{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.row2{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar
|
||||
:title="record.year+'年度调令第'+record.serial+'号'"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<u-tabs
|
||||
:list="tabsOptions"
|
||||
@click="tabsChange"
|
||||
:scrollable=false
|
||||
class="tabsClass"
|
||||
:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
|
||||
:inactiveStyle="{color: '#606266',fontSize: '16px'}"
|
||||
lineColor="transparent"
|
||||
itemStyle="height: 44px"
|
||||
>
|
||||
</u-tabs>
|
||||
<div class="mybody">
|
||||
<uniZl v-if="tabsVal==='uniZl'" :record="record"></uniZl>
|
||||
<uniFk v-if="tabsVal==='uniFk'" :record="record"></uniFk>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import uniZl from './zl.vue';
|
||||
import uniFk from './fk.vue'
|
||||
const tabsOptions = [
|
||||
{
|
||||
name:'调度指令',
|
||||
components:'uniZl'
|
||||
},
|
||||
{
|
||||
name:'执行反馈',
|
||||
components:'uniFk'
|
||||
},
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { uniZl, uniFk },
|
||||
data() {
|
||||
return {
|
||||
tabsOptions:tabsOptions,
|
||||
tabsVal:'uniZl',
|
||||
record:{}
|
||||
};
|
||||
},
|
||||
onLoad(props){
|
||||
const myRecord = JSON.parse(props.obj)
|
||||
this.record = myRecord
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
this.tabsVal = item.components
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myTitleStyle{
|
||||
font-size: 30px;
|
||||
background-color: red;
|
||||
height: 200px;
|
||||
}
|
||||
.tabsClass{
|
||||
background-color: #ffffff;
|
||||
margin-top: 44px;
|
||||
height: 44px;
|
||||
padding: 0 40px;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.searchBox_right_btn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.is-hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
.checkItem{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tmPicker{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(240, 240, 240, 1);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
// padding: 5px 20px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
}
|
||||
.countNum{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listItem{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.row1{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.row2{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<view>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>调度令编号:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.serial"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>调度令年度:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.year"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>执行单位:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.executeOrgName"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>调度类型:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="myType[record.dispatchType]"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">抄送单位:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.forwardOrgName"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf"><text :style="{color:'red'}">*</text>计划执行时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.startTm"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">计划结束时间:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.endTm"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">指令内容:</text>
|
||||
<div class="rf">
|
||||
<u--textarea
|
||||
v-model="record.content"
|
||||
:disabled='true'
|
||||
height=200
|
||||
></u--textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">指令日期:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.createTm"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<text class="lf">指令发起人:</text>
|
||||
<div class="rf">
|
||||
<u--input
|
||||
border="surround"
|
||||
v-model="record.createUserName"
|
||||
:disabled='true'
|
||||
></u--input>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height:'100px'}"></div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const myType = {
|
||||
0:'水库调洪',
|
||||
1:'人员转移'
|
||||
}
|
||||
|
||||
export default {
|
||||
props:{
|
||||
record:{
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myType:myType
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row{
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lf{
|
||||
width: 35%;
|
||||
min-height: 40px;
|
||||
text-align: right;
|
||||
line-height: 38px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.rf{
|
||||
width: 65%;
|
||||
min-height: 40px;
|
||||
padding-right: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<div class="userinfo">
|
||||
<div class="icon" @click="goBack">
|
||||
<uni-icons type="back" size="25" color="white"></uni-icons>
|
||||
</div>
|
||||
<div class="Header">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<uni-list class="info">
|
||||
<uni-list-item
|
||||
title="头像"
|
||||
show-arrow="true"
|
||||
clickable
|
||||
class="listContainer"
|
||||
@click="showActionSheet(default_src)"
|
||||
>
|
||||
<template v-slot:footer >
|
||||
<image class="slot-image" :src="default_src" mode="aspectFill"></image>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<uni-list-item
|
||||
v-for="(item, index) in userListShow"
|
||||
:key="index"
|
||||
clickable
|
||||
:title="item.name"
|
||||
class="listContainer"
|
||||
@click="modifyValue(item)"
|
||||
>
|
||||
<template v-slot:footer >
|
||||
<div class="item" @click.stop="changeItemInfo(item,index)">
|
||||
<text >{{item.info}}</text>
|
||||
</div>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<button type="primary" class="button" @click="save">保存</button>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
let modify = false
|
||||
|
||||
//访问数据
|
||||
const userList = uni.getStorageSync('value')
|
||||
let userListShow = [
|
||||
{name: '手机号码', info: userList.phone},
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userList: userList,
|
||||
userListShow:userListShow,
|
||||
modify: modify,
|
||||
default_src: uni.getStorageSync('avatar'),
|
||||
fileId: '',
|
||||
phone: userList.phone,
|
||||
reset: false,
|
||||
}
|
||||
},
|
||||
mounted() { //挂载时重新获取一次Storage数据
|
||||
this.userList = uni.getStorageSync('value')
|
||||
this.userListShow[0].info = this.userList.phone
|
||||
},
|
||||
methods: {
|
||||
goBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
showActionSheet(default_src){ //修改头像
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照/上传照片', '恢复默认头像'],
|
||||
success: (res) => {
|
||||
console.log('选择了第' + (res.tapIndex + 1) + '个选项');
|
||||
if (res.tapIndex === 0) { //拍照上传照片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['origin','compressed'],
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
console.log('--------拍照上传照片--------',res);
|
||||
this.default_src = tempFilePaths[0]
|
||||
uni.uploadFile({
|
||||
url: uni.$http.baseUrl+'/gunshiApp/xfflood/my/info/file/upload/singleSimple',
|
||||
fileType: 'image',
|
||||
filePath: tempFilePaths[0],
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
this.fileId = JSON.parse(res.data).data.fileId
|
||||
},
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
} else if(res.tapIndex === 1) { //恢复默认头像
|
||||
console.log('click');
|
||||
this.reset = true
|
||||
this.default_src = '../../static/tabs/touxiang.png'
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('弹窗取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
modifyValue(item){
|
||||
console.log(item);
|
||||
|
||||
},
|
||||
changeItemInfo(item,index){ //修改电话
|
||||
uni.showModal({
|
||||
title:"修改"+item.name,
|
||||
editable:true,
|
||||
placeholderText:item.info,
|
||||
confirmText:"确认",
|
||||
cancelText:"取消",
|
||||
success: (res) => {
|
||||
const phoneReg = /^[1][3-9]\d{9}$/;
|
||||
if (res.confirm){
|
||||
if (phoneReg.test(res.content) ){
|
||||
this.userListShow[index].info = res.content
|
||||
this.phone = res.content
|
||||
uni.showToast({
|
||||
title:"修改成功，请保存",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title:"请输入正确手机号码",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('取消');
|
||||
}
|
||||
})
|
||||
},
|
||||
save(){
|
||||
if (this.fileId == ''){ //图片无修改或重置时
|
||||
if (this.reset) { //重置头像
|
||||
//调接口清空返回图片路径的data
|
||||
uni.$http.get('/gunshiApp/xfflood/my/info/recover').then(res=>{
|
||||
uni.setStorageSync('avatar','../../static/tabs/touxiang.png')
|
||||
})
|
||||
console.log('重置头像');
|
||||
}
|
||||
|
||||
let params = {
|
||||
"phone": this.phone,
|
||||
}
|
||||
|
||||
uni.$http.post('/gunshiApp/xfflood/my/info/update',params).then(res=>{
|
||||
console.log('-----修改图片1-----',res);
|
||||
let new_userList = uni.getStorageSync('value')
|
||||
new_userList.phone = this.phone
|
||||
uni.setStorageSync('value', new_userList)
|
||||
uni.reLaunch({
|
||||
url:'/pages/mypage/mypage'
|
||||
})
|
||||
},err=>{
|
||||
console.log('----err----',err);
|
||||
})
|
||||
|
||||
} else { //修改图片后
|
||||
let params = {
|
||||
"phone": this.phone,
|
||||
"attach": {
|
||||
"fileId": this.fileId,
|
||||
},
|
||||
}
|
||||
uni.$http.post('/gunshiApp/xfflood/my/info/update',params).then(res=>{
|
||||
console.log('-----修改图片2-----',res);
|
||||
if (res.data.code == 200){
|
||||
console.log('---修改图片3---',res);
|
||||
let url = '/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/'+this.fileId
|
||||
uni.$http.get(url).then(res=>{
|
||||
uni.setStorageSync('avatar','http://223.75.53.141:9102/test.by-lyf.tmp'+res.data.data.filePath)
|
||||
console.log('-----modifiedAvatar------',uni.getStorageSync('avatar'));
|
||||
})
|
||||
uni.reLaunch({
|
||||
url:'/pages/mypage/mypage'
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.userinfo{
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 5vh;
|
||||
margin-left: 2vw;
|
||||
margin-bottom: 2vh;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 6vh;
|
||||
background-color: #007afd;
|
||||
|
||||
}
|
||||
.icon{
|
||||
width: 6vw;
|
||||
height: 6vh;
|
||||
align-items: center;
|
||||
line-height: 6vh;
|
||||
}
|
||||
.Header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 0.95;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
.info{
|
||||
margin: 1vh;
|
||||
|
||||
}
|
||||
.listContainer{
|
||||
height: 6vh;
|
||||
line-height: 8vh;
|
||||
}
|
||||
.button{
|
||||
margin-top: 60vh;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
width: 92%;
|
||||
height: 6vh;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: #007afd;
|
||||
}
|
||||
.slot-image{
|
||||
margin-top: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 11%;">
|
||||
<div style="margin-top: 6px;">序号</div>
|
||||
</th>
|
||||
<th style="width: 27%">
|
||||
<div style="margin-top: 6px;">站名</div></th>
|
||||
<th style="width: 20%;">
|
||||
<div>时段雨量</div>
|
||||
<div style="margin-top: -12px;">(mm)</div>
|
||||
</th>
|
||||
<th style="width: 20%;" >
|
||||
<div>昨日降雨</div>
|
||||
<div style="margin-top: -12px;">(mm)</div>
|
||||
</th>
|
||||
<th style="width: 22%">
|
||||
<div style="margin-top: 6px;">所属政区</div></th>
|
||||
</tr>
|
||||
<!-- :style="{'max-height':height + 'px', 'overflow-y': 'auto',width:'100%'}" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in list" :key="index" style="width:100%">
|
||||
<td style="width: 11%;">{{ index + 1 }}</td>
|
||||
<td style="width: 27%; color: #3399ef; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">
|
||||
{{ item.stnm }}</td>
|
||||
<td style="width: 20%">{{ item.drp ? item.drp : item.drp == 0 ? 0 : '-' }}</td>
|
||||
<td style="width: 20%">{{ item.yesDrp ? item.yesDrp : item.yesDrp == 0 ? 0 : '-' }}</td>
|
||||
<td style="width:23%;">{{ item.adnm }}</td>
|
||||
</tr>
|
||||
<div style="height:160px"></div>
|
||||
</div>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:0,
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
jumpDetail(params){
|
||||
console.log(123)
|
||||
uni.navigateTo({
|
||||
url:`/pages/rainDetail/rainDetail?stcd=${params.stcd}&stnm=${params.stnm}&sttp=${params.sttp}&source=${params.source}`
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 80rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 160px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,556 @@
|
|||
<template>
|
||||
<view class="rain-box" style="overflow:hidden;height:100vh">
|
||||
<u-status-bar ></u-status-bar>
|
||||
<!-- <view style="height: var(--status-bar-height); width: 100%;"></view> -->
|
||||
<view class="nav-bar">
|
||||
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||
<view style="font-size:18px">
|
||||
雨情
|
||||
</view>
|
||||
<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
|
||||
<view @click="popupOpen = true" style="margin-right:10px">
|
||||
<image
|
||||
src="../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; "
|
||||
|
||||
>
|
||||
</image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索以及多级下拉 -->
|
||||
<view class="search-box">
|
||||
<view class="search-item">
|
||||
<view style="display:flex" v-show="limit == 1">
|
||||
<view class="" @click="handleClick" >
|
||||
{{selecetItem.adnm == "全部" ? "咸丰县" : selecetItem.adnm || columns[0][0].adnm}}
|
||||
</view>
|
||||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon"></u-icon>
|
||||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon"></u-icon>
|
||||
</view>
|
||||
<view class="rain-input" style="width: 50%;">
|
||||
<u-input
|
||||
placeholder="请输入站点"
|
||||
prefixIcon="search"
|
||||
prefixIconStyle="font-size: 22px;color: #909399"
|
||||
@change="changeForm"
|
||||
:value="formData.stArg"
|
||||
></u-input>
|
||||
</view>
|
||||
<view style="display:flex" v-show="limit == 1">
|
||||
<view class="" @click="handleClick1" >
|
||||
{{selecetItem1.basName == "全部" ? "流域" : selecetItem1.basName || "流域"}}
|
||||
</view>
|
||||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon1"></u-icon>
|
||||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon1"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 单纯下拉 -->
|
||||
<view class="time-select">
|
||||
<view :class="{'jiangyu':true,'noClick':rainTime}" @click="handleJiangyu" >
|
||||
<text>{{formData.orderType ? "按昨日降雨降序" :"按时段降雨降序"}}</text>
|
||||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!jiangyu"></u-icon>
|
||||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="jiangyu"></u-icon>
|
||||
<view class="jiangyu-dropdown" v-show="this.jiangyu">
|
||||
<view :class="{'active': formData.orderType == 0,'no_f':true}" @click="rainsort(0)" style="border-top: 1px solid #dfdfdf;">
|
||||
<text >按时段降雨降序</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.orderType == 0"></u-icon>
|
||||
</view>
|
||||
<view :class="{'active':formData.orderType == 1,'no_f':true}" @click="rainsort(1)" >
|
||||
<text>按昨日降雨降序</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.orderType == 1"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rain-time" @click="handleTime">
|
||||
<text>{{formData.timeType == 1 ? "1h" :
|
||||
formData.timeType == 3 ? "3h" :
|
||||
formData.timeType == 6 ? "6h" :
|
||||
formData.timeType == 12 ? "12h" :
|
||||
formData.timeType == 24 ? "24h" : ''
|
||||
|
||||
}}</text>
|
||||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!rainTime"></u-icon>
|
||||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="rainTime"></u-icon>
|
||||
<view class="rain-time-dropdown" v-show="rainTime">
|
||||
<view :class="{'active': formData.timeType == 1,'no_f':true}" @click="timesort(1)" style="border-top: 1px solid #dfdfdf;">
|
||||
<text >1h</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 1"></u-icon>
|
||||
</view>
|
||||
<view :class="{'active': formData.timeType == 3,'no_f':true}" @click="timesort(3)" >
|
||||
<text >3h</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 3"></u-icon>
|
||||
</view>
|
||||
<view :class="{'active': formData.timeType == 6,'no_f':true}" @click="timesort(6)" >
|
||||
<text >6h</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 6"></u-icon>
|
||||
</view>
|
||||
<view :class="{'active': formData.timeType == 12,'no_f':true}" @click="timesort(12)" >
|
||||
<text >12h</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 12"></u-icon>
|
||||
</view>
|
||||
<view :class="{'active': formData.timeType == 24,'no_f':true}" @click="timesort(24)" >
|
||||
<text>24h</text>
|
||||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 内容部分 -->
|
||||
<view style="width: 100%; height: 10px; background-color: #f7f7f7;">
|
||||
|
||||
</view>
|
||||
<!-- 时间段 -->
|
||||
<view style="padding: 1% 0%;width:100vw; text-align: center; color: #f7b156;">
|
||||
统计时段:{{tm.stm}}至{{tm.etm}}
|
||||
</view>
|
||||
<view style="width:100%">
|
||||
<Table :list="rainList" :height='tableHeight'/>
|
||||
</view>
|
||||
<u-picker
|
||||
:show="show"
|
||||
ref="uPicker"
|
||||
:columns="columns"
|
||||
@confirm="confirm"
|
||||
@change="changeHandler"
|
||||
@cancel="cancel"
|
||||
keyName="adnm"
|
||||
>
|
||||
</u-picker>
|
||||
<u-picker
|
||||
:show="show1"
|
||||
ref="uPicker1"
|
||||
:columns="columns1"
|
||||
@confirm="confirm1"
|
||||
@cancel="cancel1"
|
||||
keyName="basName"
|
||||
>
|
||||
</u-picker>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
||||
<view style="padding: 30px 20px; ">
|
||||
<text style="font-weight: bold;">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px;">
|
||||
<u-checkbox-group
|
||||
v-model="formData.source"
|
||||
@change="checkboxChange"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{margin: '7px'}"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <text style="font-weight: bold;">按时间</text>
|
||||
<view class="example-body" style="display: flex; align-items: center; margin-bottom: 10px; margin-top: 10px;">
|
||||
<uni-datetime-picker type="datetime" v-model="stm" @change="(e) => this.stm = e" />
|
||||
<text style="margin-left: 10px;">至</text>
|
||||
</view>
|
||||
<view class="example-body" style="width: 92%;">
|
||||
<uni-datetime-picker type="datetime" v-model="etm" @change="(e) => this.etm = e" />
|
||||
</view>
|
||||
<view style="display: flex; margin-top: 10px;">
|
||||
<u-button class="first-btn" text="昨日08:00~当前时间"></u-button>
|
||||
<u-button class="second-btn" text="今天08:00~当前时间"></u-button>
|
||||
</view> -->
|
||||
<view style="display: flex; position:absolute;bottom:20px;right:20px">
|
||||
<u-button text="重置" class="bottom-btn1"
|
||||
@click="formData = {...formData,source}"></u-button>
|
||||
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popupOpen = false"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Table from "./Table"
|
||||
import filter from "../../static/images/filter.png"
|
||||
import moment from "moment"
|
||||
import {disType} from "../utils/dicType.js"
|
||||
const adcd = uni.getStorageSync('value').adcd
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
show1:false,
|
||||
switchIcon:true,
|
||||
switchIcon1:true,
|
||||
rainList:[],//雨情数据
|
||||
selecetItem:{},
|
||||
selecetItem1:{},
|
||||
jiangyu:false, //显示下拉
|
||||
rainTime:false, //显示下拉，
|
||||
selectJyOne:1,//选中降雨最后一个元素，
|
||||
selectTimeOne:4, //选中时间的最有一个元素
|
||||
popupOpen:false, //抽屉打开
|
||||
source:["SH","SW","QX","SK"],
|
||||
// checkboxValue1:["SH","SW","QX","SK"],
|
||||
// 基本案列数据
|
||||
checkboxList1: [{
|
||||
name: '山洪',
|
||||
value: "SH"
|
||||
},
|
||||
{
|
||||
name: '水文',
|
||||
value: "SW"
|
||||
},
|
||||
{
|
||||
name: '气象',
|
||||
value: "QX"
|
||||
},
|
||||
{
|
||||
name: '水库',
|
||||
value: "SK"
|
||||
}
|
||||
],
|
||||
stm: '', //开始时间，
|
||||
etm:"",//结束时间
|
||||
columns: //政区下拉
|
||||
[
|
||||
[{"adnm": "咸丰县", "adcd":adcd }],[]
|
||||
],
|
||||
columnData: [[]],
|
||||
columns1:[[]], //流域选择,
|
||||
formData:{ //表单数据
|
||||
timeType:24,
|
||||
orderType:1,
|
||||
basCode:'',
|
||||
source:["SH","SW","QX","SK"],
|
||||
stArg:'',
|
||||
adcd:disType(uni.getStorageSync('value').adcd) == 1 ? undefined :uni.getStorageSync('value').adcd,
|
||||
etm:moment().format("YYYY-MM-DD HH:mm"),
|
||||
stm:moment().subtract(1, 'day').format("YYYY-MM-DD HH:mm")
|
||||
// etm:moment().set({ hour: 8, minute: 0, second: 0, millisecond: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||
// stm:moment().subtract(1, 'day').set({ hour: 8, minute: 0, second: 0, millisecond: 0 }).format("YYYY-MM-DD HH:mm")
|
||||
},
|
||||
tableHeight:0,
|
||||
limit:disType(uni.getStorageSync('value').adcd)
|
||||
}
|
||||
},
|
||||
components:{
|
||||
Table
|
||||
},
|
||||
computed:{
|
||||
tm(){
|
||||
return {
|
||||
stm:moment().subtract(this.formData.timeType, 'hours').format("YYYY-MM-DD HH:mm"),
|
||||
etm:moment().format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
formData(newV, oldV){
|
||||
console.log("www",newV)
|
||||
this.getRainList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeForm(e){
|
||||
this.formData = {...this.formData,stArg:e}
|
||||
},
|
||||
handleJiangyu(e){
|
||||
if(this.rainTime){
|
||||
e.stopPropagation();
|
||||
return
|
||||
}
|
||||
this.jiangyu = !this.jiangyu
|
||||
},
|
||||
handleTime(e){
|
||||
if(this.jiangyu){
|
||||
e.stopPropagation();
|
||||
return
|
||||
}
|
||||
this.rainTime = !this.rainTime
|
||||
},
|
||||
//按昨日降雨排序
|
||||
rainsort(e){
|
||||
this.formData = {...this.formData,orderType: e ? 1 : 0}
|
||||
},
|
||||
// 按小时排序
|
||||
timesort(e){
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
stm:moment().subtract(e, 'hours').format("YYYY-MM-DD HH:mm"),
|
||||
etm:moment().format("YYYY-MM-DD HH:mm"),
|
||||
timeType:e
|
||||
}
|
||||
},
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values, // values为当前变化列的数组内容
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker
|
||||
} = e
|
||||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||||
if (columnIndex === 0) {
|
||||
// picker为选择器this实例，变化第二列对应的选项
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
}
|
||||
},
|
||||
// 回调参数为包含columnIndex、value、values
|
||||
confirm(e) {
|
||||
console.log('confirm', e)
|
||||
this.show = false
|
||||
this.switchIcon=true;
|
||||
this.selecetItem = e.value[1];
|
||||
// this.formData.adcd = e.value[1].adcd;
|
||||
this.formData = {...this.formData,adcd:e.value[1].adcd}
|
||||
},
|
||||
cancel(e) {
|
||||
this.show = false
|
||||
},
|
||||
changeHandler1(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values, // values为当前变化列的数组内容
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker1
|
||||
} = e
|
||||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||||
if (columnIndex === 0) {
|
||||
// picker为选择器this实例，变化第二列对应的选项
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
}
|
||||
},
|
||||
// 回调参数为包含columnIndex、value、values
|
||||
confirm1(e) {
|
||||
console.log('confirm', e)
|
||||
this.show1 = false
|
||||
this.switchIcon1=true;
|
||||
this.selecetItem1 = e.value[0];
|
||||
this.formData = {...this.formData,basCode:e.value[0].basCode};
|
||||
},
|
||||
cancel1(e) {
|
||||
this.show1 = false
|
||||
},
|
||||
handleClick(e){
|
||||
if(this.selecetItem1.basName && this.selecetItem1.basName != "全部"){
|
||||
e.stopPropagation();
|
||||
return
|
||||
}
|
||||
this.show = true;
|
||||
this.switchIcon = !this.switchIcon
|
||||
},
|
||||
handleClick1(e){
|
||||
if(this.selecetItem.adnm&&this.selecetItem.adnm != "全部"){
|
||||
e.stopPropagation();
|
||||
return
|
||||
}
|
||||
this.show1 = true;
|
||||
this.switchIcon1 = !this.switchIcon1
|
||||
},
|
||||
checkboxChange(n) {
|
||||
console.log('change', n);
|
||||
this.formData = {...this.formData,source:n};
|
||||
},
|
||||
changeLog(e) {
|
||||
console.log('change事件:', e);
|
||||
},
|
||||
// 获取行政区域选择
|
||||
async adnmList(){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
"/gunshiApp/xfflood/real/rain/adnmList"
|
||||
)
|
||||
if(data.code == 200){
|
||||
|
||||
const all = {
|
||||
adnm:'全部',
|
||||
adcd:''
|
||||
}
|
||||
this.columns = [[...this.columns[0]],[all,...data.data]];
|
||||
this.columnData = [[all,...data.data]];
|
||||
}
|
||||
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
// 获取流域
|
||||
async basNameList(){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
"/gunshiApp/xfflood/real/rain/basNameList"
|
||||
)
|
||||
if(data.code == 200){
|
||||
const all = {
|
||||
basName:'全部',
|
||||
basCode:''
|
||||
}
|
||||
this.columns1 = [[all,...data.data]];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
// 获取雨情列表
|
||||
async getRainList(){
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
let obj = {
|
||||
...this.formData,
|
||||
timeType:undefined
|
||||
}
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/real/rain/app/list",obj
|
||||
)
|
||||
if(data.code == 200){
|
||||
uni.hideLoading();
|
||||
|
||||
this.rainList = [...data.data];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
backTo(){
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.adnmList();
|
||||
this.basNameList()
|
||||
this.getRainList()
|
||||
},
|
||||
onReady(){
|
||||
let that = this
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
that.tableHeight = res.windowHeight - 280;
|
||||
console.log("this.tableHeight", that.tableHeight);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
// margin-top: 30px;
|
||||
// padding-top: 40px;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
}
|
||||
.search-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.search-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
.time-select{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
.noClick{
|
||||
pointer-events: initial;
|
||||
}
|
||||
.jiangyu,.rain-time{
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.jiangyu{
|
||||
// position: relative;
|
||||
.jiangyu-dropdown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
.active{
|
||||
color:#02a7f0
|
||||
}
|
||||
text{
|
||||
margin-right: 58%;
|
||||
}
|
||||
.no_f{
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// border-top: 1px solid #dfdfdf;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rain-time{
|
||||
// position: relative;
|
||||
.rain-time-dropdown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
// left: -10%;
|
||||
left: 0;
|
||||
top: 35px;
|
||||
.active{
|
||||
color:#02a7f0;
|
||||
text{
|
||||
margin-right: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
.no_f{
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// border-top: 1px solid #dfdfdf;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.first-btn{
|
||||
margin-right: 5px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.second-btn{
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.bottom-btn1,.bottom-btn2{
|
||||
width: 100px;
|
||||
}
|
||||
.bottom-btn1{
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2{
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
|
||||
export default function DrpOption(echartData) {
|
||||
let totalDrp = 0;
|
||||
const DRPLEVEL = [10, 20, 50, 100, 250];
|
||||
const maxVal = DRPLEVEL.find(o => o > totalDrp);
|
||||
const xMaxVal = echartData?.actual ? DRPLEVEL.find(o => {
|
||||
let max = Math.max(...echartData?.actual || [])
|
||||
return o > max
|
||||
}):maxVal
|
||||
// const xMaxVal = Math.ceil(Math.max(...echartData.actual)) + 2
|
||||
const yMaxVal = echartData?.actual ? DRPLEVEL.find(o => {
|
||||
let max = Math.max(...echartData?.total)
|
||||
return o > max
|
||||
}): maxVal
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid:{
|
||||
x: 40,
|
||||
y: 30,
|
||||
x2: 30,
|
||||
y2: 28,
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
// 图例的位置
|
||||
data: ['实测', '累计']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// data: echartData?.time.map(item => item.substr('2020--'.length)),
|
||||
data: echartData?.time,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
format: 'xAxisFormat'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name:"雨量mm",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: xMaxVal
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name:"累计mm",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: yMaxVal
|
||||
}
|
||||
]
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
name: '实测',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: echartData?.actual,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#3876cd' },
|
||||
{ offset: 0.5, color: '#45b4e7' },
|
||||
{ offset: 1, color: '#54ffff' }
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '累计',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: echartData?.total,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(3, 194, 236, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(3, 194, 236, 0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#03C2EC'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
<!-- <uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <view class="" style="width: 100%; height: 3px; background-color: #dfdfdf; margin-bottom: 2px;">
|
||||
|
||||
</view> -->
|
||||
<view class="jcsj-content">
|
||||
<view class="jcsj-charts">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<view class="jcsj-table">
|
||||
<JcsjTable :tableData="tableData" />
|
||||
</view>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="datetime"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="datetime"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
import JcsjTable from "./jcsjTable"
|
||||
import drpOption from "./chartOption.js"
|
||||
const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const etm = moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
stm,
|
||||
etm,
|
||||
tableData:[],
|
||||
chartData: {chartData:{},eopts:{}},
|
||||
rainChartData:{},
|
||||
showTime:false,
|
||||
showTime1:false
|
||||
}
|
||||
},
|
||||
components:{
|
||||
JcsjTable
|
||||
},
|
||||
watch:{
|
||||
rainChartData:{
|
||||
handler(newV){
|
||||
this.chartData = {...drpOption(newV)}
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
handleRanger(e){
|
||||
console.log(e);
|
||||
this.tm = [...e]
|
||||
},
|
||||
// 搜索
|
||||
async getJcsjData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",
|
||||
{
|
||||
stcd:this.stcd,
|
||||
startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.tableData = [...data.data]
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
// 获取图表数据
|
||||
async getRainChartData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",
|
||||
{
|
||||
stcd:this.stcd,
|
||||
startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.rainChartData = {...data.data}
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
searchHandle(){
|
||||
this.getJcsjData();
|
||||
this.getRainChartData()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getJcsjData()
|
||||
this.getRainChartData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jcsj-box{
|
||||
.time-ranger{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.search-btn{
|
||||
margin: 3px 0 0 5px;
|
||||
// color: #3399ef;
|
||||
}
|
||||
}
|
||||
.jcsj-content{
|
||||
max-height:calc(100vh - 89px - 43px - 45px);
|
||||
overflow-y:auto
|
||||
}
|
||||
.jcsj-charts{
|
||||
width:100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 50px;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 200px">时间</th>
|
||||
<th style="width: 150px;">
|
||||
小时雨量(mm)
|
||||
</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 320px; overflow-y: auto" -->
|
||||
<div style="max-height: 250px; overflow-y: auto">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 50px">{{ index + 1 }}</td>
|
||||
<td style="width: 200px;">{{ item.time }}</td>
|
||||
<td style="width: 150px">{{ item.sumDrp }}</td>
|
||||
</tr>
|
||||
<div style="height:155px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 65rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 65rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 145px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<view class="rain-detail-box">
|
||||
<u-status-bar></u-status-bar>
|
||||
<view class="nav-bar">
|
||||
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||
<view class="title">
|
||||
{{stnm}}
|
||||
<text style="font-size:12px;margin-left:5px">{{sta}}({{rain}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar" >
|
||||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||||
监测数据
|
||||
</view>
|
||||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
|
||||
统计数据
|
||||
</view>
|
||||
<view class="zbyq" @click="activeOne = 2" :class="{'active':activeOne == 2}">
|
||||
周边雨情
|
||||
</view>
|
||||
</view>
|
||||
<view class="rain-detail-content">
|
||||
<Jcsj :stcd="stcd" v-if="activeOne == 0"/>
|
||||
<Tjsj :stcd="stcd" v-else-if="activeOne == 1"/>
|
||||
<Zbyq :stcd="stcd" v-else-if="activeOne == 2"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Jcsj from "./jcsj/jcsj.vue"
|
||||
import Tjsj from "./tjsj/tjsj.vue"
|
||||
import Zbyq from "./zbyq/zbyq.vue"
|
||||
const staType = {
|
||||
MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"
|
||||
}
|
||||
const rainType = {'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
activeOne:0,
|
||||
stcd:'',
|
||||
stnm:'',
|
||||
rainType:rainType,
|
||||
staType:staType,
|
||||
// sta:staType[sttp]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
Jcsj,
|
||||
Tjsj,
|
||||
Zbyq
|
||||
},
|
||||
methods:{
|
||||
backTo(){
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.stcd = option.stcd;
|
||||
this.stnm = option.stnm;
|
||||
this.sta = staType[option.sttp];
|
||||
this.rain = rainType[option.source];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rain-detail-box{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
// margin-top: 30px;
|
||||
// padding-top: 20px;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
}
|
||||
.title{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 30px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.active{
|
||||
color: #39a6ff;
|
||||
}
|
||||
.rain-detail-content{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<view class="tjsj-box">
|
||||
<uni-row class="tjsj-row" :width="700">
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近1h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h1||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近3h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h3||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近6h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h6||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近12h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h12||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近24h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h24||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近48h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h48||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">今日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.today||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">昨日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本月雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.monthDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年降雨天数</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" style="border-bottom: 1px solid #dfdfdf;">本年最大日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="display: flex; justify-content: center; border-bottom: 1px solid #dfdfdf;">
|
||||
<text>{{tableData.maxDrp||0}}</text>
|
||||
<text style="color: #E69224;">({{maxDrpTime}})</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
|
||||
</uni-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
default:''
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData:{},
|
||||
days:moment().diff(moment().startOf('year'),'days')+1
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
maxDrpTime(){
|
||||
if(this.tableData.maxDrpTime){
|
||||
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableData(){
|
||||
console.log(this.stcd);
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
`/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStPptnDetails/stcd?stcd=${this.stcd}`
|
||||
)
|
||||
if(data.code == 200){
|
||||
this.tableData = {...data.data};
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tjsj-box{
|
||||
.tjsj-row{
|
||||
.first-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
}
|
||||
.second-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<view class="list-box">
|
||||
<uni-row class="list-row" >
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" style="margin-left: 10px;">
|
||||
<text style="display: inline-block; margin-bottom: 10px; font-weight: bold;">{{info.stnm}}</text>
|
||||
<view>
|
||||
<text style="margin-right: 60px; color: #aaaaaa;">{{sttype[info.source]}}</text>
|
||||
<text style="color: #aaaaaa;">{{info.distance ? info.distance.toFixed(2) : 0}}km</text>
|
||||
</view>
|
||||
<text style="color: #aaaaaa;">{{info.tm}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12" >
|
||||
<view class="second-row" style="border: 1px solid #dfdfdf; font-size: 12px;border-bottom: 1px solid #dfdfdf;">
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
1h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
3h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h1}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h3}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
6h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
24h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-right: 1px solid #dfdfdf;">
|
||||
{{info.h6}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; ">
|
||||
{{info.h24}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
info:Object,
|
||||
default:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sttype: {
|
||||
"SH": '山洪',
|
||||
"SW": '水文',
|
||||
"QX": '气象',
|
||||
"SK": '水库',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box{
|
||||
.list-row{
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
.second-row{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="zbyq-box">
|
||||
<view class="search-bar">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
placeholder="请输入站点"
|
||||
height="40px"
|
||||
@change="inputChange"
|
||||
v-model="formData.value"
|
||||
></u-search>
|
||||
<image
|
||||
src="../../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; margin-right: 10px; margin-left: 10px;"
|
||||
@click="popupOpen = true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-for="(item,index) in list" :key="index" style="margin-bottom: 5px;">
|
||||
<ResList :info="item" />
|
||||
</view>
|
||||
<view style="height:300px"></view>
|
||||
</view>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
||||
<view style="padding: 30px 20px;">
|
||||
<text style="font-weight: bold;">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px;">
|
||||
<u-checkbox-group
|
||||
v-model="formData.sources"
|
||||
@change="checkboxChange"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{margin: '7px'}"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<text style="font-weight: bold; margin-bottom: 5px;">按距离</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
<u--input
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
type="number"
|
||||
v-model="formData.distance"
|
||||
style="width: 50%; margin-top: 5px; margin-right: 10px;"
|
||||
></u--input>
|
||||
<text>(km)</text>
|
||||
</view>
|
||||
<view style="display: flex; position:absolute;bottom:20px;right:20px">
|
||||
<u-button text="重置" class="bottom-btn1"
|
||||
@click="formData = {...formData,sources,distance:1}"></u-button>
|
||||
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popConfirm"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResList from "./resList.vue"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupOpen:false,
|
||||
sources:["SH","SW","QX","SK"],
|
||||
checkboxList1: [{
|
||||
name: '山洪',
|
||||
value: "SH"
|
||||
},
|
||||
{
|
||||
name: '水文',
|
||||
value: "SW"
|
||||
},
|
||||
{
|
||||
name: '气象',
|
||||
value: "QX"
|
||||
},
|
||||
{
|
||||
name: '水库',
|
||||
value: "SK"
|
||||
}
|
||||
],
|
||||
|
||||
formData:{
|
||||
value:'',
|
||||
sources:["SH","SW","QX","SK"],
|
||||
distance:1,
|
||||
stcd:this.stcd
|
||||
},
|
||||
list:[], //搜索结果
|
||||
saveList:[] //保存搜索结果
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ResList
|
||||
},
|
||||
methods: {
|
||||
inputChange(e){
|
||||
console.log("e",e);
|
||||
if(!e) this.list = this.saveList;
|
||||
this.formData={...this.formData,value:e}
|
||||
let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
|
||||
this.list = filterData;
|
||||
},
|
||||
checkboxChange(n) {
|
||||
console.log('change', n);
|
||||
this.formData = {...this.formData,sources:n};
|
||||
},
|
||||
popConfirm(){
|
||||
this.popupOpen = false
|
||||
this.getList()
|
||||
},
|
||||
async getList(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryNearbyRainStations",{...this.formData}
|
||||
)
|
||||
console.log("data",data);
|
||||
if(data.code == 200){
|
||||
this.list = [...data.data]
|
||||
this.saveList = [...data.data]
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zbyq-box{
|
||||
.search-bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content{
|
||||
margin-top: 10px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-btn1{
|
||||
width: 100px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2{
|
||||
width: 100px;
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
|
||||
export default function DrpOption(
|
||||
data,
|
||||
afsltdz,
|
||||
flLowLimLev,
|
||||
desFloodLev,
|
||||
calFloodLev) {
|
||||
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||
const maxSw = Math.ceil(Math.max(...data.map(obj => obj.rz)))
|
||||
const minSw = Math.floor(Math.min(...data.map(obj => obj.rz)))
|
||||
const maxKr = Math.max(...data.map(obj => obj.w))
|
||||
const minKr = Math.min(...data.map(obj => obj.w))
|
||||
console.log('desFloodLev',desFloodLev);
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "13%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '35%'
|
||||
},
|
||||
{
|
||||
bottom: "5%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
width: '80%',
|
||||
height: '35%'
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
// 图例的位置
|
||||
data: ["校核水位", '设计水位', '汛限水位', '降雨量', '水位', '库容'],
|
||||
left:0,
|
||||
right:0,
|
||||
itemWidth:10,
|
||||
padding:0
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm).reverse(),
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm.substr("2020-".length,11)),
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
formatter: val => val.substr('2020-'.length, 11)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
inverse: true,
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '降雨量(mm)',
|
||||
nameLocation: 'start',
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: 0,
|
||||
max: maxVal
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '水位(m)',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: minSw,
|
||||
max: maxSw
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '库容(万m³)',
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: minKr,
|
||||
max: maxKr
|
||||
}
|
||||
],
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '校核水位',
|
||||
type: 'line',
|
||||
color: '#D9001B',
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
data: data.map(o => calFloodLev),
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '设计水位',
|
||||
type: 'line',
|
||||
color: '#F59A23',
|
||||
data: data.map(o => desFloodLev),
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '汛限水位',
|
||||
type: 'line',
|
||||
color: '#FDDC9F',
|
||||
data: data.map(o => {
|
||||
return flLowLimLev
|
||||
}),
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
name: '降雨量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: data.map(o => o.drp).reverse(),
|
||||
itemStyle: {
|
||||
color: '#007AFD'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: '#0AE0B5',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(o => o.rz ? o.rz.toFixed(2):null )
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 2,
|
||||
name: '库容',
|
||||
type: 'line',
|
||||
color: '#007AFD',
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(o => o.w)
|
||||
}
|
||||
],
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
<!-- <uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <view class="" style="width: 100%; height: 3px; background-color: #dfdfdf; margin-bottom: 2px;">
|
||||
|
||||
" </view> -->
|
||||
<view style="text-align: right; margin-bottom: -15px;">
|
||||
<text :class="{'active':selactOne == 0}" @click="selactOne = 0" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">图</text>
|
||||
<text :class="{'active':selactOne == 1}" @click="selactOne = 1" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">表</text>
|
||||
</view>
|
||||
<view class="jcsj-content">
|
||||
<view class="jcsj-charts" v-if="selactOne == 0">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<view style="margin-top: 20px;" v-if="selactOne == 1">
|
||||
<JcsjTable :tableData="tableData" />
|
||||
</view>
|
||||
<view style="height:300px" v-if="selactOne == 0"></view>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="datetime"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="datetime"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
import JcsjTable from "./jcsjTable"
|
||||
import drpOption from "./chartOption.js"
|
||||
const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const etm = moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
wrz:String,
|
||||
grz:String,
|
||||
afsltdz:String,
|
||||
flLowLimLev:String,
|
||||
desFloodLev:String,
|
||||
calFloodLev:String,
|
||||
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
stm,
|
||||
etm,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
tableData:[],
|
||||
chartData: {},
|
||||
rainChartData:[],
|
||||
selactOne:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
JcsjTable
|
||||
},
|
||||
watch:{
|
||||
rainChartData(newV, oldV){
|
||||
this.chartData = {...drpOption(newV,this.afsltdz,this.flLowLimLev,this.desFloodLev,this.calFloodLev)}
|
||||
this.tableData = [...newV]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
handleRanger(e){
|
||||
console.log(e);
|
||||
this.tm = [...e]
|
||||
},
|
||||
// 搜索
|
||||
async getJcsjData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/reservoir/water/monitor/data",
|
||||
{
|
||||
stcd:this.stcd,
|
||||
stm:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
etm:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
source:this.source
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.rainChartData = [...data.data];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
searchHandle(){
|
||||
this.getJcsjData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getJcsjData();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jcsj-box{
|
||||
.time-ranger{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.search-btn{
|
||||
margin: 3px 0 0 5px;
|
||||
// color: #3399ef;
|
||||
}
|
||||
}
|
||||
.jcsj-content{
|
||||
max-height:100vh;
|
||||
width: 100%;
|
||||
overflow-y:auto
|
||||
}
|
||||
.jcsj-charts{
|
||||
// width:103vw;
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.active{
|
||||
border-color: #68bbff !important;
|
||||
color: #68bbff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 40px;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 80px">时间</th>
|
||||
<th style="width: 80px;">
|
||||
雨量(mm)
|
||||
</th>
|
||||
<th style="width: 90px;">
|
||||
水位(m)
|
||||
</th>
|
||||
<th style="width: 90px; position: relative;">
|
||||
<view>
|
||||
库容(万m³)
|
||||
<!-- <text style="position: absolute; bottom:-10px; left: 20px;">(m³/s)</text> -->
|
||||
</view>
|
||||
</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in newList" :key="index">
|
||||
<td style="width: 30px">{{ index + 1 }}</td>
|
||||
<td style="width: 80px;">{{ item.tm }}</td>
|
||||
<td style="width: 80px">{{ item.drp }}</td>
|
||||
<td style="width: 100px">{{ item.rz ? item.rz.toFixed(2) : "-" }}</td>
|
||||
<td style="width: 80px">{{ item.w ? item.w : "-" }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
newList(){
|
||||
if(this.tableData.length){
|
||||
return this.tableData.map(item => ({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 85rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<view class="rain-detail-box">
|
||||
<u-status-bar></u-status-bar>
|
||||
<view class="nav-bar">
|
||||
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||
<view class="title">
|
||||
{{stnm}}
|
||||
<text style="font-size:12px;margin-left:5px">{{sta}}({{rain}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar">
|
||||
<uni-swiper-dot :info="Array(2).fill(0)" :current="current" field="content" :dotsStyles="dotsStyles">
|
||||
<swiper class="swiper-box" style="height: 30px;" @change="change">
|
||||
<swiper-item >
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||||
监测数据
|
||||
</view>
|
||||
<!-- style="margin: 0 25px;" -->
|
||||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}" style="margin: 0 4%">
|
||||
统计数据
|
||||
</view>
|
||||
<!-- style="margin: 0 25px 0 0;" -->
|
||||
<view class="zrtx" @click="activeOne = 2" :class="{'active':activeOne == 2}" >
|
||||
责任体系
|
||||
</view>
|
||||
<view class="txjc" @click="activeOne = 3" :class="{'active':activeOne == 3}" style="margin-left:4%">
|
||||
图像监测
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item >
|
||||
<view style="display: flex;">
|
||||
<view class="spjk" @click="activeOne = 4" :class="{'active':activeOne == 4}" style="margin:0 4%">
|
||||
视频监控
|
||||
</view>
|
||||
<view class="zbyq" @click="activeOne = 5" :class="{'active':activeOne == 5}" >
|
||||
周边雨情
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
</view>
|
||||
<view class="rain-detail-content">
|
||||
<Jcsj :stcd="stcd" :source="source" :afsltdz="afsltdz" :flLowLimLev="flLowLimLev" :desFloodLev="desFloodLev" :calFloodLev="calFloodLev" v-if="activeOne == 0"/>
|
||||
<Tjsj :stcd="stcd" :source="source" v-else-if="activeOne == 1"/>
|
||||
<Zrtx :stcd="stcd" :source="source" :resCode="resCode" v-else-if="activeOne == 2"/>
|
||||
<Txjc :resCode="resCode" :source="source" v-else-if="activeOne == 3"/>
|
||||
<Spjk :stcd="stcd" :source="source" v-else-if="activeOne == 4"/>
|
||||
<Zbyq :stcd="stcd" v-else-if="activeOne == 5"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Jcsj from "./jcsj/jcsj.vue"
|
||||
import Tjsj from "./tjsj/tjsj.vue"
|
||||
import Zbyq from "./zbyq/zbyq.vue"
|
||||
import Spjk from "./spjk/spjk.vue"
|
||||
import Zrtx from "./zrtx/zrtx.vue"
|
||||
import Txjc from "./txjc/txjc.vue"
|
||||
const staType = {
|
||||
MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"
|
||||
}
|
||||
const rainType = {'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
activeOne:0,
|
||||
stcd:'',
|
||||
stnm:'',
|
||||
source:'',
|
||||
wrz:'',
|
||||
grz:'',
|
||||
calFloodLev:'',
|
||||
desFloodLev:'',
|
||||
flLowLimLev:'',
|
||||
afsltdz:'',
|
||||
resCode:'',
|
||||
current:0,
|
||||
dotsStyles:{
|
||||
bottom:0,
|
||||
selectedBackgroundColor:"#d9001b"
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
Jcsj,
|
||||
Tjsj,
|
||||
Zbyq,
|
||||
Spjk,
|
||||
Zrtx,
|
||||
Txjc
|
||||
},
|
||||
methods:{
|
||||
backTo(){
|
||||
uni.navigateBack({delta:1})
|
||||
},
|
||||
change(e) {
|
||||
console.log(e.detail.current);
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.stcd = option.stcd;
|
||||
this.stnm = option.stnm;
|
||||
this.source = option.source;
|
||||
this.grz = option.grz;
|
||||
this.wrz = option.wrz;
|
||||
this.afsltdz = option.afsltdz;
|
||||
this.calFloodLev = option.calFloodLev;
|
||||
this.flLowLimLev = option.flLowLimLev;
|
||||
this.desFloodLev = option.desFloodLev;
|
||||
this.resCode = option.resCode;
|
||||
this.sta = staType[option.sttp];
|
||||
this.rain = rainType[option.source];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rain-detail-box{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
// margin-top: 30px;
|
||||
// padding-top: 20px;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
}
|
||||
.title{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
margin-right: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-bar{
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 30px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// overflow-x: auto;
|
||||
}
|
||||
.active{
|
||||
color: #39a6ff;
|
||||
}
|
||||
.rain-detail-content{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<view class="spjk-box">
|
||||
<view class="select-bar">
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="list"
|
||||
@change="change"
|
||||
:clear="false"
|
||||
>
|
||||
</uni-data-select>
|
||||
</view>
|
||||
<view class="video-box" >
|
||||
<iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
|
||||
</view>
|
||||
<!-- <u-overlay :show="show" @click="show = false">
|
||||
<view class="warp" style="position:relative;">
|
||||
<view class="rect" >
|
||||
<iframe :src="webURL" style="height: 100vh;width:100vw" frameborder="0" ref="videoFrame"></iframe>
|
||||
<image src="/static/images/m1.png" style="position:absolute; bottom:0,right:0"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay> -->
|
||||
<!-- <button @click="handler">全屏</button> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
list:[],
|
||||
webURL:'',
|
||||
show:0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
receiveRenderData(e){
|
||||
//接收的值
|
||||
console.log("3333",e.data)
|
||||
this.show = e.data
|
||||
},
|
||||
async getList(){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
`/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
|
||||
if(data.code == 200){
|
||||
let newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
|
||||
this.list = [...newData];
|
||||
this.value = newData[0].value
|
||||
this.getVideoSrc(newData[0].camId)
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async getVideoSrc(id){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
`/gunshiApp/xfflood/xfCctvB/preview/${id}`)
|
||||
if(data.code == 200){
|
||||
this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
this.getVideoSrc(e)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<script module="renderModal" lang="renderjs">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dom: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dom = document.getElementById('iframe')
|
||||
// 接收iframe传过来的值
|
||||
window.addEventListener('message', (e)=> {
|
||||
var data = e.data;
|
||||
this.emitData(data)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
emitData(e) {
|
||||
this.$ownerInstance.callMethod('receiveRenderData',e)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spjk-box{
|
||||
.select-bar{
|
||||
margin: 10px 15px;
|
||||
}
|
||||
.video-box{
|
||||
.normal{
|
||||
position: absolute;
|
||||
// width: 370px;
|
||||
// height: 300px;
|
||||
top: 170px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.active{
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<view class="tjsj-box">
|
||||
<uni-row class="tjsj-row" :width="700">
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近1h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h1||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近3h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h3||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近6h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h6||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近12h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h12||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近24h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h24||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近48h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h48||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">今日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.today||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">昨日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本月雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.monthDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年降雨天数</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" >本年最大日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="display: flex; justify-content: center;">
|
||||
<text>{{tableData.maxDrp||0}}</text>
|
||||
<text style="color: #E69224;">({{maxDrpTime}})</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">24h水位变幅(m)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.rzDiff > 0 ? "+" :"" }}{{tableData.rzDiff?tableData.rzDiff.toFixed(2) : 0}}</view>
|
||||
</uni-col> <uni-col :span="12">
|
||||
<view class="first-row" style="border-bottom: 1px solid #dfdfdf;">本年最高水位(m)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="border-bottom: 1px solid #dfdfdf;">{{tableData.maxRz ? tableData.maxRz.toFixed(2) :0}}</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<view style="height:150px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
source:String,
|
||||
default:''
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tableData:{},
|
||||
days:moment().diff(moment().startOf('year'),'days')+1
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
maxDrpTime(){
|
||||
if(this.tableData.maxDrpTime){
|
||||
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
`/gunshiApp/xfflood/river/water/detail`,{
|
||||
source:this.source,
|
||||
stcd:this.stcd,
|
||||
type:2
|
||||
}
|
||||
)
|
||||
if(data.code == 200){
|
||||
this.tableData = {...data.data};
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tjsj-box{
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
.tjsj-row{
|
||||
.first-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
}
|
||||
.second-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<view class="txjc-box">
|
||||
<view class="time-ranger">
|
||||
<uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
<view class="pic-box" style="margin-top: 20px; position: relative; height: 800px;">
|
||||
<!-- <u-album :urls="list" singleSize="360" rowCount="1"></u-album> -->
|
||||
<u-image :src="list[current]" width="380" height="400" mode="scaleToFill" :lazy-load="true" @click="previewImage"></u-image>
|
||||
<image src="../../../static/images/icon.png" @click="handleLeft" class="icon-left"></image>
|
||||
<image src="../../../static/images/icon.png" @click="handleRight" class="icon-right"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
|
||||
const etm = moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
|
||||
export default {
|
||||
props:{
|
||||
source:String,
|
||||
resCode:String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tm:[stm,etm],
|
||||
list:[],
|
||||
current:0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLeft(){
|
||||
if(this.current > 0){
|
||||
this.current -= 1;
|
||||
}else{
|
||||
uni.$showMsg("已经是第一张图片了")
|
||||
}
|
||||
},
|
||||
handleRight(){
|
||||
if(this.list.length > this.current){
|
||||
this.current += 1;
|
||||
}else{
|
||||
uni.$showMsg("已经是最后一张图片了")
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(){
|
||||
uni.previewImage({
|
||||
urls:this.list
|
||||
})
|
||||
},
|
||||
handleRanger(e){
|
||||
this.tm = [...e]
|
||||
},
|
||||
// 搜索
|
||||
searchHandle(){
|
||||
this.getData()
|
||||
|
||||
},
|
||||
async getData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/river/water/image/info",
|
||||
{
|
||||
source:this.source,
|
||||
resCode:this.resCode,
|
||||
stm:this.tm[0],
|
||||
etm:this.tm[1],
|
||||
"pageSo": {
|
||||
"pageSize": 10,
|
||||
"pageNumber": 1
|
||||
}
|
||||
})
|
||||
if(data.code == 200){
|
||||
let newList = data.data.records.map(item =>item.imgPath)
|
||||
this.list = [...newList]
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.txjc-box{
|
||||
.time-ranger{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.search-btn{
|
||||
margin: 3px 0 0 5px;
|
||||
color: #3399ef;
|
||||
}
|
||||
}
|
||||
.icon-left{
|
||||
position: absolute;
|
||||
top: 23%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.icon-right{
|
||||
position: absolute;
|
||||
top: 23%;
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<view class="list-box">
|
||||
<uni-row class="list-row" >
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" style="margin-left: 10px;">
|
||||
<text style="display: inline-block; margin-bottom: 10px; font-weight: bold;">{{info.stnm}}</text>
|
||||
<view>
|
||||
<text style="margin-right: 60px; color: #aaaaaa;">{{sttype[info.source]}}</text>
|
||||
<text style="color: #aaaaaa;">{{info.distance ? info.distance.toFixed(2) : 0}}km</text>
|
||||
</view>
|
||||
<text style="color: #aaaaaa;">{{info.tm}}</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12" >
|
||||
<view class="second-row" style="border: 1px solid #dfdfdf; font-size: 12px;border-bottom: 1px solid #dfdfdf;">
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
1h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
3h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h1}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
{{info.h3}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
|
||||
6h(mm)
|
||||
</view>
|
||||
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
|
||||
24h(mm)
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 0.5; text-align: center; border-right: 1px solid #dfdfdf;">
|
||||
{{info.h6}}
|
||||
</view>
|
||||
<view style="flex: 0.5; text-align: center; ">
|
||||
{{info.h24}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
info:Object,
|
||||
default:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sttype: {
|
||||
"SH": '山洪',
|
||||
"SW": '水文',
|
||||
"QX": '气象',
|
||||
"SK": '水库',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box{
|
||||
.list-row{
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
.second-row{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="zbyq-box">
|
||||
<view class="search-bar">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
placeholder="请输入站点"
|
||||
height="40px"
|
||||
@change="inputChange"
|
||||
v-model="formData.value"
|
||||
></u-search>
|
||||
<image
|
||||
src="../../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; margin-right: 10px; margin-left: 10px;"
|
||||
@click="popupOpen = true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-for="(item,index) in list" :key="index" style="margin-bottom: 5px;">
|
||||
<ResList :info="item" />
|
||||
</view>
|
||||
<view style="height:300px"></view>
|
||||
</view>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
||||
<view style="padding: 30px 20px;">
|
||||
<text style="font-weight: bold;">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px;">
|
||||
<u-checkbox-group
|
||||
v-model="formData.sources"
|
||||
@change="checkboxChange"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{margin: '7px'}"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<text style="font-weight: bold; margin-bottom: 5px;">按距离</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
<u--input
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
type="number"
|
||||
v-model="formData.distance"
|
||||
style="width: 50%; margin-top: 5px; margin-right: 10px;"
|
||||
></u--input>
|
||||
<text>(km)</text>
|
||||
</view>
|
||||
<view style="display: flex; position:absolute;bottom:20px;right:20px">
|
||||
<u-button text="重置" class="bottom-btn1"
|
||||
@click="formData = {...formData,sources,distance:1}"></u-button>
|
||||
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popConfirm"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResList from "./resList.vue"
|
||||
export default {
|
||||
props:{
|
||||
stcd:String,
|
||||
default:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupOpen:false,
|
||||
sources:["SH","SW","QX","SK"],
|
||||
checkboxList1: [{
|
||||
name: '山洪',
|
||||
value: "SH"
|
||||
},
|
||||
{
|
||||
name: '水文',
|
||||
value: "SW"
|
||||
},
|
||||
{
|
||||
name: '气象',
|
||||
value: "QX"
|
||||
},
|
||||
{
|
||||
name: '水库',
|
||||
value: "SK"
|
||||
}
|
||||
],
|
||||
|
||||
formData:{
|
||||
value:'',
|
||||
sources:["SH","SW","QX","SK"],
|
||||
distance:1,
|
||||
stcd:this.stcd
|
||||
},
|
||||
list:[], //搜索结果
|
||||
saveList:[] //保存搜索结果
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ResList
|
||||
},
|
||||
methods: {
|
||||
inputChange(e){
|
||||
console.log("e",e);
|
||||
if(!e) this.list = this.saveList;
|
||||
this.formData={...this.formData,value:e}
|
||||
let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
|
||||
this.list = filterData;
|
||||
},
|
||||
checkboxChange(n) {
|
||||
console.log('change', n);
|
||||
this.formData = {...this.formData,sources:n};
|
||||
},
|
||||
popConfirm(){
|
||||
this.popupOpen = false
|
||||
this.getList()
|
||||
},
|
||||
async getList(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryNearbyRainStations",{...this.formData}
|
||||
)
|
||||
console.log("data",data);
|
||||
if(data.code == 200){
|
||||
this.list = [...data.data]
|
||||
this.saveList = [...data.data]
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zbyq-box{
|
||||
.search-bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content{
|
||||
margin-top: 10px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-btn1{
|
||||
width: 100px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2{
|
||||
width: 100px;
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<view class="zrtx-box">
|
||||
<view class="title" style="text-align: center; font-size: 20px; font-weight: bold;">
|
||||
{{dic}}
|
||||
</view>
|
||||
<view class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 50px;">
|
||||
姓名
|
||||
</th>
|
||||
<th style="width: 130px">单位</th>
|
||||
<th style="width: 80px;">
|
||||
职务
|
||||
</th>
|
||||
<th style="width: 100px;">
|
||||
联系方式
|
||||
</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 500px; overflow-y: auto" -->
|
||||
<view >
|
||||
<tr>
|
||||
<td style="width: 50px">{{info.personName}}</td>
|
||||
<td style="width: 130px;">{{info.orgName}}</td>
|
||||
<td style="width: 80px">{{info.position}}</td>
|
||||
<td style="width: 100px;color: #62bafa;" @click="show = true">{{info.tel}}</td>
|
||||
</tr>
|
||||
|
||||
</view>
|
||||
</table>
|
||||
|
||||
</view>
|
||||
<u-action-sheet :actions="list" :title="title" :show="show" :description="info.tel" @select="selectClick" :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {repDict} from "../../utils/dicType.js"
|
||||
export default {
|
||||
props:{
|
||||
info:Object,
|
||||
default:{}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
title:"",
|
||||
list: [
|
||||
{
|
||||
name:'呼叫'
|
||||
},
|
||||
{
|
||||
name:'复制'
|
||||
},
|
||||
{
|
||||
name:'取消'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dic(){
|
||||
return repDict(this.info.repType)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectClick(obj){
|
||||
if(obj.name == "呼叫"){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.info.tel,
|
||||
});
|
||||
this.show = false
|
||||
}else if(obj.name == "复制"){
|
||||
uni.setClipboardData({
|
||||
data:this.info.tel,
|
||||
showToast:true
|
||||
})
|
||||
this.show = false
|
||||
}
|
||||
// else if(obj.name == "保存至手机通讯录"){
|
||||
// uni.addPhoneContact({
|
||||
// lastName: this.info.personName.substr(0,1),
|
||||
// firstName: this.info.personName.substr(1),
|
||||
// mobilePhoneNumber: this.info.tel,
|
||||
// success: function () {
|
||||
// uni.$showMsg("保存成功")
|
||||
// },
|
||||
// fail: function () {
|
||||
// console.log('fail');
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
else{
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zrtx-box{
|
||||
border: 1px solid #c1f2ce;
|
||||
border-radius: 2px;
|
||||
padding:10px 10px 5px 10px;
|
||||
background-color: #ebfbef;
|
||||
margin-bottom: 10px;
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 125px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 65rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 65rpx;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
|
||||
font-weight: 100;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<view class="scroll-table">
|
||||
<view v-for="(item,index) in list" :key="index" >
|
||||
<Card :info="item" />
|
||||
</view>
|
||||
<view style="height:50px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "./card.vue"
|
||||
export default {
|
||||
props:{
|
||||
resCode:String,
|
||||
default:''
|
||||
},
|
||||
components:{
|
||||
Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getData(){
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/reservoir/water/safe/person",
|
||||
{
|
||||
resCode:this.resCode
|
||||
})
|
||||
console.log("data",data);
|
||||
if(data.code == 200){
|
||||
this.list = [...data.data];
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-table{
|
||||
height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<view class="upgrade-popup">
|
||||
<image
|
||||
class="header-bg"
|
||||
src="../../static/images/upgrade.png"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
<view class="main">
|
||||
<view class="version">发现新版本{{ "v" + info.version }}</view>
|
||||
<view class="content">
|
||||
<text class="title">更新内容</text>
|
||||
<view class="desc" v-html="info.versionDesc"></view>
|
||||
</view>
|
||||
<!--下载状态-进度条显示 -->
|
||||
<view class="footer" v-if="isStartDownload">
|
||||
<view
|
||||
class="progress-view"
|
||||
:class="{ active: !hasProgress }"
|
||||
@click="handleInstallApp"
|
||||
>
|
||||
<!-- 进度条 -->
|
||||
<view v-if="hasProgress" style="height: 100%">
|
||||
<view class="txt">{{ percentText }}</view>
|
||||
<view class="progress" :style="setProStyle"></view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="btn upgrade force">{{
|
||||
isDownloadFinish ? "立即安装" : "下载中..."
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 强制更新 -->
|
||||
<view class="footer" v-else-if="isForceUpdate">
|
||||
<view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
|
||||
</view>
|
||||
<!-- 可选择更新 -->
|
||||
<view class="footer" v-else>
|
||||
<view class="btn close" @click="handleClose">以后再说</view>
|
||||
<view class="btn upgrade" @click="handleUpgrade">立即更新</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { downloadApp, installApp } from "../utils/upgrade.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isForceUpdate: false, //是否强制更新
|
||||
isDownloadFinish: false, //是否下载完成
|
||||
hasProgress: false, //是否能显示进度条
|
||||
currentPercent: 0, //当前下载百分比
|
||||
isStartDownload: false, //是否开始下载
|
||||
fileName: "", //下载后app本地路径名称
|
||||
info: {},
|
||||
downloadUrl: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
//设置进度条样式，实时更新进度位置
|
||||
setProStyle() {
|
||||
return {
|
||||
width: (510 * this.currentPercent) / 100 + "rpx", //510：按钮进度条宽度
|
||||
};
|
||||
},
|
||||
//百分比文字
|
||||
percentText() {
|
||||
let percent = this.currentPercent;
|
||||
if (typeof percent !== "number" || isNaN(percent)) return "下载中...";
|
||||
if (percent < 100) return `下载中${percent}%`;
|
||||
return "立即安装";
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.info = JSON.parse(decodeURIComponent(options.info));
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 禁用返回
|
||||
if (options.from == "backbutton") {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//更新
|
||||
handleUpgrade() {
|
||||
if (this.info.url) {
|
||||
this.isStartDownload = true;
|
||||
//开始下载App
|
||||
// const baseUrl = `http://223.75.53.141:83/gunshiApp/xfflood/${this.info.url}`
|
||||
const baseUrl = `${uni.$http.baseUrl}/gunshiApp/xfflood/${this.info.url}`;
|
||||
console.log("baseUrl", baseUrl);
|
||||
|
||||
downloadApp(baseUrl, (current) => {
|
||||
//下载进度监听
|
||||
this.hasProgress = true;
|
||||
this.currentPercent = current;
|
||||
})
|
||||
.then((fileName) => {
|
||||
//下载完成
|
||||
this.isDownloadFinish = true;
|
||||
this.fileName = fileName;
|
||||
if (fileName) {
|
||||
//自动安装App
|
||||
this.handleInstallApp();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e, "e");
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "下载链接不存在",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
//安装app
|
||||
handleInstallApp() {
|
||||
//下载完成才能安装，防止下载过程中点击
|
||||
if (this.isDownloadFinish && this.fileName) {
|
||||
installApp(this.fileName, () => {
|
||||
//安装成功,关闭升级弹窗
|
||||
uni.navigateBack();
|
||||
});
|
||||
}
|
||||
},
|
||||
//关闭返回
|
||||
handleClose() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
/**设置窗口背景半透明*/
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.upgrade-popup {
|
||||
width: 580rpx;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: 70%;
|
||||
margin-top: -112rpx;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 10rpx 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.version {
|
||||
font-size: 36rpx;
|
||||
color: #026df7;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.desc {
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-top: 100rpx;
|
||||
|
||||
.btn {
|
||||
width: 246rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
height: 96rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
border-radius: 10rpx;
|
||||
letter-spacing: 2rpx;
|
||||
|
||||
&.force {
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
&.close {
|
||||
border: 1px solid #e0e0e0;
|
||||
margin-right: 25rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.upgrade {
|
||||
background-color: #026df7;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-view {
|
||||
width: 510rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
background-color: #dcdcdc;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
background-color: #026df7;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background-color: #026df7;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-top-left-radius: 10rpx;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
export function repDict(e) {
|
||||
let name=""
|
||||
if(e=="1"){
|
||||
name="行政责任人"
|
||||
}else if(e=="2"){
|
||||
name="技术责任人"
|
||||
}else if(e=="3"){
|
||||
name="巡查责任人"
|
||||
}else if(e=="4"){
|
||||
name="主管部门责任人"
|
||||
}else if(e=="5"){
|
||||
name="管理单位责任人"
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
||||
// 县，乡镇判断
|
||||
export function disType(e) {
|
||||
let type;
|
||||
if (e.endsWith('000000000')) {
|
||||
type = 1;
|
||||
} else{
|
||||
type = 0;
|
||||
}
|
||||
return type;
|
||||
}
|
||||
|
||||
// 响应等级判断
|
||||
// 县，乡镇判断
|
||||
export function level(e) {
|
||||
let name;
|
||||
if (e == 1) {
|
||||
name = "Ⅰ级";
|
||||
} else if (e == 2) {
|
||||
name = "Ⅱ级";
|
||||
} else if (e == 3) {
|
||||
name = "Ⅲ级";
|
||||
} else if (e == 4) {
|
||||
name = "Ⅳ级";
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
export function restm (e) {
|
||||
let index = ''
|
||||
if (e == '8') {
|
||||
index = 0
|
||||
} else if (e == '9') {
|
||||
index = 1
|
||||
} else if (e == '10') {
|
||||
index = 2
|
||||
} else if (e == '11') {
|
||||
index = 3
|
||||
} else if (e == '12') {
|
||||
index = 4
|
||||
} else if (e == '13') {
|
||||
index = 5
|
||||
} else if (e == '14') {
|
||||
index = 6
|
||||
} else if (e == '15') {
|
||||
index = 7
|
||||
} else if (e == '16') {
|
||||
index = 8
|
||||
} else if (e == '17') {
|
||||
index = 9
|
||||
} else if (e == '18') {
|
||||
index = 10
|
||||
} else if (e == '19') {
|
||||
index = 11
|
||||
} else if (e == '20') {
|
||||
index = 12
|
||||
} else if (e == '21') {
|
||||
index = 13
|
||||
} else if (e == '22') {
|
||||
index = 14
|
||||
} else if (e == '23') {
|
||||
index = 15
|
||||
} else if (e == '0') {
|
||||
index = 16
|
||||
} else if (e == '1') {
|
||||
index = 17
|
||||
} else if (e == '2') {
|
||||
index = 18
|
||||
} else if (e == '3') {
|
||||
index = 19
|
||||
} else if (e == '4') {
|
||||
index = 20
|
||||
} else if (e == '5') {
|
||||
index = 21
|
||||
} else if (e == '6') {
|
||||
index = 22
|
||||
} else if (e == '7') {
|
||||
index = 23
|
||||
}
|
||||
return index
|
||||
}
|
||||
export const adnmZhen = adcd => {
|
||||
if (!adcd || !nameMap) {
|
||||
return undefined
|
||||
}
|
||||
if (adcd.endsWith('000000000')) {
|
||||
return undefined
|
||||
} else if (adcd.endsWith('000000')) {
|
||||
return nameMap[adcd]
|
||||
}
|
||||
return nameMap[`${adcd.substr(0, 9)}000000`]
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* @description H5+下载App
|
||||
* @param downloadUrl:App下载链接
|
||||
* @param progressCallBack:下载进度回调
|
||||
*/
|
||||
export const downloadApp = (downloadUrl, progressCallBack = () => { },) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//创建下载任务
|
||||
const downloadTask = plus.downloader.createDownload(downloadUrl, {
|
||||
method: "GET"
|
||||
}, (task, status) => {
|
||||
if (status == 200) { //下载成功
|
||||
resolve(task.filename)
|
||||
|
||||
} else {
|
||||
reject('fail')
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
duration: 1500,
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
})
|
||||
//监听下载过程
|
||||
downloadTask.addEventListener("statechanged", (task, status) => {
|
||||
switch (task.state) {
|
||||
case 1: // 开始
|
||||
break;
|
||||
case 2: //已连接到服务器
|
||||
break;
|
||||
case 3: // 已接收到数据
|
||||
let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小
|
||||
if (hasProgress) {
|
||||
let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比
|
||||
progressCallBack(current)
|
||||
}
|
||||
break;
|
||||
case 4: // 下载完成
|
||||
break;
|
||||
}
|
||||
});
|
||||
//开始执行下载
|
||||
downloadTask.start();
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
/**
|
||||
* @description H5+安装APP
|
||||
* @param fileName:app文件名
|
||||
* @param callBack:安装成功回调
|
||||
*/
|
||||
export const installApp = (fileName, callBack = () => {}) => {
|
||||
//注册广播监听app安装情况
|
||||
onInstallListening(callBack);
|
||||
//开始安装
|
||||
plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {
|
||||
//成功跳转到安装界面
|
||||
}, function(error) {
|
||||
uni.showToast({
|
||||
title: '安装失败',
|
||||
duration: 1500,
|
||||
icon: "none"
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
/**
|
||||
* @description 注册广播监听APP是否安装成功
|
||||
* @param callBack:安装成功回调函数
|
||||
*/
|
||||
const onInstallListening = (callBack = () => {}) => {
|
||||
|
||||
let mainActivity = plus.android.runtimeMainActivity(); //获取activity
|
||||
//生成广播接收器
|
||||
let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
|
||||
onReceive: (context, intent) => { //接收广播回调
|
||||
plus.android.importClass(intent);
|
||||
mainActivity.unregisterReceiver(receiver); //取消监听
|
||||
callBack()
|
||||
}
|
||||
});
|
||||
let IntentFilter = plus.android.importClass('android.content.IntentFilter');
|
||||
let Intent = plus.android.importClass('android.content.Intent');
|
||||
let filter = new IntentFilter();
|
||||
filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装
|
||||
filter.addDataScheme("package");
|
||||
mainActivity.registerReceiver(receiver, filter); //注册广播
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view class="zbyq-box">
|
||||
<view class="search-bar">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
placeholder="请输入站点"
|
||||
height="40px"
|
||||
@change="inputChange"
|
||||
v-model="formData.args"
|
||||
></u-search>
|
||||
<image
|
||||
src="../../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; margin-left: 20px"
|
||||
@click="popupOpen = true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<Table :list="list" :height="height" />
|
||||
</view>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen = false">
|
||||
<view style="padding: 30px 20px; width: 250px">
|
||||
<text style="font-weight: bold">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px">
|
||||
<u-checkbox-group v-model="formData.sources" @change="checkboxChange">
|
||||
<u-checkbox
|
||||
:customStyle="{ margin: '7px' }"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; position: absolute; bottom: 20px; right: 20px"
|
||||
>
|
||||
<u-button
|
||||
text="重置"
|
||||
class="bottom-btn1"
|
||||
@click="formData = { ...formData, sources }"
|
||||
></u-button>
|
||||
<u-button
|
||||
text="确认"
|
||||
color="#d9001b"
|
||||
class="bottom-btn2"
|
||||
@click="popConfirm"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Table from "./table.vue";
|
||||
import { disType } from "../../utils/dicType.js";
|
||||
const adcd = uni.getStorageSync("value").adcd;
|
||||
const type = disType(adcd);
|
||||
export default {
|
||||
props: {
|
||||
stcd: String,
|
||||
height: Number,
|
||||
default: "",
|
||||
},
|
||||
components: {
|
||||
Table,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupOpen: false,
|
||||
sources: ["SH", "SW"],
|
||||
checkboxList1: [
|
||||
{
|
||||
name: "山洪",
|
||||
value: "SH",
|
||||
},
|
||||
{
|
||||
name: "水文",
|
||||
value: "SW",
|
||||
},
|
||||
],
|
||||
|
||||
formData: {
|
||||
args: "",
|
||||
sources: ["SH", "SW"],
|
||||
// adcd:type == 1 ? undefined : adcd,
|
||||
},
|
||||
list: [], //搜索结果
|
||||
saveList: [], //保存搜索结果
|
||||
tableHeight: 0,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
inputChange(e) {
|
||||
console.log("e", e);
|
||||
if (!e) this.list = this.saveList;
|
||||
this.formData = { ...this.formData, value: e };
|
||||
let filterData = this.list.filter((item) => item.stnm.indexOf(e) > -1);
|
||||
this.list = filterData;
|
||||
},
|
||||
checkboxChange(n) {
|
||||
this.formData = { ...this.formData, sources: n };
|
||||
},
|
||||
popConfirm() {
|
||||
this.popupOpen = false;
|
||||
this.getList();
|
||||
},
|
||||
async getList() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
const adcd = uni.getStorageSync("value").adcd;
|
||||
let newAdcd = adcd.endsWith("000000000") ? "" : adcd;
|
||||
this.formData = { ...this.formData, adcd: newAdcd };
|
||||
try {
|
||||
const { data } = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/river/water/list",
|
||||
{ ...this.formData }
|
||||
);
|
||||
if (data.code == 200) {
|
||||
uni.hideLoading();
|
||||
this.list = [...data.data];
|
||||
this.saveList = [...data.data];
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zbyq-box {
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
// max-height: 580px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-btn1 {
|
||||
width: 100px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2 {
|
||||
width: 100px;
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur" >
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 11%;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 32%">
|
||||
站名
|
||||
<th style="width: 31%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 26%;" >
|
||||
实时水位(m)
|
||||
</th>
|
||||
</tr>
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in newList" :key="index">
|
||||
<td style="width: 11%">{{ index + 1 }}</td>
|
||||
<td style="width: 30%;color: #3399ef;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
||||
<td style="width: 32%">{{item.tm}}</td>
|
||||
<td style="width: 25%; position: relative;" >
|
||||
<text :class="{'active1':item.gstate == 1,'active2':item.wstate == 1}">{{ item.z.toFixed(2) }}</text>
|
||||
<text v-if="item.state == 1"
|
||||
style="position: absolute; top: 0px; right: 0; color: #FF7D7D;font-size:18px;">↑</text>
|
||||
<text v-else-if="item.state == 2" style="position: absolute;
|
||||
top:0px;right: 0; color: #32E48E; font-size: 18px;">↓</text>
|
||||
</td>
|
||||
</tr>
|
||||
<div style="height:125px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
newList(){
|
||||
if(this.list.length > 0){
|
||||
let newData = this.list.map(item=>({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
|
||||
return newData
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jumpDetail(params){
|
||||
uni.navigateTo({
|
||||
url:`/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}&sttp=${params.sttp}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 125px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur th {
|
||||
height: 80rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
.active2{
|
||||
color: #f59a23;
|
||||
}
|
||||
.active1{
|
||||
color: #d9001b;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view class="zbyq-box">
|
||||
<view class="search-bar">
|
||||
<u-search
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:showAction="false"
|
||||
placeholder="请输入站点"
|
||||
height="40px"
|
||||
@change="inputChange"
|
||||
v-model="formData.args"
|
||||
></u-search>
|
||||
<image
|
||||
src="../../../static/images/filter.png"
|
||||
style="width: 20px; height: 20px; margin-left: 20px"
|
||||
@click="popupOpen = true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<Table :list="list" :height="height" />
|
||||
</view>
|
||||
<u-popup :show="popupOpen" mode="right" @close="popupOpen = false">
|
||||
<view style="padding: 30px 20px; width: 250px">
|
||||
<text style="font-weight: bold">按类型</text>
|
||||
<view style="margin-bottom: 10px; margin-left: -5px">
|
||||
<u-checkbox-group v-model="formData.sources" @change="checkboxChange">
|
||||
<u-checkbox
|
||||
:customStyle="{ margin: '7px' }"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; position: absolute; bottom: 20px; right: 20px"
|
||||
>
|
||||
<u-button
|
||||
text="重置"
|
||||
class="bottom-btn1"
|
||||
@click="formData = { ...formData, sources }"
|
||||
></u-button>
|
||||
<u-button
|
||||
text="确认"
|
||||
color="#d9001b"
|
||||
class="bottom-btn2"
|
||||
@click="popConfirm"
|
||||
></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Table from "./table.vue";
|
||||
import { disType } from "../../utils/dicType.js";
|
||||
const adcd = uni.getStorageSync("value").adcd;
|
||||
const type = disType(adcd);
|
||||
export default {
|
||||
props: {
|
||||
height: Number,
|
||||
stcd: String,
|
||||
default: "",
|
||||
},
|
||||
components: {
|
||||
Table,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupOpen: false,
|
||||
sources: ["SW", "SK"],
|
||||
checkboxList1: [
|
||||
{
|
||||
name: "水文",
|
||||
value: "SW",
|
||||
},
|
||||
{
|
||||
name: "水库",
|
||||
value: "SK",
|
||||
},
|
||||
],
|
||||
|
||||
formData: {
|
||||
args: "",
|
||||
sources: ["SW", "SK"],
|
||||
// adcd:uni.getStorageSync('value').adcd,
|
||||
},
|
||||
list: [], //搜索结果
|
||||
saveList: [], //保存搜索结果
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
inputChange(e) {
|
||||
console.log("e", e);
|
||||
if (!e) this.list = this.saveList;
|
||||
this.formData = { ...this.formData, value: e };
|
||||
let filterData = this.list.filter((item) => item.stnm.indexOf(e) > -1);
|
||||
this.list = filterData;
|
||||
},
|
||||
checkboxChange(n) {
|
||||
console.log("change", n);
|
||||
this.formData = { ...this.formData, sources: n };
|
||||
},
|
||||
popConfirm() {
|
||||
this.popupOpen = false;
|
||||
this.getList();
|
||||
},
|
||||
async getList() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
const adcd = uni.getStorageSync("value").adcd;
|
||||
let newAdcd = adcd.endsWith("000000000") ? "" : adcd;
|
||||
this.formData = { ...this.formData, adcd: newAdcd };
|
||||
try {
|
||||
const { data } = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/reservoir/water/list",
|
||||
{ ...this.formData }
|
||||
);
|
||||
if (data.code == 200) {
|
||||
uni.hideLoading();
|
||||
this.list = [...data.data];
|
||||
this.saveList = [...data.data];
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zbyq-box {
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
// max-height: 580px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bottom-btn1 {
|
||||
width: 100px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
.bottom-btn2 {
|
||||
width: 100px;
|
||||
margin-right: -12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 11%;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 32%">
|
||||
站名
|
||||
<th style="width: 20%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 37%;" >
|
||||
实时水位(m)
|
||||
</th>
|
||||
<!-- <th style="width: 22%;" >
|
||||
超汛限(m)
|
||||
</th> -->
|
||||
</tr>
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in newList" :key="index">
|
||||
<td style="width: 11%">{{ index + 1 }}</td>
|
||||
<td style="width: 27%;color: #3399ef;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="jumpDetail(item)">{{ item.stnm }}</td>
|
||||
<td style="width: 21%"><text>{{item.tm}}</text></td>
|
||||
<td style="width: 38%; position: relative;" >
|
||||
<text :class="{'active1':item.flState == 1,'active2':item.desState == 1,'active3':item.calState}" style="margin-right:20%">{{ item.rz.toFixed(2) }}</text>
|
||||
<text v-if="item.state == 1"
|
||||
style="position: absolute; top: 0px; right: 33%; color: #FF7D7D;font-size:18px;">↑</text>
|
||||
<text v-else-if="item.state == 2" style="position: absolute;
|
||||
top:0px;right: 33%; color: #32E48E; font-size: 18px;">↓</text>
|
||||
<text style="position: absolute; top: 0px; left: 64%;">（{{item.afsltdz ? item.afsltdz.toFixed(2):'-'}}）</text>
|
||||
</td>
|
||||
<!-- <td style="width: 4%"></td> -->
|
||||
</tr>
|
||||
<div style="height:125px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:0,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
newList(){
|
||||
if(this.list.length > 0){
|
||||
let newData = this.list.map(item=>({...item,tm:moment(item.tm).format("MM-DD HH:mm")}))
|
||||
return newData
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jumpDetail(params){
|
||||
console.log(params);
|
||||
uni.navigateTo({
|
||||
url:`/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}&sttp=${params.sttp}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
padding: 0 10px;
|
||||
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 125px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur th {
|
||||
height: 80rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
.active2{
|
||||
color: #f59a23;
|
||||
}
|
||||
.active1{
|
||||
color: #c4c415;
|
||||
}
|
||||
.active3{
|
||||
color: #d9001b;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<view class="water-box" style="overflow:hidden;height:100vh">
|
||||
<u-status-bar></u-status-bar>
|
||||
<view class="nav-bar">
|
||||
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||
<view class="title">
|
||||
水情
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar" >
|
||||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||||
河道水情
|
||||
</view>
|
||||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
|
||||
水库水情
|
||||
</view>
|
||||
</view>
|
||||
<view class="water-detail-content">
|
||||
<HdWater v-if="activeOne == 0" :height="tableHeight"/>
|
||||
<SkWater v-if="activeOne == 1" :height="tableHeight"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HdWater from "./hdWater/hdWater.vue"
|
||||
import SkWater from "./skWater/skWater.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeOne:0,
|
||||
tableHeight:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
HdWater,
|
||||
SkWater
|
||||
},
|
||||
|
||||
methods: {
|
||||
backTo(){
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
onReady(){
|
||||
let that = this
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
that.tableHeight = res.windowHeight - 220;
|
||||
console.log("that.tableHeight",that.tableHeight);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.water-box{
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
// margin-top: 30px;
|
||||
// padding-top: 40px;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
}
|
||||
.title{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
margin-right: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-bar{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 40px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.rain-detail-content{
|
||||
padding: 10px;
|
||||
}
|
||||
.active{
|
||||
color: #39a6ff;
|
||||
}
|
||||
.rain-detail-content{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,762 @@
|
|||
<template>
|
||||
<view class="u-page">
|
||||
<view v-if="!isMap">
|
||||
<u-navbar
|
||||
title="实时灾情上报"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<view class="info">
|
||||
<view class="u-demo-block__content">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<!-- 工程详情上报 -->
|
||||
<u--form
|
||||
labelPosition="left"
|
||||
:model="formList"
|
||||
ref="form3"
|
||||
labelWidth="150"
|
||||
v-if="key == 3"
|
||||
>
|
||||
<u-form-item
|
||||
label="灾害发生时间"
|
||||
prop="otime"
|
||||
@click="
|
||||
isTime2 = true
|
||||
hideKeyboard()
|
||||
"
|
||||
:borderBottom="false"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.otime"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="严重程度"
|
||||
prop="severity"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
isseverity = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.severity"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- @click="toMap" -->
|
||||
<u-form-item
|
||||
label="灾害发生地点"
|
||||
prop="address"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
isMap = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请输入"
|
||||
v-model="formList.address"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="经度：" :borderBottom="false" ref="item1">
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.lgtd"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="纬度" :borderBottom="false" ref="item1">
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.lttd"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<!-- 水位(m) -->
|
||||
<u-form-item
|
||||
label="灾情描述"
|
||||
prop="ddscrib"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="请输入"
|
||||
v-model="formList.ddscrib"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<!-- 管控责任人： -->
|
||||
<u-form-item label="伤亡人数" prop="dpcount" ref="item3">
|
||||
<u--input
|
||||
v-model="formList.dpcount"
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
clearable
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 出库流量 (m³/s)： -->
|
||||
<u-form-item
|
||||
label="失踪人数"
|
||||
prop="mpcount"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.mpcount"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="转移人数"
|
||||
prop="spcount"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.spcount"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="损毁房屋(间)"
|
||||
prop="chcount"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.chcount"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
@blur="BlurText($event)"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="直接经济损失 (万元)"
|
||||
prop="elose"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.elose"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
@blur="BlurText($event)"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item
|
||||
label="过程降雨量(mm)"
|
||||
prop="pfrain"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.pfrain"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
@blur="BlurText($event)"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 其他运行情况 -->
|
||||
<u-form-item
|
||||
label="其他情况说明"
|
||||
prop="remark"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="请输入"
|
||||
v-model="formList.remark"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="附件"
|
||||
prop="fileList"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
:previewFullImage="true"
|
||||
></u-upload>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
|
||||
<u-button
|
||||
type="primary"
|
||||
text="提交"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
|
||||
<u-datetime-picker
|
||||
:show="isTime2"
|
||||
v-model="valueTime2"
|
||||
mode="datetime"
|
||||
@confirm="confirm2"
|
||||
@cancel="cancel2"
|
||||
></u-datetime-picker>
|
||||
<!-- mode="top" -->
|
||||
<view v-if="isName">
|
||||
<u-popup
|
||||
:show="isName"
|
||||
@close="isName = false"
|
||||
mode="right"
|
||||
@open="open"
|
||||
>
|
||||
<view style="padding: 30px 20px">
|
||||
<view class="tabs_h">
|
||||
<div
|
||||
class="leftTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||||
@click="tabChange(1)"
|
||||
>
|
||||
{{ namelabel }}
|
||||
</div>
|
||||
<div
|
||||
class="rightTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||||
@click="tabChange(2)"
|
||||
>
|
||||
{{ gclabel }}
|
||||
</div>
|
||||
</view>
|
||||
<!-- 水电站和水库 -->
|
||||
<view class="" v-if="isSk">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 1 }"
|
||||
@click="todetail(1, '水库')"
|
||||
>
|
||||
<div class="left">水库</div>
|
||||
<u-icon
|
||||
v-if="activeType == 1"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 2 }"
|
||||
@click="todetail(2, '水电站')"
|
||||
>
|
||||
<div class="left">水电站</div>
|
||||
<u-icon
|
||||
v-if="activeType == 2"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 具体水库或者水电站 -->
|
||||
<view v-else style="height: 300px; overflow-y: auto">
|
||||
<div v-for="(item, index) in resList" :key="index">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: item.isShow }"
|
||||
@click="infoClick(item)"
|
||||
>
|
||||
<div class="left">{{ item.resName }}</div>
|
||||
<u-icon
|
||||
v-if="item.isShow"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!-- 严重程度 -->
|
||||
<u-action-sheet
|
||||
:show="isseverity"
|
||||
:actions="severityList"
|
||||
title="请选择"
|
||||
@close="isseverity = false"
|
||||
@select="severitySelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
</view> </view
|
||||
></view>
|
||||
<view v-if="isMap">
|
||||
<newmap v-if="isMap" @back="back" @navBack="navBack"></newmap>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import newmap from './map.vue'
|
||||
const adcd = uni.getStorageSync('value').adcd
|
||||
export default {
|
||||
name: 'dsfrom',
|
||||
components: {
|
||||
newmap
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isMap: false,
|
||||
adcd,
|
||||
showTextTypeTab: 1,
|
||||
activeType: '',
|
||||
valueTime2: Number(moment()),
|
||||
isSk: true,
|
||||
isTime2: false,
|
||||
resList: [],
|
||||
key: '',
|
||||
title: {
|
||||
1: '运行情况上报',
|
||||
2: '工程险情上报',
|
||||
3: '实时灾情上报'
|
||||
},
|
||||
namelabel: '请选择',
|
||||
gclabel: '工程',
|
||||
fileList1: [],
|
||||
disabled1: false,
|
||||
tips: '',
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
showBirthday: false,
|
||||
formList: {
|
||||
otime: '',
|
||||
severity: '', // 严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情）
|
||||
address: '',
|
||||
lgtd: '',
|
||||
lttd: '',
|
||||
ddscrib: '',
|
||||
dpcount: '',
|
||||
mpcount: '',
|
||||
chcount: '',
|
||||
spcount: '',
|
||||
elose: '',
|
||||
remark: ''
|
||||
},
|
||||
|
||||
fileIds: [],
|
||||
isControlled: false,
|
||||
isseverity: false, // 严重程度
|
||||
showSex: false,
|
||||
isRelease: false,
|
||||
isName: false,
|
||||
|
||||
severityList: [
|
||||
{
|
||||
name: '一般险情'
|
||||
},
|
||||
{
|
||||
name: '较大险情'
|
||||
},
|
||||
{
|
||||
name: '重大险情'
|
||||
},
|
||||
{
|
||||
name: '特别重大险情'
|
||||
}
|
||||
],
|
||||
|
||||
actions: [
|
||||
{
|
||||
name: '是'
|
||||
},
|
||||
{
|
||||
name: '否'
|
||||
}
|
||||
],
|
||||
rules2: {
|
||||
otime: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择时间',
|
||||
trigger: ['change']
|
||||
}
|
||||
]
|
||||
// severity: [
|
||||
// {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请选择严重程度',
|
||||
// trigger: ['blur', 'change']
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
projectType: 1
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
this.key = options.key
|
||||
console.log('搜索框22', options.key)
|
||||
console.log('adcd', this.adcd)
|
||||
|
||||
this.getresList()
|
||||
},
|
||||
onReady () {
|
||||
console.log('搜索框22key', this.key)
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form3.setRules(this.rules2)
|
||||
this.$refs.form3.setRules(this.rules2)
|
||||
},
|
||||
methods: {
|
||||
navBack () {
|
||||
this.isMap = false
|
||||
},
|
||||
back (lnglat, address) {
|
||||
console.log('搜索框22key', lnglat, address)
|
||||
this.isMap = false
|
||||
this.formList.lgtd = lnglat[0]
|
||||
this.formList.lttd = lnglat[1]
|
||||
this.formList.address = address
|
||||
// this.$refs.form3.validateField('address')
|
||||
|
||||
console.log('搜索框22key', lnglat, this.formList.address)
|
||||
},
|
||||
toMap () {
|
||||
this.isMap = true
|
||||
},
|
||||
async getresList () {
|
||||
let res = null
|
||||
this.resList = []
|
||||
res = await uni.$http.get('/gunshiApp/xfflood/webi/resList')
|
||||
this.resList = res.data.data.map(item => {
|
||||
item.isShow = false
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
async gethystList () {
|
||||
this.resList = []
|
||||
let res = await uni.$http.get('/gunshiApp/xfflood/webi/hystList')
|
||||
console.log('res', res.data.data)
|
||||
this.resList = res.data.data.map(item => {
|
||||
item.isShow = false
|
||||
item.resName = item.hystName
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
tabChange (val) {
|
||||
this.showTextTypeTab = val
|
||||
if (val == 1) {
|
||||
this.isSk = true
|
||||
} else {
|
||||
this.isSk = false
|
||||
}
|
||||
},
|
||||
todetail (val, title) {
|
||||
this.activeType = val
|
||||
this.showTextTypeTab = 2
|
||||
this.isSk = false
|
||||
this.namelabel = title
|
||||
this.projectType = val
|
||||
if (val == 1) {
|
||||
this.getresList()
|
||||
} else {
|
||||
this.gethystList()
|
||||
}
|
||||
},
|
||||
infoClick (obj) {
|
||||
if (this.activeType == 1) {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.resCode == obj.resCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.formList.projectName = item.resName
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.hystCode == obj.hystCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.formList.projectName = item.resName
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
deletePic (event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead (event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map(item => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(
|
||||
fileListLen,
|
||||
1,
|
||||
Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
})
|
||||
)
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: `${uni.$http.baseUrl}/gunshiApp/xfflood/iaCHsfwater/file/upload/singleSimple`,
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
success: res => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
open () {},
|
||||
|
||||
navigateBack () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/xxsb/index'
|
||||
})
|
||||
},
|
||||
|
||||
severitySelect (e) {
|
||||
console.log('severitySelect0', e)
|
||||
this.formList.severity = e.name
|
||||
this.$refs.form3.validateField('severity')
|
||||
},
|
||||
|
||||
submit () {
|
||||
if (this.formList.address == '') {
|
||||
uni.$u.toast('请选择灾害发生地点')
|
||||
return
|
||||
}
|
||||
if (this.formList.severity == '') {
|
||||
uni.$u.toast('请选择严重程度')
|
||||
return
|
||||
}
|
||||
if (this.formList.otime == '') {
|
||||
uni.$u.toast('请选择灾害发生时间')
|
||||
return
|
||||
}
|
||||
// this.$refs.form3
|
||||
// .validate()
|
||||
// .then(res => {
|
||||
let params = Object.assign(this.formList)
|
||||
// 严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情
|
||||
if (this.formList.severity == '一般险情') {
|
||||
params.severity = 1
|
||||
} else if (this.formList.severity == '较大险情') {
|
||||
params.severity = 2
|
||||
} else if (this.formList.severity == '重大险情') {
|
||||
params.severity = 3
|
||||
} else if (this.formList.severity == '特别重大险情') {
|
||||
params.severity = 4
|
||||
}
|
||||
// params.adcd = ''
|
||||
|
||||
if (this.fileList1.length > 0) {
|
||||
params.fileIds = this.fileList1.map(item => {
|
||||
return JSON.parse(item.url).data.fileId
|
||||
})
|
||||
} else {
|
||||
params.fileIds = []
|
||||
}
|
||||
console.log('this.---can', params)
|
||||
uni.$http
|
||||
.post('/gunshiApp/xfflood/iaCHsfwater/insert', params)
|
||||
.then(res => {
|
||||
console.log('this.---', res)
|
||||
if (res.data.code == 200) {
|
||||
console.log('this.model122', res.data)
|
||||
uni.reLaunch({
|
||||
url: '/pages/xxsb/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
// })
|
||||
// .catch(errors => {
|
||||
// uni.$u.toast('校验失败', errors)
|
||||
// console.log('校验失败')
|
||||
// })
|
||||
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
},
|
||||
reset () {
|
||||
const validateList = ['otime', 'severity']
|
||||
this.$refs.form3.resetFields()
|
||||
this.$refs.form3.clearValidate()
|
||||
setTimeout(() => {
|
||||
this.$refs.form3.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.form1.clearValidate()
|
||||
}, 10)
|
||||
},
|
||||
hideKeyboard () {
|
||||
uni.hideKeyboard()
|
||||
},
|
||||
confirm2 (val) {
|
||||
console.log(
|
||||
'点击确定按钮时触发',
|
||||
val.value,
|
||||
moment(val.value).format('YYYY-MM-DD HH:mm:ss')
|
||||
)
|
||||
|
||||
this.valueTime2 = Number(val)
|
||||
this.formList.otime = moment(val.value).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.isTime2 = false
|
||||
this.$refs.form3.validateField('otime')
|
||||
},
|
||||
cancel2 () {
|
||||
console.log('取消')
|
||||
this.isTime2 = false
|
||||
},
|
||||
|
||||
// 过滤字符串
|
||||
BlurText (e) {
|
||||
console.log('e', e)
|
||||
let reg = /^\d+$/.test(e)
|
||||
if (!reg) {
|
||||
// this.
|
||||
console.log('22e', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.tabs_h {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
height: 56rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.leftTab {
|
||||
// width: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.rightTab {
|
||||
// width: 80px;
|
||||
}
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
.activeTypeClass,
|
||||
.activeTypeClass:hover {
|
||||
color: #026be0;
|
||||
}
|
||||
|
||||
.nav_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: left;
|
||||
}
|
||||
.flsb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
width: 100%; /* 或者其他尺寸 */
|
||||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||||
}
|
||||
.ul_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
// border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,682 @@
|
|||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
:title="title[key]"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<view class="info">
|
||||
<view class="u-demo-block__content">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form
|
||||
labelPosition="left"
|
||||
:model="model1"
|
||||
ref="form1"
|
||||
labelWidth="120"
|
||||
v-if="key == 1"
|
||||
>
|
||||
<u-form-item
|
||||
label="工程名称"
|
||||
prop="projectName"
|
||||
@click="
|
||||
isName = true
|
||||
hideKeyboard()
|
||||
"
|
||||
:borderBottom="false"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="model1.projectName"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="是否发电"
|
||||
prop="isPowerGeneration"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
showSex = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="model1.isPowerGeneration"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="是否泄洪"
|
||||
prop="isFloodRelease"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
isRelease = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="model1.isFloodRelease"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 水位(m) -->
|
||||
<u-form-item
|
||||
label="水位(m)"
|
||||
prop="waterLevel"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.waterLevel"
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
type="number"
|
||||
clearable
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 入库流量(m³/s)： -->
|
||||
<u-form-item label="入库流量(m³/s)" prop="inflowVolume" ref="item3">
|
||||
<u--input
|
||||
v-model="model1.inflowVolume"
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
type="number"
|
||||
clearable
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 出库流量 (m³/s)： -->
|
||||
<u-form-item
|
||||
label="出库流量(m³/s)"
|
||||
prop="outflowVolume"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.outflowVolume"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
@blur="BlurText($event)"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 其他运行情况 -->
|
||||
<u-form-item
|
||||
label="其他运行情况"
|
||||
prop="remark"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="请输入"
|
||||
v-model="model1.remark"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="附件"
|
||||
prop="fileList"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
:previewFullImage="true"
|
||||
></u-upload>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
|
||||
<u-button
|
||||
type="primary"
|
||||
text="提交"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
<!-- isRelease -->
|
||||
<u-action-sheet
|
||||
:show="isRelease"
|
||||
:actions="actions"
|
||||
title="请选择"
|
||||
@close="isRelease = false"
|
||||
@select="releaseSelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<!-- showSex -->
|
||||
<u-action-sheet
|
||||
:show="showSex"
|
||||
:actions="actions"
|
||||
title="请选择"
|
||||
@close="showSex = false"
|
||||
@select="sexSelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<!-- mode="top" -->
|
||||
<view v-if="isName">
|
||||
<u-popup
|
||||
:show="isName"
|
||||
@close="isName = false"
|
||||
mode="bottom"
|
||||
@open="open"
|
||||
>
|
||||
<view style="padding: 30px 20px">
|
||||
<view class="tabs_h">
|
||||
<div
|
||||
class="leftTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||||
@click="tabChange(1)"
|
||||
>
|
||||
{{ namelabel }}
|
||||
</div>
|
||||
<div
|
||||
class="rightTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||||
@click="tabChange(2)"
|
||||
>
|
||||
{{ gclabel }}
|
||||
</div>
|
||||
</view>
|
||||
<!-- 水电站和水库 -->
|
||||
<view class="" v-if="isSk">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 1 }"
|
||||
@click="todetail(1, '水库')"
|
||||
>
|
||||
<div class="left">水库</div>
|
||||
<u-icon
|
||||
v-if="activeType == 1"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 2 }"
|
||||
@click="todetail(2, '水电站')"
|
||||
>
|
||||
<div class="left">水电站</div>
|
||||
<u-icon
|
||||
v-if="activeType == 2"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 具体水库或者水电站 -->
|
||||
<view v-else style="height: 300px; overflow-y: auto">
|
||||
<div v-for="(item, index) in resList" :key="index">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: item.isShow }"
|
||||
@click="infoClick(item)"
|
||||
>
|
||||
<div class="left">{{ item.resName }}</div>
|
||||
<u-icon
|
||||
v-if="item.isShow"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!-- 严重程度 -->
|
||||
<u-action-sheet
|
||||
:show="isseverity"
|
||||
:actions="severityList"
|
||||
title="请选择"
|
||||
@close="isseverity = false"
|
||||
@select="severitySelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
|
||||
<!-- 是否已管控 -->
|
||||
<u-action-sheet
|
||||
:show="isControlled"
|
||||
:actions="actions"
|
||||
title="请选择"
|
||||
@close="isControlled = false"
|
||||
@select="controlledSelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { adnmZhen } from '../utils/tool'
|
||||
import { disType } from '../utils/dicType.js'
|
||||
const adcd = uni.getStorageSync('value').adcd
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
showTextTypeTab: 1,
|
||||
activeType: '',
|
||||
isSk: true,
|
||||
resList: [],
|
||||
key: '',
|
||||
adcd,
|
||||
title: {
|
||||
1: '运行情况上报',
|
||||
2: '工程险情上报',
|
||||
3: '实时灾情上报'
|
||||
},
|
||||
namelabel: '请选择',
|
||||
gclabel: '工程',
|
||||
fileList1: [],
|
||||
disabled1: false,
|
||||
tips: '',
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
showBirthday: false,
|
||||
formList: {
|
||||
projectName: '', //工程名称
|
||||
projectType: '', //工程类型
|
||||
severity: '', // 严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情）
|
||||
isControlled: '', // 是否已管控（0 否 1 是）
|
||||
incidentDescription: '',
|
||||
controlResponsiblePerson: '', // 管控责任人
|
||||
responsiblePersonPhone: '' //责任人电话
|
||||
},
|
||||
model1: {
|
||||
projectName: '',
|
||||
isPowerGeneration: '',
|
||||
isFloodRelease: '',
|
||||
waterLevel: '',
|
||||
inflowVolume: '',
|
||||
outflowVolume: '',
|
||||
remark: ''
|
||||
},
|
||||
fileIds: [],
|
||||
isControlled: false,
|
||||
isseverity: false, // 严重程度
|
||||
showSex: false,
|
||||
isRelease: false,
|
||||
isName: false,
|
||||
|
||||
severityList: [
|
||||
{
|
||||
name: '一般险情'
|
||||
},
|
||||
{
|
||||
name: '较大险情'
|
||||
},
|
||||
{
|
||||
name: '重大险情'
|
||||
},
|
||||
{
|
||||
name: '特别重大险情'
|
||||
}
|
||||
],
|
||||
|
||||
actions: [
|
||||
{
|
||||
name: '是'
|
||||
},
|
||||
{
|
||||
name: '否'
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
projectName: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择工程名称',
|
||||
trigger: ['change']
|
||||
}
|
||||
]
|
||||
},
|
||||
projectType: 1
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
this.key = options.key
|
||||
console.log('搜索框22', options.key)
|
||||
|
||||
this.getresList()
|
||||
},
|
||||
onReady () {
|
||||
console.log('搜索框22key', this.key)
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form1.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
async getresList () {
|
||||
let res = null
|
||||
this.resList = []
|
||||
res = await uni.$http.get('/gunshiApp/xfflood/webi/resList')
|
||||
// console.log('res', adcd.endsWith('000000000'))
|
||||
console.log('res---', this.adcd)
|
||||
let list = res.data.data.filter(item => {
|
||||
if (this.adcd.endsWith('000000000')) {
|
||||
return item
|
||||
} else {
|
||||
return item.adcd == this.adcd
|
||||
}
|
||||
})
|
||||
|
||||
console.log('listlist---', list)
|
||||
this.resList = list.map(item => {
|
||||
item.isShow = false
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
async gethystList () {
|
||||
this.resList = []
|
||||
let res = await uni.$http.get('/gunshiApp/xfflood/webi/hystList')
|
||||
let list = res.data.data.filter(item => {
|
||||
if (this.adcd.endsWith('000000000')) {
|
||||
return item
|
||||
} else {
|
||||
return item.adcd == this.adcd
|
||||
}
|
||||
})
|
||||
this.resList = list.map(item => {
|
||||
item.isShow = false
|
||||
item.resName = item.hystName
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
tabChange (val) {
|
||||
this.showTextTypeTab = val
|
||||
if (val == 1) {
|
||||
this.isSk = true
|
||||
} else {
|
||||
this.isSk = false
|
||||
}
|
||||
},
|
||||
todetail (val, title) {
|
||||
this.activeType = val
|
||||
this.showTextTypeTab = 2
|
||||
this.isSk = false
|
||||
this.namelabel = title
|
||||
this.projectType = val
|
||||
if (val == 1) {
|
||||
this.getresList()
|
||||
} else {
|
||||
this.gethystList()
|
||||
}
|
||||
},
|
||||
infoClick (obj) {
|
||||
if (this.activeType == 1) {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.resCode == obj.resCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.model1.projectName = item.resName
|
||||
this.$refs.form1.validateField('isPowerGeneration')
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.hystCode == obj.hystCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.model1.projectName = item.resName
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
deletePic (event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead (event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map(item => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
console.log('result', JSON.parse(result))
|
||||
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(
|
||||
fileListLen,
|
||||
1,
|
||||
Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
})
|
||||
)
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: `${uni.$http.baseUrl}/gunshiApp/xfflood/xfProjectRun/file/upload/singleSimple`,
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
success: res => {
|
||||
console.log('res888', JSON.parse(res.data))
|
||||
setTimeout(() => {
|
||||
resolve(res.data)
|
||||
this.fileId = JSON.parse(res.data).data.fileId
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
open () {},
|
||||
navigateBack () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/xxsb/index'
|
||||
})
|
||||
},
|
||||
// 是否发电
|
||||
sexSelect (e) {
|
||||
this.model1.isPowerGeneration = e.name
|
||||
this.$refs.form1.validateField('isPowerGeneration')
|
||||
},
|
||||
// 是否泄洪
|
||||
releaseSelect (e) {
|
||||
this.model1.isFloodRelease = e.name
|
||||
this.$refs.form1.validateField('isFloodRelease')
|
||||
},
|
||||
|
||||
severitySelect (e) {
|
||||
console.log('severitySelect0', e)
|
||||
this.formList.severity = e.name
|
||||
this.$refs.form2.validateField('severity')
|
||||
},
|
||||
controlledSelect (e) {
|
||||
this.formList.isControlled = e.name
|
||||
this.$refs.form2.validateField('isControlled')
|
||||
},
|
||||
|
||||
submit () {
|
||||
this.$refs.form1
|
||||
.validate()
|
||||
.then(res => {
|
||||
console.log('文件', this.fileId)
|
||||
|
||||
let params = this.model1
|
||||
|
||||
params.projectType = this.projectType
|
||||
params.isPowerGeneration = params.isPowerGeneration == '是' ? 1 : 0
|
||||
params.isFloodRelease = params.isFloodRelease == '是' ? 1 : 0
|
||||
|
||||
if (this.fileList1.length > 0) {
|
||||
params.fileIds = this.fileList1.map(item => {
|
||||
return JSON.parse(item.url).data.fileId
|
||||
})
|
||||
} else {
|
||||
params.fileIds = []
|
||||
}
|
||||
console.log('参数', params)
|
||||
uni.$http
|
||||
.post('/gunshiApp/xfflood/xfProjectRun/insert', params)
|
||||
.then(res => {
|
||||
console.log('this.model1---', res)
|
||||
if (res.data.code == 200) {
|
||||
console.log('this.model122', res.data)
|
||||
uni.navigateTo({
|
||||
url: `./index`
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
// this.model1.isPowerGeneration =
|
||||
// params.isPowerGeneration == 1 ? '是' : '否'
|
||||
// this.model1.isFloodRelease =
|
||||
// params.isPowerGeneration == 1 ? '是' : '否'
|
||||
})
|
||||
})
|
||||
.catch(errors => {
|
||||
uni.$u.toast('校验失败', errors)
|
||||
})
|
||||
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
},
|
||||
reset () {
|
||||
const validateList = ['projectName', 'isPowerGeneration', 'radiovalue1']
|
||||
this.$refs.form1.resetFields()
|
||||
this.$refs.form1.clearValidate()
|
||||
setTimeout(() => {
|
||||
this.$refs.form1.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.form1.clearValidate()
|
||||
}, 10)
|
||||
},
|
||||
hideKeyboard () {
|
||||
uni.hideKeyboard()
|
||||
},
|
||||
// 过滤字符串
|
||||
BlurText (e) {
|
||||
console.log('e', e)
|
||||
let reg = /^\d+$/.test(e)
|
||||
if (!reg) {
|
||||
// this.
|
||||
console.log('22e', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.tabs_h {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
height: 56rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.leftTab {
|
||||
// width: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.rightTab {
|
||||
// width: 80px;
|
||||
}
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
.activeTypeClass,
|
||||
.activeTypeClass:hover {
|
||||
color: #026be0;
|
||||
}
|
||||
|
||||
.nav_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: left;
|
||||
}
|
||||
.flsb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
width: 100%; /* 或者其他尺寸 */
|
||||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||||
}
|
||||
.ul_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
// border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,656 @@
|
|||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
:title="title[key]"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<view class="info">
|
||||
<view class="u-demo-block__content">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<!-- 工程详情上报 -->
|
||||
<u--form
|
||||
labelPosition="left"
|
||||
:model="formList"
|
||||
ref="form2"
|
||||
labelWidth="100"
|
||||
>
|
||||
<u-form-item
|
||||
label="工程名称"
|
||||
prop="projectName"
|
||||
@click="
|
||||
isName = true
|
||||
hideKeyboard()
|
||||
"
|
||||
:borderBottom="false"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.projectName"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="严重程度"
|
||||
prop="severity"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
isseverity = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.severity"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="是否已管控"
|
||||
prop="isControlled"
|
||||
:borderBottom="false"
|
||||
@click="
|
||||
isControlled = true
|
||||
hideKeyboard()
|
||||
"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
placeholder="请选择"
|
||||
v-model="formList.isControlled"
|
||||
suffixIcon="arrow-right"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 水位(m) -->
|
||||
<u-form-item
|
||||
label="险情描述"
|
||||
prop="incidentDescription"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="请输入"
|
||||
v-model="formList.incidentDescription"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<!-- 管控责任人： -->
|
||||
<u-form-item
|
||||
label="管控责任人"
|
||||
prop="controlResponsiblePerson"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.controlResponsiblePerson"
|
||||
placeholder="请输入"
|
||||
border="surround"
|
||||
clearable
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 出库流量 (m³/s)： -->
|
||||
<u-form-item
|
||||
label="联系电话"
|
||||
prop="responsiblePersonPhone"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--input
|
||||
v-model="formList.responsiblePersonPhone"
|
||||
placeholder="请输入"
|
||||
type="number"
|
||||
clearable
|
||||
border="surround"
|
||||
@blur="BlurText($event)"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<!-- 其他运行情况 -->
|
||||
<u-form-item
|
||||
label="其他情况说明"
|
||||
prop="remark"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="请输入"
|
||||
v-model="formList.remark"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="附件"
|
||||
prop="fileList"
|
||||
:borderBottom="false"
|
||||
ref="item3"
|
||||
>
|
||||
<u-upload
|
||||
:fileList="fileList1"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="1"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
:previewFullImage="true"
|
||||
></u-upload>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
|
||||
<u-button
|
||||
type="primary"
|
||||
text="提交"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
|
||||
<!-- mode="top" -->
|
||||
<view v-if="isName">
|
||||
<u-popup
|
||||
:show="isName"
|
||||
@close="isName = false"
|
||||
mode="bottom"
|
||||
@open="open"
|
||||
>
|
||||
<view style="padding: 30px 20px">
|
||||
<view class="tabs_h">
|
||||
<div
|
||||
class="leftTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||||
@click="tabChange(1)"
|
||||
>
|
||||
{{ namelabel }}
|
||||
</div>
|
||||
<div
|
||||
class="rightTab"
|
||||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||||
@click="tabChange(2)"
|
||||
>
|
||||
{{ gclabel }}
|
||||
</div>
|
||||
</view>
|
||||
<!-- 水电站和水库 -->
|
||||
<view class="" v-if="isSk">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 1 }"
|
||||
@click="todetail(1, '水库')"
|
||||
>
|
||||
<div class="left">水库</div>
|
||||
<u-icon
|
||||
v-if="activeType == 1"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: activeType == 2 }"
|
||||
@click="todetail(2, '水电站')"
|
||||
>
|
||||
<div class="left">水电站</div>
|
||||
<u-icon
|
||||
v-if="activeType == 2"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 具体水库或者水电站 -->
|
||||
<view v-else style="height: 300px; overflow-y: auto">
|
||||
<div v-for="(item, index) in resList" :key="index">
|
||||
<div
|
||||
class="ul_list"
|
||||
:class="{ activeTypeClass: item.isShow }"
|
||||
@click="infoClick(item)"
|
||||
>
|
||||
<div class="left">{{ item.resName }}</div>
|
||||
<u-icon
|
||||
v-if="item.isShow"
|
||||
name="checkmark"
|
||||
color="#2286f6"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
<!-- 严重程度 -->
|
||||
<u-action-sheet
|
||||
:show="isseverity"
|
||||
:actions="severityList"
|
||||
title="请选择"
|
||||
@close="isseverity = false"
|
||||
@select="severitySelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
|
||||
<!-- 是否已管控 -->
|
||||
<u-action-sheet
|
||||
:show="isControlled"
|
||||
:actions="actions"
|
||||
title="请选择"
|
||||
@close="isControlled = false"
|
||||
@select="controlledSelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const adcd = uni.getStorageSync('value').adcd
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
adcd,
|
||||
showTextTypeTab: 1,
|
||||
activeType: '',
|
||||
isSk: true,
|
||||
resList: [],
|
||||
key: '',
|
||||
title: {
|
||||
1: '运行情况上报',
|
||||
2: '工程险情上报',
|
||||
3: '实时灾情上报'
|
||||
},
|
||||
namelabel: '请选择',
|
||||
gclabel: '工程',
|
||||
fileList1: [],
|
||||
disabled1: false,
|
||||
tips: '',
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
showBirthday: false,
|
||||
formList: {
|
||||
projectName: '', //工程名称
|
||||
projectType: '', //工程类型
|
||||
severity: '', // 严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情）
|
||||
isControlled: '', // 是否已管控（0 否 1 是）
|
||||
incidentDescription: '',
|
||||
controlResponsiblePerson: '', // 管控责任人
|
||||
responsiblePersonPhone: '', //责任人电话
|
||||
remark: ''
|
||||
},
|
||||
|
||||
isControlled: false,
|
||||
isseverity: false, // 严重程度
|
||||
showSex: false,
|
||||
isRelease: false,
|
||||
isName: false,
|
||||
|
||||
severityList: [
|
||||
{
|
||||
name: '一般险情'
|
||||
},
|
||||
{
|
||||
name: '较大险情'
|
||||
},
|
||||
{
|
||||
name: '重大险情'
|
||||
},
|
||||
{
|
||||
name: '特别重大险情'
|
||||
}
|
||||
],
|
||||
|
||||
actions: [
|
||||
{
|
||||
name: '是'
|
||||
},
|
||||
{
|
||||
name: '否'
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
projectName: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择工程名称',
|
||||
trigger: ['change']
|
||||
}
|
||||
],
|
||||
severity: [
|
||||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择严重程度',
|
||||
trigger: ['change']
|
||||
}
|
||||
]
|
||||
},
|
||||
projectType: 1,
|
||||
fileId: []
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
this.key = options.key
|
||||
console.log('搜索框22', options.key)
|
||||
|
||||
this.getresList()
|
||||
},
|
||||
onReady () {
|
||||
console.log('搜索框22key', this.key)
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form2.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
async getresList () {
|
||||
let res = null
|
||||
this.resList = []
|
||||
res = await uni.$http.get('/gunshiApp/xfflood/webi/resList')
|
||||
let list = res.data.data.filter(item => {
|
||||
if (this.adcd.endsWith('000000000')) {
|
||||
return item
|
||||
} else {
|
||||
return item.adcd == this.adcd
|
||||
}
|
||||
})
|
||||
this.resList = list.map(item => {
|
||||
item.isShow = false
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
async gethystList () {
|
||||
this.resList = []
|
||||
let res = await uni.$http.get('/gunshiApp/xfflood/webi/hystList')
|
||||
let list = res.data.data.filter(item => {
|
||||
if (this.adcd.endsWith('000000000')) {
|
||||
return item
|
||||
} else {
|
||||
return item.adcd == this.adcd
|
||||
}
|
||||
})
|
||||
console.log('res', res.data.data)
|
||||
this.resList = list.map(item => {
|
||||
item.isShow = false
|
||||
item.resName = item.hystName
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
tabChange (val) {
|
||||
this.showTextTypeTab = val
|
||||
if (val == 1) {
|
||||
this.isSk = true
|
||||
} else {
|
||||
this.isSk = false
|
||||
}
|
||||
},
|
||||
todetail (val, title) {
|
||||
this.activeType = val
|
||||
this.showTextTypeTab = 2
|
||||
this.isSk = false
|
||||
this.namelabel = title
|
||||
this.projectType = val
|
||||
if (val == 1) {
|
||||
this.getresList()
|
||||
} else {
|
||||
this.gethystList()
|
||||
}
|
||||
},
|
||||
infoClick (obj) {
|
||||
if (this.activeType == 1) {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.resCode == obj.resCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.formList.projectName = item.resName
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.resList = this.resList.map(item => {
|
||||
if (item.hystCode == obj.hystCode) {
|
||||
item.isShow = true
|
||||
this.gclabel = item.resName
|
||||
this.formList.projectName = item.resName
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
deletePic (event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead (event) {
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map(item => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(
|
||||
fileListLen,
|
||||
1,
|
||||
Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
})
|
||||
)
|
||||
fileListLen++
|
||||
}
|
||||
|
||||
console.log('fileList1111', this.fileList1)
|
||||
},
|
||||
uploadFilePromise (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: `${uni.$http.baseUrl}/gunshiApp/xfflood/xfProjectIncident/file/upload/singleSimple`,
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
success: res => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
open () {},
|
||||
groupChange (n) {
|
||||
// console.log('groupChange', n);
|
||||
},
|
||||
radioChange (n) {
|
||||
// console.log('radioChange', n);
|
||||
},
|
||||
navigateBack () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/xxsb/index'
|
||||
})
|
||||
},
|
||||
|
||||
severitySelect (e) {
|
||||
console.log('severitySelect0', e)
|
||||
this.formList.severity = e.name
|
||||
this.$refs.form2.validateField('severity')
|
||||
},
|
||||
controlledSelect (e) {
|
||||
this.formList.isControlled = e.name
|
||||
this.$refs.form2.validateField('isControlled')
|
||||
},
|
||||
|
||||
submit () {
|
||||
this.$refs.form2
|
||||
.validate()
|
||||
.then(res => {
|
||||
uni.$u.toast('校验通过', res)
|
||||
let params = Object.assign(this.formList)
|
||||
|
||||
// 严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情
|
||||
if (this.formList.severity == '一般险情') {
|
||||
params.severity = 1
|
||||
} else if (this.formList.severity == '较大险情') {
|
||||
params.severity = 2
|
||||
} else if (this.formList.severity == '重大险情') {
|
||||
params.severity = 3
|
||||
} else if (this.formList.severity == '特别重大险情') {
|
||||
params.severity = 4
|
||||
}
|
||||
|
||||
params.projectType = this.projectType
|
||||
params.isControlled = params.isControlled == '是' ? 1 : 0
|
||||
if (this.fileList1.length > 0) {
|
||||
params.fileIds = this.fileList1.map(item => {
|
||||
return JSON.parse(item.url).data.fileId
|
||||
})
|
||||
} else {
|
||||
params.fileIds = []
|
||||
}
|
||||
|
||||
uni.$http
|
||||
.post('/gunshiApp/xfflood/xfProjectIncident/insert', params)
|
||||
.then(res => {
|
||||
console.log('this.---', res)
|
||||
if (res.data.code == 200) {
|
||||
console.log('this.model122', res.data)
|
||||
uni.reLaunch({
|
||||
url: '/pages/xxsb/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(errors => {
|
||||
uni.$u.toast('校验失败', errors)
|
||||
})
|
||||
},
|
||||
reset () {
|
||||
const validateList = ['projectName', 'radiovalue1']
|
||||
this.$refs.form1.resetFields()
|
||||
this.$refs.form1.clearValidate()
|
||||
setTimeout(() => {
|
||||
this.$refs.form1.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.form1.clearValidate()
|
||||
}, 10)
|
||||
},
|
||||
hideKeyboard () {
|
||||
uni.hideKeyboard()
|
||||
},
|
||||
// 过滤字符串
|
||||
BlurText (e) {
|
||||
console.log('e', e)
|
||||
let reg = /^\d+$/.test(e)
|
||||
if (!reg) {
|
||||
// this.
|
||||
console.log('22e', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.tabs_h {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
height: 56rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.leftTab {
|
||||
// width: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.rightTab {
|
||||
// width: 80px;
|
||||
}
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
.activeTypeClass,
|
||||
.activeTypeClass:hover {
|
||||
color: #026be0;
|
||||
}
|
||||
|
||||
.nav_bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fl {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: left;
|
||||
}
|
||||
.flsb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-image {
|
||||
width: 100%; /* 或者其他尺寸 */
|
||||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||||
}
|
||||
.ul_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
// border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
title="信息上报"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
|
||||
<view class="info">
|
||||
<div class="ul_list" @click="todetail(1)">
|
||||
<div class="left">运行情况上报</div>
|
||||
<u-icon name="arrow-right" size="20"></u-icon>
|
||||
</div>
|
||||
<div class="ul_list" @click="todetail(2)">
|
||||
<div class="left">工程险情上报</div>
|
||||
<u-icon name="arrow-right" size="20"></u-icon>
|
||||
</div>
|
||||
<div class="ul_list" @click="todetail(3)">
|
||||
<div class="left">实时灾情上报</div>
|
||||
<u-icon name="arrow-right" size="20"></u-icon>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
onLoad () {},
|
||||
methods: {
|
||||
navigateBack () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/homeIndex/index'
|
||||
})
|
||||
},
|
||||
todetail (val) {
|
||||
console.log('val', val)
|
||||
if (val == 2) {
|
||||
uni.navigateTo({
|
||||
url: `./fromSeverity?key=${val}`
|
||||
})
|
||||
} else if (val == 1) {
|
||||
uni.navigateTo({
|
||||
url: `./from?key=${val}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `./dsfrom?key=${val}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
font-size: 14px;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
.nav_bar {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nav_bar_tit {
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.ul_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar
|
||||
title="灾害发生地点"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<view class="page-section page-section-gap">
|
||||
<map
|
||||
style="width: 100%; height: 300px; flex: 1"
|
||||
id="container"
|
||||
:latitude="lnglat[1]"
|
||||
:longitude="lnglat[0]"
|
||||
enable-scroll
|
||||
enable-rotate
|
||||
></map>
|
||||
</view>
|
||||
|
||||
<view class="text">
|
||||
<text class="tit">当前位置</text>
|
||||
<view id="adds">{{ address }}</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<p class="tit">经/纬度</p>
|
||||
|
||||
<view
|
||||
><span id="lng">{{ lnglat[0] }}， {{ lnglat[1] }}</span></view
|
||||
>
|
||||
</view>
|
||||
<u-button
|
||||
:disabled="!address"
|
||||
type="primary"
|
||||
text="确定"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="backclick"
|
||||
></u-button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
export default {
|
||||
name: 'map-view',
|
||||
data () {
|
||||
return {
|
||||
lnglat: [109.139726, 29.665203],
|
||||
geocoder: null,
|
||||
marker: null,
|
||||
geocoder: null,
|
||||
address: null,
|
||||
markers: [
|
||||
{
|
||||
latitude: 29.665203,
|
||||
longitude: 109.139726,
|
||||
iconPath: '../../static/tabs/add.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
uni.showLoading({ title: '加载中...', mask: true })
|
||||
this.initAMap()
|
||||
},
|
||||
onShow () {},
|
||||
onLoad () {},
|
||||
methods: {
|
||||
navigateBack () {
|
||||
this.$emit('navBack', false)
|
||||
},
|
||||
backclick () {
|
||||
this.$emit('back', this.lnglat, this.address)
|
||||
},
|
||||
mapClick (val) {
|
||||
console.log('val', val)
|
||||
},
|
||||
initAMap () {
|
||||
const self = this
|
||||
console.log('erreee', 'wgs84', 'gcj02')
|
||||
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
isHighAccuracy: 'true',
|
||||
geocode: 'true',
|
||||
success: function (res) {
|
||||
console.log('res----------', res)
|
||||
const latitude = res.latitude
|
||||
const longitude = res.longitude
|
||||
|
||||
self.lnglat = [longitude, latitude]
|
||||
|
||||
uni.hideLoading()
|
||||
console.log('lnglatlnglat', self.lnglat, res)
|
||||
console.log('地址', res.address)
|
||||
|
||||
if (res.address) {
|
||||
let city = res.address.city ? res.address.city : ''
|
||||
let district = res.address.district ? res.address.district : ''
|
||||
let street = res.address.street ? res.address.street : ''
|
||||
self.address = `${city}${district}${street}`
|
||||
console.log('地址', self.address)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.cont {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
.text {
|
||||
margin: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.text .tit {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 476 B |
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
Binary file not shown.
|
After Width: | Height: | Size: 365 B |
Binary file not shown.
|
After Width: | Height: | Size: 587 B |
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
|
|
@ -0,0 +1,20 @@
|
|||
@font-face {
|
||||
font-family: "customicons"; /* Project id 2878519 */
|
||||
src:url('/static/customicons.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.customicons {
|
||||
font-family: "customicons" !important;
|
||||
}
|
||||
|
||||
.youxi:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.wenjian:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.zhuanfa:before {
|
||||
content: "\e610";
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,642 @@
|
|||
/**
|
||||
* Created by wangweijie5 on 2016/12/5.
|
||||
*/
|
||||
(function (event) {
|
||||
const AUDIO_TYPE = 0; // 音频
|
||||
const VIDEO_TYPE = 1; // 视频
|
||||
const PRIVT_TYPE = 2; // 私有帧
|
||||
|
||||
const PLAYM4_AUDIO_FRAME = 100; // 音频帧
|
||||
const PLAYM4_VIDEO_FRAME = 101; // 视频帧
|
||||
|
||||
const PLAYM4_OK = 1;
|
||||
const PLAYM4_ORDER_ERROR = 2;
|
||||
const PLAYM4_DECODE_ERROR = 44 // 解码失败
|
||||
const PLAYM4_NOT_KEYFRAME = 48; // 非关键帧
|
||||
const PLAYM4_NEED_MORE_DATA = 31; // 需要更多数据才能解析
|
||||
const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
|
||||
const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持
|
||||
|
||||
importScripts('Decoder.js');
|
||||
Module.addOnPostRun(function () {
|
||||
postMessage({ 'function': "loaded" });
|
||||
});
|
||||
|
||||
var iStreamMode = 0; // 流模式
|
||||
|
||||
var bOpenMode = false;
|
||||
var bOpenStream = false;
|
||||
|
||||
var funGetFrameData = null;
|
||||
var funGetAudFrameData = null;
|
||||
|
||||
var bWorkerPrintLog = false;//worker层log开关
|
||||
|
||||
var g_nPort = -1;
|
||||
var pInputData = null;
|
||||
var inputBufferSize = 40960;
|
||||
|
||||
self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
|
||||
let port = nPort;
|
||||
let user = pUser;
|
||||
let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
|
||||
let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
|
||||
let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
|
||||
let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
|
||||
let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
|
||||
// console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
|
||||
postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
|
||||
}
|
||||
|
||||
onmessage = function (event) {
|
||||
var eventData = event.data;
|
||||
var res = 0;
|
||||
switch (eventData.command) {
|
||||
case "printLog":
|
||||
let downloadFlag = eventData.data;
|
||||
if (downloadFlag === true) {
|
||||
bWorkerPrintLog = true;
|
||||
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
|
||||
}
|
||||
else {
|
||||
bWorkerPrintLog = false;
|
||||
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
|
||||
}
|
||||
|
||||
if (res !== PLAYM4_OK) {
|
||||
console.log("DecodeWorker.js: PlayerSDK print log failed,res" + res);
|
||||
postMessage({ 'function': "printLog", 'errorCode': res });
|
||||
}
|
||||
break;
|
||||
case "SetPlayPosition":
|
||||
let nFrameNumOrTime = eventData.data;
|
||||
let enPosType = eventData.type;
|
||||
// res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
|
||||
// if (res !== PLAYM4_OK)
|
||||
// {
|
||||
// postMessage({'function': "SetPlayPosition", 'errorCode': res});
|
||||
// return;
|
||||
// }
|
||||
// //有没有buffer需要清除
|
||||
|
||||
break;
|
||||
case "SetStreamOpenMode":
|
||||
//获取端口号
|
||||
g_nPort = Module._GetPort();
|
||||
//设置流打开模式
|
||||
iStreamMode = eventData.data;
|
||||
res = Module._SetStreamOpenMode(g_nPort, iStreamMode);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetStreamOpenMode", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
bOpenMode = true;
|
||||
break;
|
||||
|
||||
case "OpenStream":
|
||||
// 接收到的数据
|
||||
var iHeadLen = eventData.dataSize;
|
||||
var pHead = Module._malloc(iHeadLen + 4);
|
||||
if (pHead === null) {
|
||||
return;
|
||||
}
|
||||
var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
|
||||
aHead.set(new Uint8Array(eventData.data));
|
||||
res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
|
||||
postMessage({ 'function': "OpenStream", 'errorCode': res });
|
||||
if (res !== PLAYM4_OK) {
|
||||
//释放内存
|
||||
Module._free(pHead);
|
||||
pHead = null;
|
||||
return;
|
||||
}
|
||||
bOpenStream = true;
|
||||
break;
|
||||
case "Play":
|
||||
let resP = Module._Play(g_nPort);
|
||||
if (resP !== PLAYM4_OK) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "InputData":
|
||||
// 接收到的数据
|
||||
var iLen = eventData.dataSize;
|
||||
if (iLen > 0) {
|
||||
if (pInputData == null || iLen > inputBufferSize) {
|
||||
if (pInputData != null) {
|
||||
Module._free(pInputData);
|
||||
pInputData = null;
|
||||
}
|
||||
if (iLen > inputBufferSize) {
|
||||
inputBufferSize = iLen;
|
||||
}
|
||||
|
||||
pInputData = Module._malloc(inputBufferSize);
|
||||
if (pInputData === null) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var inputData = new Uint8Array(eventData.data);
|
||||
// var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
|
||||
// aInputData.set(inputData);
|
||||
Module.writeArrayToMemory(inputData, pInputData);
|
||||
inputData = null;
|
||||
res = Module._InputData(g_nPort, pInputData, iLen);
|
||||
if (res !== PLAYM4_OK) {
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
|
||||
postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
|
||||
}
|
||||
//Module._free(pInputData);
|
||||
//pInputData = null;
|
||||
} else {
|
||||
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
|
||||
if (sourceRemain == 0) {
|
||||
postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// if (funGetFrameData === null) {
|
||||
// funGetFrameData = Module.cwrap('GetFrameData', 'number');
|
||||
// }
|
||||
|
||||
while (bOpenMode && bOpenStream) {
|
||||
|
||||
var ret = getFrameData();
|
||||
// 直到获取视频帧或数据不足为止
|
||||
if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret || || PLAYM4_NEED_NEET_LOOP === ret
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case "SetSecretKey":
|
||||
var keyLen = eventData.nKeyLen;
|
||||
var pKeyData = Module._malloc(keyLen);
|
||||
if (pKeyData === null) {
|
||||
return;
|
||||
}
|
||||
var nKeySize = eventData.data.length
|
||||
var bufData = stringToBytes(eventData.data);
|
||||
var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
|
||||
let u8array = new Uint8Array(keyLen);
|
||||
aKeyData.set(u8array, 0);
|
||||
aKeyData.set(new Uint8Array(bufData));
|
||||
aKeyData = null;
|
||||
u8array = null;
|
||||
|
||||
res = Module._SetSecretKey(g_nPort, eventData.nKeyType, pKeyData, keyLen);//, nKeySize
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetSecretKey", 'errorCode': res });
|
||||
Module._free(pKeyData);
|
||||
pKeyData = null;
|
||||
return;
|
||||
}
|
||||
|
||||
Module._free(pKeyData);
|
||||
pKeyData = null;
|
||||
break;
|
||||
|
||||
case "GetBMP":
|
||||
var nBMPWidth = eventData.width;
|
||||
var nBMPHeight = eventData.height;
|
||||
var pYUVData = eventData.data;
|
||||
var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
|
||||
var oJpegCropRect = {
|
||||
left: eventData.left,
|
||||
top: eventData.top,
|
||||
right: eventData.right,
|
||||
bottom: eventData.bottom
|
||||
};
|
||||
|
||||
var pDataYUV = Module._malloc(nYUVSize);
|
||||
if (pDataYUV === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
|
||||
|
||||
// 分配BMP空间
|
||||
var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
|
||||
var pBmpData = Module._malloc(nBmpSize);
|
||||
var pBmpSize = Module._malloc(4);
|
||||
if (pBmpData === null || pBmpSize === null) {
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
|
||||
if (pBmpData != null) {
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
}
|
||||
|
||||
if (pBmpSize != null) {
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
|
||||
Module.setValue(pBmpSize, nBmpSize, "i32");
|
||||
res = Module._GetBMP(g_nPort, pDataYUV, nYUVSize, pBmpData, pBmpSize,
|
||||
oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "GetBMP", 'errorCode': res });
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取BMP图片大小
|
||||
var nBmpDataSize = Module.getValue(pBmpSize, "i32");
|
||||
|
||||
// 获取BMP图片数据
|
||||
var aBmpData = new Uint8Array(nBmpDataSize);
|
||||
aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
|
||||
|
||||
postMessage({ 'function': "GetBMP", 'data': aBmpData, 'errorCode': res }, [aBmpData.buffer]);
|
||||
aBmpData = null;
|
||||
if (pDataYUV != null) {
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
}
|
||||
if (pBmpData != null) {
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
}
|
||||
if (pBmpSize != null) {
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
}
|
||||
break;
|
||||
|
||||
case "GetJPEG":
|
||||
var nJpegWidth = eventData.width;
|
||||
var nJpegHeight = eventData.height;
|
||||
var pYUVData1 = eventData.data;
|
||||
var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
|
||||
var oJpegCropRect = {
|
||||
left: eventData.left,
|
||||
top: eventData.top,
|
||||
right: eventData.right,
|
||||
bottom: eventData.bottom
|
||||
};
|
||||
|
||||
var pDataYUV1 = Module._malloc(nYUVSize1);
|
||||
if (pDataYUV1 === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
|
||||
|
||||
// 分配JPEG空间
|
||||
var pJpegData = Module._malloc(nYUVSize1);
|
||||
var pJpegSize = Module._malloc(4);
|
||||
if (pJpegData === null || pJpegSize === null) {
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32"); // JPEG抓图，输入缓冲长度不小于当前帧YUV大小
|
||||
|
||||
res = Module._GetJPEG(g_nPort, pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
|
||||
oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "GetJPEG", 'errorCode': res });
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取JPEG图片大小
|
||||
var nJpegSize = Module.getValue(pJpegSize, "i32");
|
||||
|
||||
// 获取JPEG图片数据
|
||||
var aJpegData = new Uint8Array(nJpegSize);
|
||||
aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
|
||||
|
||||
postMessage({ 'function': "GetJPEG", 'data': aJpegData, 'errorCode': res }, [aJpegData.buffer]);
|
||||
|
||||
nJpegSize = null;
|
||||
aJpegData = null;
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
break;
|
||||
|
||||
case "SetDecodeFrameType":
|
||||
var nFrameType = eventData.data;
|
||||
res = Module._SetDecodeFrameType(g_nPort, nFrameType);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "CloseStream":
|
||||
//stop
|
||||
let resS = Module._Stop(g_nPort);
|
||||
if (resS !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "Stop", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
//closeStream
|
||||
res = Module._CloseStream(g_nPort);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "CloseStream", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
//freePort
|
||||
let resF = Module._FreePort(g_nPort);
|
||||
if (resF !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "FreePort", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
if (pInputData != null) {
|
||||
Module._free(pInputData);
|
||||
pInputData = null;
|
||||
}
|
||||
break;
|
||||
case "PlaySound":
|
||||
let resPS = Module._PlaySound(g_nPort);
|
||||
if (resPS !== PLAYM4_OK) {
|
||||
console.log("PlaySound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "StopSound":
|
||||
let resSS = Module._StopSound();
|
||||
if (resSS !== PLAYM4_OK) {
|
||||
console.log("StopSound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "SetVolume":
|
||||
let resSV = Module._SetVolume(g_nPort, eventData.volume);
|
||||
if (resSV !== PLAYM4_OK) {
|
||||
console.log("Audio SetVolume failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "GetVolume":
|
||||
let volume = Module._GetVolume();
|
||||
if (volume > 0) {
|
||||
postMessage({ 'function': "GetVolume", 'volume': volume });
|
||||
}
|
||||
else {
|
||||
console.log("Audio GetVolume failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "OnlyPlaySound":
|
||||
let resOPS = Module._OnlyPlaySound(g_nPort);
|
||||
if (resOPS !== PLAYM4_OK) {
|
||||
console.log("OnlyPlaySound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "Pause":
|
||||
let resPa = Module._Pause(g_nPort, eventData.bPlay);
|
||||
if (resPa !== PLAYM4_OK) {
|
||||
console.log("Pause failed");
|
||||
return;
|
||||
}
|
||||
case "PlayRate":
|
||||
Module._SetPlayRate(g_nPort, eventData.playRate);
|
||||
break;
|
||||
case "SetIFrameDecInterval":
|
||||
Module._SetIFrameDecInterval(g_nPort, eventData.data);
|
||||
break;
|
||||
case "SetLostFrameMode":
|
||||
Module._SetLostFrameMode(g_nPort, eventData.data, 0);
|
||||
break;
|
||||
case "SetDemuxModel":
|
||||
Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
|
||||
break;
|
||||
case "SkipErrorData":
|
||||
Module._SkipErrorData(g_nPort, eventData.bSkip);
|
||||
break;
|
||||
case "SetDecodeERC":
|
||||
Module._SetDecodeERC(g_nPort, eventData.nLevel);
|
||||
break;
|
||||
case "SetANRParam":
|
||||
Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
|
||||
break;
|
||||
case "SetResampleValue":
|
||||
Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
|
||||
break;
|
||||
case "GetLastError":
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
|
||||
break;
|
||||
case "SetGlobalBaseTime":
|
||||
Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
|
||||
break;
|
||||
case "SetRunTimeInfoCB":
|
||||
Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function getOSDTime(oFrameInfo) {
|
||||
var iYear = oFrameInfo.year;
|
||||
var iMonth = oFrameInfo.month;
|
||||
var iDay = oFrameInfo.day;
|
||||
var iHour = oFrameInfo.hour;
|
||||
var iMinute = oFrameInfo.minute;
|
||||
var iSecond = oFrameInfo.second;
|
||||
|
||||
if (iMonth < 10) {
|
||||
iMonth = "0" + iMonth;
|
||||
}
|
||||
if (iDay < 10) {
|
||||
iDay = "0" + iDay;
|
||||
}
|
||||
if (iHour < 10) {
|
||||
iHour = "0" + iHour;
|
||||
}
|
||||
if (iMinute < 10) {
|
||||
iMinute = "0" + iMinute;
|
||||
}
|
||||
if (iSecond < 10) {
|
||||
iSecond = "0" + iSecond;
|
||||
}
|
||||
|
||||
return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
|
||||
}
|
||||
// 获取帧数据
|
||||
function getFrameData() {
|
||||
// function getFrameData() {
|
||||
// 获取帧数据
|
||||
var res = Module._GetFrameData();
|
||||
//var res = fun();
|
||||
if (res === PLAYM4_OK) {
|
||||
var oFrameInfo = Module._GetFrameInfo();
|
||||
switch (oFrameInfo.frameType) {
|
||||
case AUDIO_TYPE:
|
||||
var iSize = oFrameInfo.frameSize;
|
||||
if (0 === iSize) {
|
||||
return -1;
|
||||
}
|
||||
var pPCM = Module._GetFrameBuffer();
|
||||
// var audioBuf = new ArrayBuffer(iSize);
|
||||
var aPCMData = new Uint8Array(iSize);
|
||||
aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
|
||||
if (bWorkerPrintLog) {
|
||||
console.log("<<<Worker: audio media Info: nSise:" + oFrameInfo.frameSize + ",nSampleRate:" + oFrameInfo.samplesPerSec + ',channel:' + oFrameInfo.channels + ',bitsPerSample:' + oFrameInfo.bitsPerSample);
|
||||
}
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
|
||||
'frameInfo': oFrameInfo, 'errorCode': res
|
||||
}, [aPCMData.buffer]);
|
||||
|
||||
oFrameInfo = null;
|
||||
pPCM = null;
|
||||
aPCMData = null;
|
||||
return PLAYM4_AUDIO_FRAME;
|
||||
|
||||
case VIDEO_TYPE:
|
||||
var szOSDTime = getOSDTime(oFrameInfo);
|
||||
|
||||
var iWidth = oFrameInfo.width;
|
||||
var iHeight = oFrameInfo.height;
|
||||
|
||||
var iYUVSize = iWidth * iHeight * 3 / 2;
|
||||
if (0 === iYUVSize) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
var pYUV = Module._GetFrameBuffer();
|
||||
|
||||
// 图像数据渲染后压回，若从主码流切到子码流，存在数组大小与图像大小不匹配现象
|
||||
var aYUVData = new Uint8Array(iYUVSize);
|
||||
aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
|
||||
if (bWorkerPrintLog) {
|
||||
console.log("<<<Worker: video media Info: Width:" + oFrameInfo.width + ",Height:" + oFrameInfo.height + ",timeStamp:" + oFrameInfo.timeStamp);
|
||||
}
|
||||
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
|
||||
'dataLen': aYUVData.length, 'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
|
||||
}, [aYUVData.buffer]);
|
||||
|
||||
oFrameInfo = null;
|
||||
pYUV = null;
|
||||
aYUVData = null;
|
||||
return PLAYM4_VIDEO_FRAME;
|
||||
|
||||
case PRIVT_TYPE:
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
|
||||
});
|
||||
return PLAYM4_SYS_NOT_SUPPORT;
|
||||
|
||||
default:
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
|
||||
});
|
||||
return PLAYM4_SYS_NOT_SUPPORT;
|
||||
}
|
||||
}
|
||||
else {
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
//解码失败返回裸数据
|
||||
if (PLAYM4_DECODE_ERROR === errorCode) {
|
||||
var rawInfo = Module._GetRawDataInfo();
|
||||
var pRawData = Module._GetRawDataBuffer();
|
||||
var aRawData = new Uint8Array(rawInfo.isize);
|
||||
aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
|
||||
postMessage({
|
||||
'function': "GetRawData", 'type': "", 'data': aRawData.buffer,
|
||||
'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
|
||||
});
|
||||
rawInfo = null;
|
||||
pRawData = null;
|
||||
aRawData = null;
|
||||
}
|
||||
//需要更多数据
|
||||
if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
|
||||
});
|
||||
}
|
||||
return errorCode;
|
||||
}
|
||||
}
|
||||
|
||||
// 开始计算时间
|
||||
function startTime() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
// 结束计算时间
|
||||
function endTime() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
// 字母字符串转byte数组
|
||||
function stringToBytes(str) {
|
||||
var ch, st, re = [];
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
ch = str.charCodeAt(i); // get char
|
||||
st = []; // set up "stack"
|
||||
do {
|
||||
st.push(ch & 0xFF); // push byte to stack
|
||||
ch = ch >> 8; // shift value down by 1 byte
|
||||
}
|
||||
while (ch);
|
||||
// add stack contents to result
|
||||
// done because chars have "wrong" endianness
|
||||
re = re.concat(st.reverse());
|
||||
}
|
||||
// return an array of bytes
|
||||
return re;
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,642 @@
|
|||
/**
|
||||
* Created by wangweijie5 on 2016/12/5.
|
||||
*/
|
||||
(function (event) {
|
||||
const AUDIO_TYPE = 0; // 音频
|
||||
const VIDEO_TYPE = 1; // 视频
|
||||
const PRIVT_TYPE = 2; // 私有帧
|
||||
|
||||
const PLAYM4_AUDIO_FRAME = 100; // 音频帧
|
||||
const PLAYM4_VIDEO_FRAME = 101; // 视频帧
|
||||
|
||||
const PLAYM4_OK = 1;
|
||||
const PLAYM4_ORDER_ERROR = 2;
|
||||
const PLAYM4_DECODE_ERROR = 44 // 解码失败
|
||||
const PLAYM4_NOT_KEYFRAME = 48; // 非关键帧
|
||||
const PLAYM4_NEED_MORE_DATA = 31; // 需要更多数据才能解析
|
||||
const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
|
||||
const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持
|
||||
|
||||
importScripts('Decoder.js');
|
||||
Module.addOnPostRun(function () {
|
||||
postMessage({ 'function': "loaded" });
|
||||
});
|
||||
|
||||
var iStreamMode = 0; // 流模式
|
||||
|
||||
var bOpenMode = false;
|
||||
var bOpenStream = false;
|
||||
|
||||
var funGetFrameData = null;
|
||||
var funGetAudFrameData = null;
|
||||
|
||||
var bWorkerPrintLog = false;//worker层log开关
|
||||
|
||||
var g_nPort = -1;
|
||||
var pInputData = null;
|
||||
var inputBufferSize = 40960;
|
||||
|
||||
self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
|
||||
let port = nPort;
|
||||
let user = pUser;
|
||||
let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
|
||||
let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
|
||||
let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
|
||||
let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
|
||||
let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
|
||||
// console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
|
||||
postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
|
||||
}
|
||||
|
||||
onmessage = function (event) {
|
||||
var eventData = event.data;
|
||||
var res = 0;
|
||||
switch (eventData.command) {
|
||||
case "printLog":
|
||||
let downloadFlag = eventData.data;
|
||||
if (downloadFlag === true) {
|
||||
bWorkerPrintLog = true;
|
||||
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
|
||||
}
|
||||
else {
|
||||
bWorkerPrintLog = false;
|
||||
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
|
||||
}
|
||||
|
||||
if (res !== PLAYM4_OK) {
|
||||
console.log("DecodeWorker.js: PlayerSDK print log failed,res" + res);
|
||||
postMessage({ 'function': "printLog", 'errorCode': res });
|
||||
}
|
||||
break;
|
||||
case "SetPlayPosition":
|
||||
let nFrameNumOrTime = eventData.data;
|
||||
let enPosType = eventData.type;
|
||||
// res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
|
||||
// if (res !== PLAYM4_OK)
|
||||
// {
|
||||
// postMessage({'function': "SetPlayPosition", 'errorCode': res});
|
||||
// return;
|
||||
// }
|
||||
// //有没有buffer需要清除
|
||||
|
||||
break;
|
||||
case "SetStreamOpenMode":
|
||||
//获取端口号
|
||||
g_nPort = Module._GetPort();
|
||||
//设置流打开模式
|
||||
iStreamMode = eventData.data;
|
||||
res = Module._SetStreamOpenMode(g_nPort, iStreamMode);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetStreamOpenMode", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
bOpenMode = true;
|
||||
break;
|
||||
|
||||
case "OpenStream":
|
||||
// 接收到的数据
|
||||
var iHeadLen = eventData.dataSize;
|
||||
var pHead = Module._malloc(iHeadLen + 4);
|
||||
if (pHead === null) {
|
||||
return;
|
||||
}
|
||||
var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
|
||||
aHead.set(new Uint8Array(eventData.data));
|
||||
res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
|
||||
postMessage({ 'function': "OpenStream", 'errorCode': res });
|
||||
if (res !== PLAYM4_OK) {
|
||||
//释放内存
|
||||
Module._free(pHead);
|
||||
pHead = null;
|
||||
return;
|
||||
}
|
||||
bOpenStream = true;
|
||||
break;
|
||||
case "Play":
|
||||
let resP = Module._Play(g_nPort);
|
||||
if (resP !== PLAYM4_OK) {
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "InputData":
|
||||
// 接收到的数据
|
||||
var iLen = eventData.dataSize;
|
||||
if (iLen > 0) {
|
||||
if (pInputData == null || iLen > inputBufferSize) {
|
||||
if (pInputData != null) {
|
||||
Module._free(pInputData);
|
||||
pInputData = null;
|
||||
}
|
||||
if (iLen > inputBufferSize) {
|
||||
inputBufferSize = iLen;
|
||||
}
|
||||
|
||||
pInputData = Module._malloc(inputBufferSize);
|
||||
if (pInputData === null) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var inputData = new Uint8Array(eventData.data);
|
||||
// var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
|
||||
// aInputData.set(inputData);
|
||||
Module.writeArrayToMemory(inputData, pInputData);
|
||||
inputData = null;
|
||||
res = Module._InputData(g_nPort, pInputData, iLen);
|
||||
if (res !== PLAYM4_OK) {
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
|
||||
postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
|
||||
}
|
||||
//Module._free(pInputData);
|
||||
//pInputData = null;
|
||||
} else {
|
||||
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
|
||||
if (sourceRemain == 0) {
|
||||
postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// if (funGetFrameData === null) {
|
||||
// funGetFrameData = Module.cwrap('GetFrameData', 'number');
|
||||
// }
|
||||
|
||||
while (bOpenMode && bOpenStream) {
|
||||
|
||||
var ret = getFrameData();
|
||||
// 直到获取视频帧或数据不足为止
|
||||
if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret || || PLAYM4_NEED_NEET_LOOP === ret
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case "SetSecretKey":
|
||||
var keyLen = eventData.nKeyLen;
|
||||
var pKeyData = Module._malloc(keyLen);
|
||||
if (pKeyData === null) {
|
||||
return;
|
||||
}
|
||||
var nKeySize = eventData.data.length
|
||||
var bufData = stringToBytes(eventData.data);
|
||||
var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
|
||||
let u8array = new Uint8Array(keyLen);
|
||||
aKeyData.set(u8array, 0);
|
||||
aKeyData.set(new Uint8Array(bufData));
|
||||
aKeyData = null;
|
||||
u8array = null;
|
||||
|
||||
res = Module._SetSecretKey(g_nPort, eventData.nKeyType, pKeyData, keyLen);//, nKeySize
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetSecretKey", 'errorCode': res });
|
||||
Module._free(pKeyData);
|
||||
pKeyData = null;
|
||||
return;
|
||||
}
|
||||
|
||||
Module._free(pKeyData);
|
||||
pKeyData = null;
|
||||
break;
|
||||
|
||||
case "GetBMP":
|
||||
var nBMPWidth = eventData.width;
|
||||
var nBMPHeight = eventData.height;
|
||||
var pYUVData = eventData.data;
|
||||
var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
|
||||
var oJpegCropRect = {
|
||||
left: eventData.left,
|
||||
top: eventData.top,
|
||||
right: eventData.right,
|
||||
bottom: eventData.bottom
|
||||
};
|
||||
|
||||
var pDataYUV = Module._malloc(nYUVSize);
|
||||
if (pDataYUV === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
|
||||
|
||||
// 分配BMP空间
|
||||
var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
|
||||
var pBmpData = Module._malloc(nBmpSize);
|
||||
var pBmpSize = Module._malloc(4);
|
||||
if (pBmpData === null || pBmpSize === null) {
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
|
||||
if (pBmpData != null) {
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
}
|
||||
|
||||
if (pBmpSize != null) {
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
|
||||
Module.setValue(pBmpSize, nBmpSize, "i32");
|
||||
res = Module._GetBMP(g_nPort, pDataYUV, nYUVSize, pBmpData, pBmpSize,
|
||||
oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "GetBMP", 'errorCode': res });
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取BMP图片大小
|
||||
var nBmpDataSize = Module.getValue(pBmpSize, "i32");
|
||||
|
||||
// 获取BMP图片数据
|
||||
var aBmpData = new Uint8Array(nBmpDataSize);
|
||||
aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
|
||||
|
||||
postMessage({ 'function': "GetBMP", 'data': aBmpData, 'errorCode': res }, [aBmpData.buffer]);
|
||||
aBmpData = null;
|
||||
if (pDataYUV != null) {
|
||||
Module._free(pDataYUV);
|
||||
pDataYUV = null;
|
||||
}
|
||||
if (pBmpData != null) {
|
||||
Module._free(pBmpData);
|
||||
pBmpData = null;
|
||||
}
|
||||
if (pBmpSize != null) {
|
||||
Module._free(pBmpSize);
|
||||
pBmpSize = null;
|
||||
}
|
||||
break;
|
||||
|
||||
case "GetJPEG":
|
||||
var nJpegWidth = eventData.width;
|
||||
var nJpegHeight = eventData.height;
|
||||
var pYUVData1 = eventData.data;
|
||||
var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
|
||||
var oJpegCropRect = {
|
||||
left: eventData.left,
|
||||
top: eventData.top,
|
||||
right: eventData.right,
|
||||
bottom: eventData.bottom
|
||||
};
|
||||
|
||||
var pDataYUV1 = Module._malloc(nYUVSize1);
|
||||
if (pDataYUV1 === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
|
||||
|
||||
// 分配JPEG空间
|
||||
var pJpegData = Module._malloc(nYUVSize1);
|
||||
var pJpegSize = Module._malloc(4);
|
||||
if (pJpegData === null || pJpegSize === null) {
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32"); // JPEG抓图，输入缓冲长度不小于当前帧YUV大小
|
||||
|
||||
res = Module._GetJPEG(g_nPort, pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
|
||||
oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "GetJPEG", 'errorCode': res });
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取JPEG图片大小
|
||||
var nJpegSize = Module.getValue(pJpegSize, "i32");
|
||||
|
||||
// 获取JPEG图片数据
|
||||
var aJpegData = new Uint8Array(nJpegSize);
|
||||
aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
|
||||
|
||||
postMessage({ 'function': "GetJPEG", 'data': aJpegData, 'errorCode': res }, [aJpegData.buffer]);
|
||||
|
||||
nJpegSize = null;
|
||||
aJpegData = null;
|
||||
|
||||
if (pDataYUV1 != null) {
|
||||
Module._free(pDataYUV1);
|
||||
pDataYUV1 = null;
|
||||
}
|
||||
if (pJpegData != null) {
|
||||
Module._free(pJpegData);
|
||||
pJpegData = null;
|
||||
}
|
||||
if (pJpegSize != null) {
|
||||
Module._free(pJpegSize);
|
||||
pJpegSize = null;
|
||||
}
|
||||
break;
|
||||
|
||||
case "SetDecodeFrameType":
|
||||
var nFrameType = eventData.data;
|
||||
res = Module._SetDecodeFrameType(g_nPort, nFrameType);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "CloseStream":
|
||||
//stop
|
||||
let resS = Module._Stop(g_nPort);
|
||||
if (resS !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "Stop", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
//closeStream
|
||||
res = Module._CloseStream(g_nPort);
|
||||
if (res !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "CloseStream", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
//freePort
|
||||
let resF = Module._FreePort(g_nPort);
|
||||
if (resF !== PLAYM4_OK) {
|
||||
postMessage({ 'function': "FreePort", 'errorCode': res });
|
||||
return;
|
||||
}
|
||||
if (pInputData != null) {
|
||||
Module._free(pInputData);
|
||||
pInputData = null;
|
||||
}
|
||||
break;
|
||||
case "PlaySound":
|
||||
let resPS = Module._PlaySound(g_nPort);
|
||||
if (resPS !== PLAYM4_OK) {
|
||||
console.log("PlaySound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "StopSound":
|
||||
let resSS = Module._StopSound();
|
||||
if (resSS !== PLAYM4_OK) {
|
||||
console.log("StopSound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "SetVolume":
|
||||
let resSV = Module._SetVolume(g_nPort, eventData.volume);
|
||||
if (resSV !== PLAYM4_OK) {
|
||||
console.log("Audio SetVolume failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "GetVolume":
|
||||
let volume = Module._GetVolume();
|
||||
if (volume > 0) {
|
||||
postMessage({ 'function': "GetVolume", 'volume': volume });
|
||||
}
|
||||
else {
|
||||
console.log("Audio GetVolume failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "OnlyPlaySound":
|
||||
let resOPS = Module._OnlyPlaySound(g_nPort);
|
||||
if (resOPS !== PLAYM4_OK) {
|
||||
console.log("OnlyPlaySound failed");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case "Pause":
|
||||
let resPa = Module._Pause(g_nPort, eventData.bPlay);
|
||||
if (resPa !== PLAYM4_OK) {
|
||||
console.log("Pause failed");
|
||||
return;
|
||||
}
|
||||
case "PlayRate":
|
||||
Module._SetPlayRate(g_nPort, eventData.playRate);
|
||||
break;
|
||||
case "SetIFrameDecInterval":
|
||||
Module._SetIFrameDecInterval(g_nPort, eventData.data);
|
||||
break;
|
||||
case "SetLostFrameMode":
|
||||
Module._SetLostFrameMode(g_nPort, eventData.data, 0);
|
||||
break;
|
||||
case "SetDemuxModel":
|
||||
Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
|
||||
break;
|
||||
case "SkipErrorData":
|
||||
Module._SkipErrorData(g_nPort, eventData.bSkip);
|
||||
break;
|
||||
case "SetDecodeERC":
|
||||
Module._SetDecodeERC(g_nPort, eventData.nLevel);
|
||||
break;
|
||||
case "SetANRParam":
|
||||
Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
|
||||
break;
|
||||
case "SetResampleValue":
|
||||
Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
|
||||
break;
|
||||
case "GetLastError":
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
|
||||
break;
|
||||
case "SetGlobalBaseTime":
|
||||
Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
|
||||
break;
|
||||
case "SetRunTimeInfoCB":
|
||||
Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function getOSDTime(oFrameInfo) {
|
||||
var iYear = oFrameInfo.year;
|
||||
var iMonth = oFrameInfo.month;
|
||||
var iDay = oFrameInfo.day;
|
||||
var iHour = oFrameInfo.hour;
|
||||
var iMinute = oFrameInfo.minute;
|
||||
var iSecond = oFrameInfo.second;
|
||||
|
||||
if (iMonth < 10) {
|
||||
iMonth = "0" + iMonth;
|
||||
}
|
||||
if (iDay < 10) {
|
||||
iDay = "0" + iDay;
|
||||
}
|
||||
if (iHour < 10) {
|
||||
iHour = "0" + iHour;
|
||||
}
|
||||
if (iMinute < 10) {
|
||||
iMinute = "0" + iMinute;
|
||||
}
|
||||
if (iSecond < 10) {
|
||||
iSecond = "0" + iSecond;
|
||||
}
|
||||
|
||||
return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
|
||||
}
|
||||
// 获取帧数据
|
||||
function getFrameData() {
|
||||
// function getFrameData() {
|
||||
// 获取帧数据
|
||||
var res = Module._GetFrameData();
|
||||
//var res = fun();
|
||||
if (res === PLAYM4_OK) {
|
||||
var oFrameInfo = Module._GetFrameInfo();
|
||||
switch (oFrameInfo.frameType) {
|
||||
case AUDIO_TYPE:
|
||||
var iSize = oFrameInfo.frameSize;
|
||||
if (0 === iSize) {
|
||||
return -1;
|
||||
}
|
||||
var pPCM = Module._GetFrameBuffer();
|
||||
// var audioBuf = new ArrayBuffer(iSize);
|
||||
var aPCMData = new Uint8Array(iSize);
|
||||
aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
|
||||
if (bWorkerPrintLog) {
|
||||
console.log("<<<Worker: audio media Info: nSise:" + oFrameInfo.frameSize + ",nSampleRate:" + oFrameInfo.samplesPerSec + ',channel:' + oFrameInfo.channels + ',bitsPerSample:' + oFrameInfo.bitsPerSample);
|
||||
}
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
|
||||
'frameInfo': oFrameInfo, 'errorCode': res
|
||||
}, [aPCMData.buffer]);
|
||||
|
||||
oFrameInfo = null;
|
||||
pPCM = null;
|
||||
aPCMData = null;
|
||||
return PLAYM4_AUDIO_FRAME;
|
||||
|
||||
case VIDEO_TYPE:
|
||||
var szOSDTime = getOSDTime(oFrameInfo);
|
||||
|
||||
var iWidth = oFrameInfo.width;
|
||||
var iHeight = oFrameInfo.height;
|
||||
|
||||
var iYUVSize = iWidth * iHeight * 3 / 2;
|
||||
if (0 === iYUVSize) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
var pYUV = Module._GetFrameBuffer();
|
||||
|
||||
// 图像数据渲染后压回，若从主码流切到子码流，存在数组大小与图像大小不匹配现象
|
||||
var aYUVData = new Uint8Array(iYUVSize);
|
||||
aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
|
||||
if (bWorkerPrintLog) {
|
||||
console.log("<<<Worker: video media Info: Width:" + oFrameInfo.width + ",Height:" + oFrameInfo.height + ",timeStamp:" + oFrameInfo.timeStamp);
|
||||
}
|
||||
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
|
||||
'dataLen': aYUVData.length, 'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
|
||||
}, [aYUVData.buffer]);
|
||||
|
||||
oFrameInfo = null;
|
||||
pYUV = null;
|
||||
aYUVData = null;
|
||||
return PLAYM4_VIDEO_FRAME;
|
||||
|
||||
case PRIVT_TYPE:
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
|
||||
});
|
||||
return PLAYM4_SYS_NOT_SUPPORT;
|
||||
|
||||
default:
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
|
||||
});
|
||||
return PLAYM4_SYS_NOT_SUPPORT;
|
||||
}
|
||||
}
|
||||
else {
|
||||
let errorCode = Module._GetLastError(g_nPort);
|
||||
//解码失败返回裸数据
|
||||
if (PLAYM4_DECODE_ERROR === errorCode) {
|
||||
var rawInfo = Module._GetRawDataInfo();
|
||||
var pRawData = Module._GetRawDataBuffer();
|
||||
var aRawData = new Uint8Array(rawInfo.isize);
|
||||
aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
|
||||
postMessage({
|
||||
'function': "GetRawData", 'type': "", 'data': aRawData.buffer,
|
||||
'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
|
||||
});
|
||||
rawInfo = null;
|
||||
pRawData = null;
|
||||
aRawData = null;
|
||||
}
|
||||
//需要更多数据
|
||||
if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
|
||||
postMessage({
|
||||
'function': "GetFrameData", 'type': "", 'data': null,
|
||||
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
|
||||
});
|
||||
}
|
||||
return errorCode;
|
||||
}
|
||||
}
|
||||
|
||||
// 开始计算时间
|
||||
function startTime() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
// 结束计算时间
|
||||
function endTime() {
|
||||
return new Date().getTime();
|
||||
}
|
||||
|
||||
// 字母字符串转byte数组
|
||||
function stringToBytes(str) {
|
||||
var ch, st, re = [];
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
ch = str.charCodeAt(i); // get char
|
||||
st = []; // set up "stack"
|
||||
do {
|
||||
st.push(ch & 0xFF); // push byte to stack
|
||||
ch = ch >> 8; // shift value down by 1 byte
|
||||
}
|
||||
while (ch);
|
||||
// add stack contents to result
|
||||
// done because chars have "wrong" endianness
|
||||
re = re.concat(st.reverse());
|
||||
}
|
||||
// return an array of bytes
|
||||
return re;
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue