init():初始化项目
commit
00e01ba783
|
|
@ -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,4 @@
|
|||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnPaste": true
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
isHaveNetwork() {
|
||||
uni.getNetworkType({
|
||||
success: res => {
|
||||
if (res.networkType == 'none') {
|
||||
uni.showModal({
|
||||
title: '网络不给力~',
|
||||
content: '是否重新连接',
|
||||
showCancel: true,
|
||||
confirmText: '是',
|
||||
cancelText: '不了',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
setTimeout(() => {
|
||||
isHaveNetwork() //再次判断
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => console.error('调用失败'),
|
||||
complete: () => { }
|
||||
})
|
||||
}
|
||||
},
|
||||
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'
|
||||
// url:'/pages/zhjs/index'
|
||||
})
|
||||
console.log(token.secretKey, 'App Launch2')
|
||||
}
|
||||
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
this.isHaveNetwork()
|
||||
},
|
||||
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';
|
||||
@import 'ol/ol.css';
|
||||
|
||||
// 设置整个项目的背景色
|
||||
page {
|
||||
// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-info {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-justufy-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.time-ranger {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// .amap-logo {
|
||||
// display: none !important;
|
||||
// }
|
||||
// .amap-copyright {
|
||||
// display: none !important;
|
||||
// }</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
|
||||
<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input v-model="model1.userInfo.name" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
||||
border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u--textarea v-model="model1.userInfo.namevalue1" placeholder="请输入内容"></u--textarea>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
|
||||
@close="showSex = false" @select="sexSelect">
|
||||
</u-action-sheet>
|
||||
<button @click="submit">11</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showSex: false,
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: 'uView UI',
|
||||
sex: '',
|
||||
},
|
||||
},
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
'userInfo.name': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'userInfo.sex': {
|
||||
type: 'string',
|
||||
max: 1,
|
||||
required: true,
|
||||
message: '请选择男或女',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
},
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.sex = e.name
|
||||
this.$refs.uForm.validateField('userInfo.sex')
|
||||
},
|
||||
submit() {
|
||||
this.$refs.uForm.validate().then(res => {
|
||||
uni.$u.toast('校验通过')
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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,69 @@
|
|||
// #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://223.75.53.141:83'
|
||||
// $http.baseUrl = 'http://local.gunshiiot.com:18083'
|
||||
// $http.baseUrl = 'http://192.168.66.27:24105'
|
||||
// 请求拦截器
|
||||
$http.beforeRequest = function (options) {
|
||||
if (options.url.indexOf('/login') == -1) {
|
||||
options.header = {
|
||||
...(options.header || {}),
|
||||
'Authorization': 'Bearer ' + uni.getStorageSync('Gs-Token'),
|
||||
loginType: 1
|
||||
}
|
||||
// if (options.url.indexOf('/gunshiApp/tsg/visitMenuLog/insert') !== -1) {
|
||||
// options.header = {
|
||||
// ...options.header,
|
||||
// loginType: 1
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
// 响应拦截器
|
||||
$http.afterRequest = function (options) {
|
||||
if (options.data.code == 405) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
// uni.hideLoading()
|
||||
}
|
||||
uni.$showMsg = function (title, duration = 1500) {
|
||||
// 空文案时不弹toast，避免出现一个小黑点的空提示
|
||||
if (!title) return;
|
||||
return uni.showToast({
|
||||
title: String(title),
|
||||
duration,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
uni.$stcd = '61610700'
|
||||
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,127 @@
|
|||
{
|
||||
"name" : "檀树岗水库",
|
||||
"appid" : "__UNI__33ED56F",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.5",
|
||||
"versionCode" : 1,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
/* 5+App特有相关 */
|
||||
"usingComponents" : true,
|
||||
"nvueCompiler" : "uni-app",
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"runmode" : "liberate",
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {
|
||||
"VideoPlayer" : {},
|
||||
"Messaging" : {},
|
||||
"Camera" : {},
|
||||
"Maps" : {},
|
||||
"Contacts" : {}
|
||||
},
|
||||
/* 模块配置 */
|
||||
"distribute" : {
|
||||
/* 应用发布信息 */
|
||||
"android" : {
|
||||
/* android打包配置 */
|
||||
"packagename" : "com.gunshi.tsg",
|
||||
"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" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,428 @@
|
|||
{
|
||||
"name": "tsg-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",
|
||||
"ol": "^10.2.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/@petamoriken/float16": {
|
||||
"version": "3.8.7",
|
||||
"resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.8.7.tgz",
|
||||
"integrity": "sha512-/Ri4xDDpe12NT6Ex/DRgHzLlobiQXEW/hmG08w1wj/YU7hLemk97c+zHQFp0iZQ9r7YqgLEXZR2sls4HxBf9NA=="
|
||||
},
|
||||
"node_modules/@types/rbush": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/rbush/-/rbush-3.0.3.tgz",
|
||||
"integrity": "sha512-lX55lR0iYCgapxD3IrgujpQA1zDxwZI5qMRelKvmKAsSMplFVr7wmMpG7/6+Op2tjrgEex8o3vjg8CRDrRNYxg=="
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-2.0.0.tgz",
|
||||
"integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
|
||||
"engines": {
|
||||
"node": ">=12.20"
|
||||
}
|
||||
},
|
||||
"node_modules/color-parse": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/color-parse/-/color-parse-2.0.2.tgz",
|
||||
"integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
|
||||
"dependencies": {
|
||||
"color-name": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-rgba": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/color-rgba/-/color-rgba-3.0.0.tgz",
|
||||
"integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
|
||||
"dependencies": {
|
||||
"color-parse": "^2.0.0",
|
||||
"color-space": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-space": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-space/-/color-space-2.0.1.tgz",
|
||||
"integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
|
||||
},
|
||||
"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/earcut": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.0.tgz",
|
||||
"integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
|
||||
},
|
||||
"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/geotiff": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.1.3.tgz",
|
||||
"integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
|
||||
"dependencies": {
|
||||
"@petamoriken/float16": "^3.4.7",
|
||||
"lerc": "^3.0.0",
|
||||
"pako": "^2.0.4",
|
||||
"parse-headers": "^2.0.2",
|
||||
"quick-lru": "^6.1.1",
|
||||
"web-worker": "^1.2.0",
|
||||
"xml-utils": "^1.0.2",
|
||||
"zstddec": "^0.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.19"
|
||||
}
|
||||
},
|
||||
"node_modules/lerc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/lerc/-/lerc-3.0.0.tgz",
|
||||
"integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
|
||||
},
|
||||
"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/ol": {
|
||||
"version": "10.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/ol/-/ol-10.2.1.tgz",
|
||||
"integrity": "sha512-2bB/y2vEnmzjqynP0NA7Cp8k86No3Psn63Dueicep3E3i09axWRVIG5IS/bylEAGfWQx0QXD/uljkyFoY60Wig==",
|
||||
"dependencies": {
|
||||
"@types/rbush": "3.0.3",
|
||||
"color-rgba": "^3.0.0",
|
||||
"color-space": "^2.0.1",
|
||||
"earcut": "^3.0.0",
|
||||
"geotiff": "^2.0.7",
|
||||
"pbf": "4.0.1",
|
||||
"rbush": "^4.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/openlayers"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
|
||||
},
|
||||
"node_modules/parse-headers": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
|
||||
"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
|
||||
},
|
||||
"node_modules/pbf": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pbf/-/pbf-4.0.1.tgz",
|
||||
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
|
||||
"dependencies": {
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"pbf": "bin/pbf"
|
||||
}
|
||||
},
|
||||
"node_modules/protocol-buffers-schema": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
|
||||
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
|
||||
},
|
||||
"node_modules/quick-lru": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/quick-lru/-/quick-lru-6.1.2.tgz",
|
||||
"integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/quickselect": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-3.0.0.tgz",
|
||||
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
|
||||
},
|
||||
"node_modules/rbush": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/rbush/-/rbush-4.0.1.tgz",
|
||||
"integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
|
||||
"dependencies": {
|
||||
"quickselect": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-protobuf-schema": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
|
||||
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
|
||||
"dependencies": {
|
||||
"protocol-buffers-schema": "^3.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/web-worker": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/web-worker/-/web-worker-1.3.0.tgz",
|
||||
"integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
|
||||
},
|
||||
"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/xml-utils": {
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.10.1.tgz",
|
||||
"integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"node_modules/zstddec": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.1.0.tgz",
|
||||
"integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
|
||||
}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"@petamoriken/float16": {
|
||||
"version": "3.8.7",
|
||||
"resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.8.7.tgz",
|
||||
"integrity": "sha512-/Ri4xDDpe12NT6Ex/DRgHzLlobiQXEW/hmG08w1wj/YU7hLemk97c+zHQFp0iZQ9r7YqgLEXZR2sls4HxBf9NA=="
|
||||
},
|
||||
"@types/rbush": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/rbush/-/rbush-3.0.3.tgz",
|
||||
"integrity": "sha512-lX55lR0iYCgapxD3IrgujpQA1zDxwZI5qMRelKvmKAsSMplFVr7wmMpG7/6+Op2tjrgEex8o3vjg8CRDrRNYxg=="
|
||||
},
|
||||
"color-name": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-2.0.0.tgz",
|
||||
"integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow=="
|
||||
},
|
||||
"color-parse": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/color-parse/-/color-parse-2.0.2.tgz",
|
||||
"integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
|
||||
"requires": {
|
||||
"color-name": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"color-rgba": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/color-rgba/-/color-rgba-3.0.0.tgz",
|
||||
"integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
|
||||
"requires": {
|
||||
"color-parse": "^2.0.0",
|
||||
"color-space": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"color-space": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-space/-/color-space-2.0.1.tgz",
|
||||
"integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"earcut": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.0.tgz",
|
||||
"integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
|
||||
},
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"geotiff": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.1.3.tgz",
|
||||
"integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
|
||||
"requires": {
|
||||
"@petamoriken/float16": "^3.4.7",
|
||||
"lerc": "^3.0.0",
|
||||
"pako": "^2.0.4",
|
||||
"parse-headers": "^2.0.2",
|
||||
"quick-lru": "^6.1.1",
|
||||
"web-worker": "^1.2.0",
|
||||
"xml-utils": "^1.0.2",
|
||||
"zstddec": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"lerc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/lerc/-/lerc-3.0.0.tgz",
|
||||
"integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||
},
|
||||
"ol": {
|
||||
"version": "10.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/ol/-/ol-10.2.1.tgz",
|
||||
"integrity": "sha512-2bB/y2vEnmzjqynP0NA7Cp8k86No3Psn63Dueicep3E3i09axWRVIG5IS/bylEAGfWQx0QXD/uljkyFoY60Wig==",
|
||||
"requires": {
|
||||
"@types/rbush": "3.0.3",
|
||||
"color-rgba": "^3.0.0",
|
||||
"color-space": "^2.0.1",
|
||||
"earcut": "^3.0.0",
|
||||
"geotiff": "^2.0.7",
|
||||
"pbf": "4.0.1",
|
||||
"rbush": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
|
||||
},
|
||||
"parse-headers": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
|
||||
"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
|
||||
},
|
||||
"pbf": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pbf/-/pbf-4.0.1.tgz",
|
||||
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
|
||||
"requires": {
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"protocol-buffers-schema": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
|
||||
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
|
||||
},
|
||||
"quick-lru": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/quick-lru/-/quick-lru-6.1.2.tgz",
|
||||
"integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ=="
|
||||
},
|
||||
"quickselect": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-3.0.0.tgz",
|
||||
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
|
||||
},
|
||||
"rbush": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/rbush/-/rbush-4.0.1.tgz",
|
||||
"integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
|
||||
"requires": {
|
||||
"quickselect": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"resolve-protobuf-schema": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
|
||||
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
|
||||
"requires": {
|
||||
"protocol-buffers-schema": "^3.3.1"
|
||||
}
|
||||
},
|
||||
"web-worker": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/web-worker/-/web-worker-1.3.0.tgz",
|
||||
"integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
|
||||
},
|
||||
"webworkify-webpack": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
|
||||
},
|
||||
"xml-utils": {
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.10.1.tgz",
|
||||
"integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
|
||||
},
|
||||
"zrender": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
|
||||
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
|
||||
},
|
||||
"zstddec": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.1.0.tgz",
|
||||
"integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"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",
|
||||
"ol": "^10.2.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
{
|
||||
"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/xcrw/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/xcrw/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/stlljk/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/spjk/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/spjk/spbf/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/aqjc/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/newAqjc/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/homeIndex/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true,
|
||||
"app-plus": {
|
||||
"pullToRefresh": {
|
||||
"support": true,
|
||||
"style": "default",
|
||||
"offset": "70px"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/mypage/mypage",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/zhjs/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"app-plus": {
|
||||
"titleNView": false,
|
||||
"subNVues": [
|
||||
{
|
||||
"id": "drawer",
|
||||
"path": "pages/zhjs/subnvue/index.nvue",
|
||||
"style": {
|
||||
"position": "absolute",
|
||||
"width": "100%",
|
||||
"height": "100%"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sjc/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/wtcl/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/wxyh/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/wxyh/formZdy/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/xcrw/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/wtcl/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mypage/compents/xcrw/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personInfo/personInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/modifyPassword/modifyPassword",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/wxyh/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wtcl/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wtcl/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/yj/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/yj/detail/qxyj",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/yj/detail/wyyj",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/yj/detail/aiyj",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/yj/detail/byTable",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/messageList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/briefList/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/briefList/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/messageList/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/skInfo/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/skInfo/waterDatail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ylzList/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sws/detail/index",
|
||||
"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/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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,456 @@
|
|||
<template>
|
||||
<view :style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#fff' }">
|
||||
<!-- <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> -->
|
||||
<picker @change="bindPickerChange" :range="array" range-key="profileName" style="margin-top:0px;padding: 0 10px;">
|
||||
<view class="uni-input12">
|
||||
<view>{{ profileName }}</view>
|
||||
<u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime = true" style="margin-left:10%;color:#3399ef">{{ stm }}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1 = true" style="margin:0 10%;color:#3399ef">{{ etm }}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="jcsj-content">
|
||||
<view class="tool-btn">
|
||||
<view class="scale-btn">
|
||||
<u-button style="margin-right:10px" @click="fd" class="aqjc-custom-style">+</u-button>
|
||||
<u-button @click="sx" class="aqjc-custom-style">-</u-button>
|
||||
</view>
|
||||
<view class="play-btn">
|
||||
<uni-icons type="videocam" size="40" :color="swiper ? '#2979ff' : '#909399'" @click="play"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jcsj-charts">
|
||||
<movable-area :style="areaStyle">
|
||||
<movable-view @scale="scale" direction="all" :scale-value="scaleValue" scale-min="0.5" scale="true"
|
||||
scale-max="4" out-of-bounds="true">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
<view style="margin-top: 20px;">
|
||||
<JcsjTable :columns="columns" :data="dataSources" :newCol="newCol" :cols2="cols2" />
|
||||
</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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
import drpOption from './jrxOptions';
|
||||
import JcsjTable from "./jcsjTable"
|
||||
const stm = moment().subtract(1, '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");
|
||||
const typeName = {
|
||||
'ZB0+130': '1',
|
||||
'ZB0+132': '2',
|
||||
'ZB0+250': '3',
|
||||
'ZB0+252': '4',
|
||||
'ZB0+370': '5',
|
||||
'ZB0+372': '6',
|
||||
'FB0+010': '7',
|
||||
'FB0+030': '8',
|
||||
}
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
startTime: stm,
|
||||
endTime: etm,
|
||||
stm,
|
||||
etm,
|
||||
showTime: false,
|
||||
showTime1: false,
|
||||
array: [],
|
||||
profileCode: '',
|
||||
dbType: '',
|
||||
type1: '',
|
||||
trData: [],
|
||||
dataSources: [],
|
||||
chartData: {
|
||||
chartData: {},
|
||||
eopts: {}
|
||||
},
|
||||
areaStyle: {
|
||||
left: "-450px"
|
||||
},
|
||||
scaleValue: 0.5,
|
||||
swiper: false,
|
||||
timer: 100,
|
||||
columns: [],
|
||||
cols1: [{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'time',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '库水位(m)',
|
||||
key: 'rz',
|
||||
dataIndex: 'rz',
|
||||
width: 150,
|
||||
align: "center"
|
||||
},
|
||||
],
|
||||
cols2: [{
|
||||
title: '结果分析',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
align: "center",
|
||||
}],
|
||||
newCol: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
JcsjTable
|
||||
},
|
||||
computed: {
|
||||
profileName() {
|
||||
if (this.array.length > 0) {
|
||||
return this.array.find(item => item.profileCode == this.profileCode).profileName;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
profileCode: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
let name = this.array.find(item => item.profileCode == newVal).profileName;
|
||||
this.dbType = (name == "ZB0+130" || name == "ZB0+132") ? "1" :
|
||||
(name == "ZB0+250" || name == "ZB0+252") ? "2" :
|
||||
(name == "ZB0+370" || name == "ZB0+372") ? "3" :
|
||||
(name == "FB0+010" || name == "FB0+030") ? '4' : '';
|
||||
this.type1 = typeName[name];
|
||||
this.getDmTree();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
trData: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
dataSources: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.chartData = {
|
||||
...drpOption(newVal[0], this.dbType, this.type1)
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
swiper(newVal) {
|
||||
console.log("ww", newVal);
|
||||
|
||||
if (newVal) {
|
||||
this.InitialScroll(this.dataSources)
|
||||
} else {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
InitialScroll(data) {
|
||||
let index = 0;
|
||||
this.timer = setInterval(() => {
|
||||
console.log("data", data[index % data.length]);
|
||||
|
||||
this.chartData = {
|
||||
...drpOption(data[index % data.length], this.dbType, this.type1)
|
||||
}
|
||||
index++;
|
||||
}, 1000)
|
||||
},
|
||||
// 播放
|
||||
play() {
|
||||
this.swiper = !this.swiper;
|
||||
},
|
||||
// 放大回调
|
||||
fd() {
|
||||
if (this.scaleValue == 4) {
|
||||
return;
|
||||
} else {
|
||||
this.scaleValue += 0.1;
|
||||
}
|
||||
},
|
||||
// 缩小回调
|
||||
sx() {
|
||||
if (this.scaleValue == 0.5) {
|
||||
return ''
|
||||
} else {
|
||||
this.scaleValue -= 0.1;
|
||||
}
|
||||
},
|
||||
// 缩放
|
||||
scale(e) {
|
||||
this.areaStyle.left = -(e.detail.scale + 1) * 450 + 'px';
|
||||
},
|
||||
searchHandle() {
|
||||
this.getTableData();
|
||||
},
|
||||
handleStartTime(e) {
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
console.log("time", time);
|
||||
|
||||
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]
|
||||
},
|
||||
bindPickerChange(e) {
|
||||
this.profileCode = this.array[e.target.value].profileCode
|
||||
},
|
||||
// 获取监测点数据
|
||||
async getMonthData() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post(
|
||||
`/gunshiApp/tsg/attDamProfile/list`,)
|
||||
if (data.code == 200) {
|
||||
uni.hideLoading();
|
||||
const filterData = data.data.filter(item => (item?.profileName?.split('+')[0] == 'ZB0' || item?.profileName?.split('+')[0] == 'FB0'))
|
||||
console.log("filterData", filterData);
|
||||
const sortedData = filterData.sort((a, b) => {
|
||||
// 判断a、b是否为ZB0开头
|
||||
const isAZB0 = a.profileCode.startsWith('ZB0');
|
||||
const isBZB0 = b.profileCode.startsWith('ZB0');
|
||||
|
||||
// 规则：ZB0开头的排前面；同类型（都ZB0/都非ZB0）保持原顺序
|
||||
if (isAZB0 && !isBZB0) return -1; // a是ZB0，b不是 → a在前
|
||||
if (!isAZB0 && isBZB0) return 1; // a不是ZB0，b是 → b在前
|
||||
return 0; // 同类型，保持原始相对顺序
|
||||
});
|
||||
this.array = sortedData
|
||||
this.profileCode = sortedData[0].profileCode;
|
||||
}
|
||||
} catch (e) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取坝面上点位数据
|
||||
async getTableData() {
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
mask: true,
|
||||
});
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post(
|
||||
"/gunshiApp/tsg/osmoticPressR/infiltra/line", {
|
||||
stationCodes: this.trData,
|
||||
dateTimeRangeSo: {
|
||||
start: moment(this.stm).format("YYYY-MM-DD HH:mm:00"),
|
||||
end: moment(this.etm).format("YYYY-MM-DD HH:mm:00"),
|
||||
}
|
||||
}
|
||||
)
|
||||
if (data.code == 200) {
|
||||
uni.hideLoading();
|
||||
let newArr = [];
|
||||
let newData = data.data.map((s, i) => {
|
||||
newArr.push(s.list.map(c => ({
|
||||
[c.stationCode]: c.value || '-',
|
||||
tm: c.tm,
|
||||
|
||||
})))
|
||||
return {
|
||||
tm: s.tm,
|
||||
rz: s.rz,
|
||||
status: s.status || '',
|
||||
inx: i + 1
|
||||
}
|
||||
})
|
||||
let filterData = newArr.filter(s => s.length > 0).flat()
|
||||
let result = newData.map(s => {
|
||||
let tm1 = s.tm;
|
||||
let r = filterData.filter(t => {
|
||||
return t.tm == tm1
|
||||
})
|
||||
let obj = {};
|
||||
r.forEach(s1 => {
|
||||
obj = {
|
||||
...s1,
|
||||
...obj
|
||||
}
|
||||
})
|
||||
return {
|
||||
...s,
|
||||
...obj,
|
||||
}
|
||||
})
|
||||
this.dataSources = [...result];
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 获取各点
|
||||
async getDmTree() {
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post("/gunshiApp/tsg/attDamProfile/tree")
|
||||
if (data.code == 200) {
|
||||
console.log("data", data);
|
||||
|
||||
let filterData = data.data.filter(s => s.profileCode == this.profileCode)
|
||||
this.trData = filterData[0].children;
|
||||
const newCol = filterData[0].children.map(s => ({
|
||||
title: `${s}(m)`,
|
||||
key: s,
|
||||
dataIndex: s,
|
||||
width: 150,
|
||||
align: "center",
|
||||
}))
|
||||
this.columns = [...this.cols1, ...newCol, ...this.cols2]
|
||||
this.newCol = newCol;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
|
||||
// 拖动回调
|
||||
onChange(e) {
|
||||
console.log(e);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData()
|
||||
this.getDmTree()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-input12 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 30px;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
// background-image: '../../static/images/';
|
||||
}
|
||||
|
||||
.jcsj-box {
|
||||
padding: 0 10px;
|
||||
|
||||
.jcsj-content {
|
||||
max-height: 100vh;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: "center";
|
||||
padding: 5px;
|
||||
|
||||
.scale-btn {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jcsj-charts {
|
||||
width: 1310px;
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
|
||||
// margin-top: 20px;
|
||||
&>movable-area {
|
||||
height: 250px;
|
||||
width: 3000px;
|
||||
// position:fixed;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
background-color: #efefef;
|
||||
|
||||
movable-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 1310px;
|
||||
height: 380px;
|
||||
background-color: #fff;
|
||||
left: 450px;
|
||||
top: 10px
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-color: #68bbff !important;
|
||||
color: #68bbff;
|
||||
}
|
||||
}
|
||||
|
||||
.aqjc-custom-style {
|
||||
width: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="display:block;width:700px;overflow-x:auto">
|
||||
<tr>
|
||||
<th v-for="(cols,i) in columns" :key="i" :style="getStyle(cols)">
|
||||
{{ cols.title }}
|
||||
</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in data" :key="index">
|
||||
<td style="width:100px;text-align:center">{{ index + 1 }}</td>
|
||||
<td style="width:200px;text-align:center">{{ item.tm }}</td>
|
||||
<td style="width:100px;text-align:center">{{ item.rz }}</td>
|
||||
<td v-for="(col,i) in newCol" :key="i" style="width:100px;text-align:center;">
|
||||
{{item[col.key] }}
|
||||
</td>
|
||||
<td style="width:100px;">
|
||||
{{item.status == 1 ? "正常" : rec == 0 ? "异常" : ''}}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<div style="height:180px"></div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
columns:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
cols2:{
|
||||
type:Array,
|
||||
default:[],
|
||||
},
|
||||
newCol:{
|
||||
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:{
|
||||
getStyle(row){
|
||||
return {
|
||||
width:row.title == "时间" ? "200px": "100px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 90rpx;
|
||||
// overflow-x: auto;
|
||||
}
|
||||
.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,519 @@
|
|||
|
||||
import { imageUrl060,imageUrl090,rule } from './dataUrl'
|
||||
import imageUrl130 from './dataUrl1/zb130';
|
||||
import imageUrl250 from './dataUrl1/zb250';
|
||||
import imageUrl370 from './dataUrl1/zb370';
|
||||
import imageUrl010 from './dataUrl1/fb010';
|
||||
import pieMonth from "./pieMonth";
|
||||
|
||||
|
||||
export default function jrxOptions(data = {}, type = "1", typeName = '1') {
|
||||
|
||||
const yMin = type == "3" ? 70 : type == "2" ? 67 :
|
||||
type == '1' ? 58 : 99;
|
||||
const yMax = type == "3" ? 129 : type == "2" ? 117
|
||||
: type == "1" ? 118 : 116;
|
||||
const type1 = ["UPD1", "UPD4", "UPD7", "UPD16"];
|
||||
const type2 = ["UPD10", "UPD13"];
|
||||
const type3 = ["UPD2", "UPD5", "UPD8", "UPD17"];
|
||||
const type4 = ["UPD11", "UPD14"];
|
||||
const type5 = ["UPD3", "UPD6", "UPD12"];
|
||||
const type6 = ["UPD9", "UPD15"];
|
||||
const type7 = ["UPD24", "UPD26","UPD28"]; //UPD24:109.87,UPD26:109.75,UPD28:109.43
|
||||
const type8 = ["UPD25", "UPD27","UPD29"]; //UPD25:109.87,UPD27:109.75,UPD29:109.43
|
||||
const alltype = typeName == "1" ? type1 :
|
||||
typeName == "2" ? type2 :
|
||||
typeName == "3" ? type3 :
|
||||
typeName == "4" ? type4 :
|
||||
typeName == "5" ? type5 :
|
||||
typeName == "6" ? type6 :
|
||||
typeName == "7" ? type7 :
|
||||
typeName == "8" ? type8 :
|
||||
[];
|
||||
;
|
||||
|
||||
// 字体颜色
|
||||
const textColor = '#666'
|
||||
// const imageUrl370 = `${process.env.PUBLIC_URL}/assets/images/zb370.png `
|
||||
// const imageUrl250 = `${process.env.PUBLIC_URL}/assets/images/zb250.png `
|
||||
// const imageUrl130 = `${process.env.PUBLIC_URL}/assets/images/zb130.png `
|
||||
const imageUrl = type == "1" ? imageUrl130 :
|
||||
type == "2" ? imageUrl250 :
|
||||
type == "3" ? imageUrl370 : imageUrl010;
|
||||
// const rule = `${process.env.PUBLIC_URL}/assets/images/ruler.png `
|
||||
|
||||
// rz 是最上面那条线 rz1是那条贴近坝面的线 xValue求解的是最上面那条线的末尾横坐标
|
||||
const xValue = type == "3" ? (((data?.rz - 86) + 0.6 * 5) / 0.6) :
|
||||
type == "2" ? (((data?.rz - 87) + 0.63 * 7) / 0.63) :
|
||||
type == "1" ? (((data?.rz - 87) + 0.67 * 10) / 0.67) :
|
||||
(((data?.rz - 102) + 0.25 * 4) / 0.25)
|
||||
const rz = data?.rz ?
|
||||
[[xValue, data?.rz], [0, data?.rz],] :
|
||||
[]
|
||||
const rz1 = data?.rz ?
|
||||
type == "3" ?
|
||||
[[0, 86], [4, 86], [xValue, data?.rz]] :
|
||||
type == "2" ?
|
||||
[[0, 87], [6, 87], [xValue, data?.rz]]
|
||||
:
|
||||
type == "1" ?
|
||||
[[0, 87], [8, 87], [xValue, data?.rz]]
|
||||
:
|
||||
[[0, 102], [4, 102], [xValue, data?.rz]]
|
||||
:
|
||||
[]
|
||||
// gz1、gz2、gz3、gz4分别为渗压管
|
||||
// const gz1 = data[alltype[0]] ?
|
||||
// type == "3" ? [[typeName =='5' ?52:57, typeName =='5' ?90.50:81.85], [typeName =='5' ?52:57, data[alltype[0]]]] :
|
||||
// type == "2" ? [[typeName =='3' ?50:55, typeName =='3' ?84.41:83.78], [typeName =='3' ?50:55, data[alltype[0]]]] :
|
||||
// type == "1" ? [[typeName =='1' ?49:57, typeName =='1' ?80.11:78.64], [typeName =='1' ?49:57, data[alltype[0]]]] :
|
||||
// [[62, typeName =='7'?109.08:108.77], [62, data[alltype[0]]]]
|
||||
// : [];
|
||||
|
||||
// const gz2 = data[alltype[1]] ?
|
||||
// type == "3" ? [[typeName =='5' ?57:71, typeName =='5' ?90.94:84.85], [typeName =='5' ?57:71, data[alltype[1]]]] :
|
||||
// type == "2" ? [[typeName =='3' ?55:68, typeName =='3' ?84.04:81.05], [typeName =='3' ?55:68, data[alltype[1]]]] :
|
||||
// type == "1" ? [[typeName =='1' ?57:67, typeName =='1' ?78.61:82.75], [typeName =='1' ?57:67, data[alltype[1]]]] :
|
||||
// [[72, typeName =='7'?109.32:109.36], [72, data[alltype[1]]]] :
|
||||
// [];
|
||||
|
||||
// const gz3 = data[alltype[2]] ?
|
||||
// type == "3" ? [[71, 92.65], [71, data[alltype[2]]]] :
|
||||
// type == "2" ? [[68, 83.93], [68, data[alltype[2]]]] :
|
||||
// type == "1" ? [[67, 81.38], [67, data[alltype[2]]]] :
|
||||
// [[87, typeName =='7'?109.01:108.87], [87, data[alltype[2]]]] : [];
|
||||
|
||||
|
||||
// const gz4 = data[alltype[3]] ?
|
||||
// type == "3" ? [] :
|
||||
// type == "2" ? [[91,79.57], [91, data[alltype[3]]]] :
|
||||
// type == "1" ? [[89, 79.09], [89, data[alltype[3]]]] :
|
||||
// [[85, 166], [85, data[alltype[3]]]] : [];
|
||||
|
||||
// 心墙中心两点（插入到连线中）
|
||||
const xCenter = type === "3" ? 54 : (type === "2" ? 52.5: (type === "1" ? 53 : 60));
|
||||
// 简化规则：typeName 为 2/4/6 → 渗压管都在右侧；FB0+010/FB0+030（typeName 为 7/8）不绘制心墙连线
|
||||
const rightSideOnly = ['2', '4', '6'].includes(typeName);
|
||||
const skipCenterLine = ['7', '8'].includes(typeName);
|
||||
|
||||
// 左/右管取值（右侧优先 alltype[0]，无则 alltype[1]）
|
||||
const leftSyg = rightSideOnly ? undefined : data[alltype[0]];
|
||||
const rightSyg = rightSideOnly ? (data[alltype[0]] ?? data[alltype[1]]) : data[alltype[1]];
|
||||
|
||||
let midPts = [];
|
||||
if (!skipCenterLine && data?.rz) {
|
||||
if (leftSyg !== undefined && leftSyg !== null) {
|
||||
const A = leftSyg - 1;
|
||||
const B = (rightSyg !== undefined && rightSyg !== null) ? (rightSyg + 0.5) : undefined;
|
||||
if (B !== undefined) {
|
||||
if (A > B) {
|
||||
midPts = [[xCenter, A], [xCenter, B]];
|
||||
} else {
|
||||
midPts = [[xCenter, leftSyg], [xCenter, rightSyg]];
|
||||
}
|
||||
}
|
||||
} else if (rightSyg !== undefined && rightSyg !== null) {
|
||||
// 左边无渗压管：第一个点为（X, 水位-1），第二个点为（X, 右管+0.5）
|
||||
midPts = [[xCenter, data.rz - 1], [xCenter, rightSyg + 0.5]];
|
||||
}
|
||||
}
|
||||
// 管底高程
|
||||
const baseY1 = type == "3" ? (typeName =='5' ?90.50:81.85)
|
||||
: type == "2" ? (typeName =='3' ?84.41:83.78)
|
||||
: type == "1" ? (typeName =='1' ?80.11:78.64)
|
||||
: (typeName =='7'?109.08:108.77);
|
||||
|
||||
const baseY2 = type == "3" ? (typeName =='5' ?90.94:84.85)
|
||||
: type == "2" ? (typeName =='3' ?84.04:81.05)
|
||||
: type == "1" ? (typeName =='1' ?78.61:82.75)
|
||||
: (typeName =='7'?109.32:109.36);
|
||||
|
||||
const baseY3 = type == "3" ? 92.65
|
||||
: type == "2" ? 83.93
|
||||
: type == "1" ? 81.38
|
||||
: (typeName =='7'?109.01:108.87);
|
||||
|
||||
const baseY4 = type == "3" ? null
|
||||
: type == "2" ? 79.57
|
||||
: type == "1" ? 79.09
|
||||
: 166;
|
||||
|
||||
|
||||
// 各管的 X（取你原来的 X）
|
||||
const x1 = type == "3" ? (typeName =='5' ?52:57)
|
||||
: type == "2" ? (typeName =='3' ? 50:55)
|
||||
: type == "1" ? (typeName =='1' ?49:57)
|
||||
: 60;
|
||||
|
||||
const x2 = type == "3" ? (typeName =='5' ?57:71)
|
||||
: type == "2" ? (typeName =='3' ?55:68)
|
||||
: type == "1" ? (typeName =='1' ?57:69)
|
||||
: 74;
|
||||
|
||||
const x3 = type == "3" ? 71
|
||||
: type == "2" ? 68
|
||||
: type == "1" ? 69
|
||||
: 87;
|
||||
|
||||
const x4 = type == "3" ? null
|
||||
: type == "2" ? 91
|
||||
: type == "1" ? 92
|
||||
: 85;
|
||||
|
||||
|
||||
// 管口高程（可能为空）
|
||||
const mouth1 = pieMonth[alltype[0]];
|
||||
const mouth2 = pieMonth[alltype[1]];
|
||||
const mouth3 = pieMonth[alltype[2]];
|
||||
const mouth4 = pieMonth[alltype[3]];
|
||||
|
||||
// 蓝色段：从“管口（若有）/管底”到 UPD 值
|
||||
const gz1 = data[alltype[0]] ? [[x1, baseY1], [x1, data[alltype[0]]]] : [];
|
||||
const gz2 = data[alltype[1]] ? [[x2, baseY2], [x2, data[alltype[1]]]] : [];
|
||||
const gz3 = data[alltype[2]] ? [[x3, baseY3], [x3, data[alltype[2]]]] : [];
|
||||
const gz4 = data[alltype[3]] && x4 !== null ? [[x4, baseY4], [x4, data[alltype[3]]]] : [];
|
||||
|
||||
// 灰色段：从“管底”到“管口”（仅当 mouth 存在）
|
||||
const gk1 = (mouth1 !== null && mouth1 !== undefined) ? [[x1, baseY1], [x1, mouth1]] : [];
|
||||
const gk2 = (mouth2 !== null && mouth2 !== undefined) ? [[x2, baseY2], [x2, mouth2]] : [];
|
||||
const gk3 = (mouth3 !== null && mouth3 !== undefined) ? [[x3, baseY3], [x3, mouth3]] : [];
|
||||
const gk4 = (mouth4 !== null && mouth4 !== undefined && x4 !== null) ? [[x4, baseY4], [x4, mouth4]] : [];
|
||||
|
||||
|
||||
// 将渗压管连起来的线
|
||||
const line = data?.rz ?
|
||||
type == "3" ?
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
...(rightSideOnly ? midPts : []),
|
||||
[typeName == '6' ? 57 : 52, data[alltype[0]]],
|
||||
...(!rightSideOnly ? midPts : []),
|
||||
[typeName =='6' ?71:57, data[alltype[1]]],
|
||||
[71, data[alltype[2]]],
|
||||
|
||||
] :
|
||||
type == "2" ?
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
...(rightSideOnly ? midPts : []),
|
||||
[typeName == '3' ? 50 : 55, data[alltype[0]]],
|
||||
...(!rightSideOnly ? midPts : []),
|
||||
[typeName =='3' ?55:69, data[alltype[1]]],
|
||||
[68, data[alltype[2]]],
|
||||
[91, data[alltype[3]]]
|
||||
] :
|
||||
type == "1" ?
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
...(rightSideOnly ? midPts : []),
|
||||
[typeName == '1' ? 49 : 57, data[alltype[0]]],
|
||||
...(!rightSideOnly ? midPts : []),
|
||||
[typeName =='1' ?57:69, data[alltype[1]]],
|
||||
[68, data[alltype[2]]],
|
||||
[92, data[alltype[3]]]
|
||||
] :
|
||||
[
|
||||
[xValue, data?.rz],
|
||||
...(rightSideOnly ? midPts : []),
|
||||
[60, data[alltype[0]]],
|
||||
...(!rightSideOnly ? midPts : []),
|
||||
[74, data[alltype[1]]],
|
||||
[87, data[alltype[2]]],
|
||||
[85, data[alltype[3]]]
|
||||
]
|
||||
: [];
|
||||
const filteredArray = line.filter(subArray => {
|
||||
return subArray.every(item => item !== null && item !== undefined);
|
||||
});
|
||||
let eopts = {
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
excludeComponents: ['toolbox'],
|
||||
pixelRatio: 2,
|
||||
name:"测值图"
|
||||
},
|
||||
},
|
||||
right: "10%",
|
||||
top:"4%"
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'image',
|
||||
left: '5%',
|
||||
top: 0,
|
||||
bottom:0,
|
||||
z: 1,
|
||||
bounding: 'raw',
|
||||
style: {
|
||||
image: imageUrl,
|
||||
width: 1310,
|
||||
height: 380
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
// id: 'background',
|
||||
left: '5%',
|
||||
bottom:"5%",
|
||||
z: 1,
|
||||
bounding: 'all',
|
||||
style: {
|
||||
image: rule,
|
||||
width: 10,
|
||||
height: 450
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
min: 0,
|
||||
max:100,
|
||||
axisLabel: {
|
||||
show:false,
|
||||
// 坐标轴字体颜色
|
||||
color: textColor,
|
||||
fontSize: 18
|
||||
},
|
||||
axisLine: {
|
||||
show:false,
|
||||
lineStyle: {
|
||||
color: textColor
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
// y轴刻度线
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
// 网格
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
interval:5,
|
||||
// data:[155,160,180,190,210],
|
||||
nameTextStyle: {
|
||||
color: '#333',
|
||||
fontSize: 18,
|
||||
padding: [0, 0, 0, 80]
|
||||
},
|
||||
axisLabel: {
|
||||
// 坐标轴字体颜色
|
||||
color: textColor,
|
||||
fontSize: 18,
|
||||
showMinLabel: false,
|
||||
showMaxLabel: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
// y轴刻度线
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
// 网格
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
// 和大坝坡面重合的线 斜率为0.75
|
||||
{
|
||||
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
origin: "end",
|
||||
color: 'rgba(0, 128, 255, 0.3)' // 设置区域填充颜色
|
||||
},
|
||||
data:[...rz, ...rz1]
|
||||
},
|
||||
{
|
||||
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
markPoint: {
|
||||
data: [{ type: 'max',x:"20%", coord: [xValue, data?.rz] }],
|
||||
symbol: 'pin',
|
||||
symbolSize: [30, 10],
|
||||
itemStyle: {
|
||||
color: '#fff', // 标注点颜色
|
||||
borderColor: '#ffa500', // 标注点边框颜色
|
||||
borderWidth: 0 // 标注点边框宽度
|
||||
},
|
||||
label: {
|
||||
show: true, // 是否显示标签
|
||||
formatter: "库水位" +data?.rz + "m", // 标签格式
|
||||
color: '#5487FF', // 标签文字颜色
|
||||
fontSize: 12, // 标签文字大小
|
||||
}
|
||||
},
|
||||
data:rz
|
||||
},
|
||||
{
|
||||
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
data:rz1
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: { color: 'rgba(154, 160, 166,.4)' },
|
||||
lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
|
||||
data: gk1
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: { color: 'rgba(154, 160, 166,.4)' },
|
||||
lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
|
||||
data: gk2
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: { color: 'rgba(154, 160, 166,.4)' },
|
||||
lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
|
||||
data: gk3
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: { color: 'rgba(154, 160, 166,.4)' },
|
||||
lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
|
||||
data: gk4
|
||||
},
|
||||
// 管位
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
},
|
||||
data: gz1
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
},
|
||||
data: gz2
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
},
|
||||
data: gz3
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width:6
|
||||
},
|
||||
data: gz4
|
||||
},
|
||||
// 管位连接线
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
symbolSize: 10,
|
||||
z: 1,
|
||||
// smooth: 0.6, // 设置平滑度
|
||||
// smoothMonotone: 'x', // 保持 x 方向的单调性
|
||||
itemStyle: {
|
||||
color: '#5487FF'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#5487FF',
|
||||
width: 2,
|
||||
// curveness: 0.5 // 增加曲线程度
|
||||
},
|
||||
data: filteredArray
|
||||
},
|
||||
]
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
export default {
|
||||
// ZB0+130
|
||||
UPD1: 113.66,
|
||||
UPD4: 113.66,
|
||||
UPD7: 105.07,
|
||||
UPD16: 89.54,
|
||||
|
||||
// ZB0+132
|
||||
UPD10: 113.66,
|
||||
UPD13: 105.18,
|
||||
|
||||
// ZB0+250
|
||||
UPD2: 113.98,
|
||||
UPD5: 114.53,
|
||||
UPD8: 104.45,
|
||||
UPD17: 91.33,
|
||||
|
||||
// ZB0+252
|
||||
UPD11: 114.36,
|
||||
UPD14: 104.49,
|
||||
|
||||
// ZB0+370
|
||||
UPD3: 114.12,
|
||||
UPD6: 114.34,
|
||||
UPD12: 104.52,
|
||||
|
||||
// ZB0+372
|
||||
UPD9: 114.28,
|
||||
UPD15: 105.16,
|
||||
|
||||
// FB0+010
|
||||
UPD24: 114.32,
|
||||
UPD26: 114.54,
|
||||
UPD28: 112.28,
|
||||
|
||||
// FB0+030
|
||||
UPD25: 114.32,
|
||||
UPD27: 114.58,
|
||||
UPD29: 112.28,
|
||||
};
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<view
|
||||
:style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }"
|
||||
>
|
||||
<u-navbar
|
||||
title="汛情简报"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize: '18px',
|
||||
}"
|
||||
:height="44"
|
||||
:safeAreaInsetTop="true"
|
||||
leftIconSize="20"
|
||||
leftIconColor="rgb(153, 153, 153)"
|
||||
>
|
||||
</u-navbar>
|
||||
<view
|
||||
class=""
|
||||
style="
|
||||
margin-top: 44px;
|
||||
background-color: #f0f0f0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
"
|
||||
>
|
||||
<view
|
||||
class=""
|
||||
v-for="item in list"
|
||||
style="margin: 10px; background-color: #fff; padding: 10px"
|
||||
>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
<text>标题</text>
|
||||
<text>{{ getTitleDate(item.date) }}汛情简报</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>发布时间</text>
|
||||
<text>{{ item.date }}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<view class="itemNo" style="flex-direction: column">
|
||||
<text>消息内容</text>
|
||||
<view class="textContent">
|
||||
<span style="margin-left: 15px">{{ briefTime(item.date) }}</span
|
||||
>8时，过去24小时最大累计降雨量
|
||||
<span class="xqjb-redColor">{{ item.drp24Sum }}mm</span>(<span
|
||||
class="xqjb-redColor"
|
||||
>{{ item.sumStnm }}</span
|
||||
>)，最大点雨量
|
||||
<span class="xqjb-redColor">{{ item.drp24Max }}mm</span>(<span
|
||||
class="xqjb-redColor"
|
||||
>{{ item.maxStnm }},{{ raimTime(item.maxTm) }}</span
|
||||
>)。当前水库水位
|
||||
<span class="xqjb-redColor">{{ item.rz8 }}m</span
|
||||
>，汛限水位(<span>{{ item.flLowLimLev }}m</span>)，较昨日
|
||||
<span class="xqjb-redColor"
|
||||
>{{ increaseWater(item.rz8, item.rzYesterday8) }}m</span>，库容达
|
||||
<span class="xqjb-redColor">{{ item.w }}万m³</span>。--
|
||||
<span>{{ endDataString(item.date) }}</span>
|
||||
</view>
|
||||
<!-- <u--textarea
|
||||
v-model="item.content"
|
||||
placeholder="请输入内容"
|
||||
disabled
|
||||
></u--textarea> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-calendar
|
||||
:show="show"
|
||||
mode="range"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
model: {
|
||||
stm: "",
|
||||
etm: "",
|
||||
},
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("JSON.parse(options.item)", JSON.parse(options.item));
|
||||
|
||||
this.list.push(JSON.parse(options.item));
|
||||
},
|
||||
methods: {
|
||||
endDataString(date) {
|
||||
return moment(date).subtract(1, "days").format("YYYY-MM-DD 08:00");
|
||||
},
|
||||
increaseWater(rz8, rzYesterday8) {
|
||||
let values = "";
|
||||
if (rz8 && rzYesterday8) {
|
||||
let dob = (rz8 - rzYesterday8).toFixed(2);
|
||||
values = dob > 0 ? `上涨${Math.abs(dob)}` : `下降${Math.abs(dob)}`;
|
||||
}
|
||||
return values;
|
||||
},
|
||||
raimTime(maxTm) {
|
||||
return maxTm ? moment(maxTm).format("D日H时") : "";
|
||||
},
|
||||
briefTime(date) {
|
||||
return date ? moment(date).format("YYYY年M月D日") : "";
|
||||
},
|
||||
getTitleDate(date) {
|
||||
return date ? moment(date).subtract(1, "days").format("YYYY-MM-DD") : "";
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.stm = e[0];
|
||||
this.model.etm = e[1];
|
||||
this.show = false;
|
||||
},
|
||||
cancel() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.xqjb-redColor {
|
||||
color: #db001b;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
.blueTiao {
|
||||
background-color: #007aff;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentItem {
|
||||
margin-top: 15px;
|
||||
.itemC {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.itemNo {
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<view
|
||||
:style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }"
|
||||
>
|
||||
<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=""
|
||||
style="
|
||||
margin-top: 44px;
|
||||
background-color: #f0f0f0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
"
|
||||
>
|
||||
<view style="padding:0 10px;backgroundColor:#fff">
|
||||
<view
|
||||
class="time-ranger"
|
||||
style="padding: 10px; margin-bottom: 0; background-color: #fff"
|
||||
>
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text
|
||||
@click="showTime = true"
|
||||
style="margin-left: 10%; color: #3399ef"
|
||||
>{{ startTime }}</text
|
||||
>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text
|
||||
@click="showTime1 = true"
|
||||
style="margin: 0 10%; color: #3399ef"
|
||||
>{{ endTime }}</text
|
||||
>
|
||||
<view class="search-btn" @click="searchTm"> 搜索 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="height: calc(100vh - 180px); overflow-y: auto"
|
||||
v-if="list.length !== 0"
|
||||
>
|
||||
<view
|
||||
class=""
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
style="margin: 10px; background-color: #fff; padding: 10px"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<view class="item">
|
||||
<view class="align-center">
|
||||
<view class="title">
|
||||
{{ getTitleDate(item.date) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
<span style="margin-left: 30px">{{
|
||||
getBriefTime(item.date)
|
||||
}}</span
|
||||
>8时，过去24小时最大累计降雨量
|
||||
<span class="xqjb-redColor">{{ item.drp24Sum }}mm</span>(<span
|
||||
class="xqjb-redColor"
|
||||
>{{ item.sumStnm }}</span
|
||||
>)，最大点雨量
|
||||
<span class="xqjb-redColor">{{ item.drp24Max }}mm</span>（...
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="
|
||||
height: calc(100vh - 150px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
"
|
||||
v-else
|
||||
>
|
||||
<image src="../../static/empty.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="stm"
|
||||
mode="datetime"
|
||||
@confirm="showTime = false"
|
||||
@cancel="showTime = false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="etm"
|
||||
mode="datetime"
|
||||
@confirm="showTime1 = false"
|
||||
@cancel="showTime1 = false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
const startData = moment().subtract(7, "days").format("YYYY-MM-DD");
|
||||
const endData = moment().format("YYYY-MM-DD");
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: moment().startOf("year").valueOf(),
|
||||
maxDate: moment().valueOf(),
|
||||
show: false,
|
||||
showTime: false,
|
||||
showTime1: false,
|
||||
start: startData,
|
||||
end: endData,
|
||||
stm: startData,
|
||||
etm: endData,
|
||||
userList: uni.getStorageSync("value").data,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
onShow(options) {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
computed: {
|
||||
startTime: function () {
|
||||
return this.stm ? moment(this.stm).format("YYYY-MM-DD") : this.start;
|
||||
},
|
||||
endTime: function () {
|
||||
return this.etm ? moment(this.etm).format("YYYY-MM-DD") : this.end;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTitleDate(date) {
|
||||
return date ? moment(date).subtract(1, "days").format("YYYY-MM-DD") : "";
|
||||
},
|
||||
getBriefTime(date) {
|
||||
return date ? moment(date).format("YYYY年M月D日") : "";
|
||||
},
|
||||
searchTm() {
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
const startDate1 = moment(this.stm).format("YYYY-MM-DD");
|
||||
const endDate1 = moment(this.etm).format("YYYY-MM-DD");
|
||||
uni.$http
|
||||
.get(
|
||||
`/gunshiApp/tsg/resBrief/getResBriefList?startDate=${startDate1}&endDate=${endDate1}`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.list = res.data.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.start = e[0];
|
||||
this.model.end = e[1];
|
||||
this.show = false;
|
||||
},
|
||||
cancel() {
|
||||
this.show = false;
|
||||
},
|
||||
toDetail(item) {
|
||||
console.log(item);
|
||||
uni.navigateTo({
|
||||
url: "/pages/briefList/detail/index?item=" + JSON.stringify(item),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-input-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item {
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.blueTiao {
|
||||
background-color: #2a7efa;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
.itemC {
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
.xqjb-redColor {
|
||||
color: #db001b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<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>
|
||||
<uniSh v-if="tabsVal==='uniSh'"></uniSh>
|
||||
<uniSk v-if="tabsVal==='uniSk'"></uniSk>
|
||||
<uniHd v-if="tabsVal==='uniHd'"></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:'uniSk'
|
||||
},
|
||||
{
|
||||
name:'河道预警',
|
||||
components:'uniHd'
|
||||
},
|
||||
{
|
||||
name:'山洪预警',
|
||||
components:'uniSh'
|
||||
},
|
||||
],
|
||||
tabsVal:'uniSk'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
tabsChange(item) {
|
||||
this.tabsVal = item.components
|
||||
console.log(this.tabsVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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,259 @@
|
|||
<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'
|
||||
: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="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() {
|
||||
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()
|
||||
}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}`
|
||||
})
|
||||
},
|
||||
},
|
||||
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,328 @@
|
|||
<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'
|
||||
: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="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() {
|
||||
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()
|
||||
}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) // 跳转到对应路径的页面
|
||||
});
|
||||
},
|
||||
},
|
||||
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,262 @@
|
|||
<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'
|
||||
: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="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() {
|
||||
|
||||
try{
|
||||
const params = {
|
||||
sources:this.check1,
|
||||
types:this.check2
|
||||
}
|
||||
const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/res/warn',params)
|
||||
console.log(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)
|
||||
}
|
||||
},
|
||||
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}`
|
||||
})
|
||||
},
|
||||
},
|
||||
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,316 @@
|
|||
<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'
|
||||
: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="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,332 @@
|
|||
<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'
|
||||
: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="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,320 @@
|
|||
<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'
|
||||
: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="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,151 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;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{
|
||||
.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
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,606 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 个人信息 -->
|
||||
<view class="info">
|
||||
<div class="left">
|
||||
<div class="icon">
|
||||
<image
|
||||
style="width: 100%; height: 100%; border-radius: 50%"
|
||||
:src="default_src"
|
||||
mode="aspectFill"
|
||||
>
|
||||
</image>
|
||||
</div>
|
||||
<div class="info_name">
|
||||
<div v-if="userList.userName">{{ userList.nickName }}</div>
|
||||
<div v-if="userList.dept">
|
||||
{{ userList.dept.deptName || "" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon
|
||||
name="bell-fill"
|
||||
size="30"
|
||||
color="#fff"
|
||||
@click="todetailmessgae()"
|
||||
>
|
||||
</u-icon>
|
||||
<u-badge
|
||||
v-if="messagelist"
|
||||
bgColor=" #de2433"
|
||||
:offset="[25, 20]"
|
||||
:value="messagelist.length"
|
||||
:absolute="true"
|
||||
></u-badge>
|
||||
</div>
|
||||
</view>
|
||||
<!-- nav -->
|
||||
<view class="navBar" style="display: flex; flex-wrap: wrap">
|
||||
<div class="navList" v-for="(item, index) in getNavList" :key="index">
|
||||
<div
|
||||
@click="myNavigateTo(item.url, item.value)"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div class="navIcon">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item.icon"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<div
|
||||
class="readStatus"
|
||||
v-show="
|
||||
(warnStatus && item.key == 2) ||
|
||||
(handleStatus && item.key == 6) ||
|
||||
(xcStatus && item.key == 5)
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div class="navTxt">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="warn" @click="todetailBriefmessgae()">
|
||||
<view style="display: flex; align-items: center;justify-content: space-between;">
|
||||
<view class="xqjb-title-left">
|
||||
<view
|
||||
style="
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 16rpx;
|
||||
vertical-align: middle;
|
||||
background-color: #0297d7;
|
||||
"
|
||||
></view
|
||||
><span style="color: #000">汛情简报</span>
|
||||
</view>
|
||||
<view >{{startDate}}</view>
|
||||
</view>
|
||||
<view class="textContent">
|
||||
<span style="margin-left: 30px;">{{briefTime}}</span>8时，过去24小时最大累计降雨量
|
||||
<span class="xqjb-redColor" >{{resBriefObj.drp24Sum}}mm</span>(<span class="xqjb-redColor">{{resBriefObj.sumStnm}}</span>)，最大点雨量
|
||||
<span class="xqjb-redColor">{{resBriefObj.drp24Max}}mm</span>(<span class="xqjb-redColor">{{resBriefObj.maxStnm}}，{{raimTime}}</span>)。当前水库水位
|
||||
<span class="xqjb-redColor">{{resBriefObj.rz8}}m</span>，汛限水位(<span>{{resBriefObj.flLowLimLev}}m</span>)，较昨日
|
||||
<span class="xqjb-redColor">{{increaseWater}}m</span>，库容达
|
||||
<span class="xqjb-redColor">{{resBriefObj.w}}万m³</span>。--
|
||||
<span>{{endDataString}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="warn">
|
||||
<sk-info />
|
||||
</view>
|
||||
<view class="warn1" v-for="item in Ylzlist" :key="item.stnm">
|
||||
<ylz-list :item="item" />
|
||||
</view>
|
||||
<view class="warn1" v-for="item in swzList" :key="item.stcd">
|
||||
<SwzList :item="item" />
|
||||
</view>
|
||||
<view
|
||||
class="info_24"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '5px 0',
|
||||
margin: '0',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
:style="{ width: '20px', height: '20px', marginRight: '10px' }"
|
||||
src="../../static/logoc.png"
|
||||
></image>
|
||||
<div>技术支持: 湖北鲧石物联科技有限公司</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
const warnStm = moment().subtract(1, "days").format("YYYY-MM-DD HH:mm:ss");
|
||||
const warnetm = moment().format("YYYY-MM-DD HH:mm:ss");
|
||||
const stm = moment().startOf("year").format("YYYY-MM-DD HH:mm:ss");
|
||||
const etm = moment().format("YYYY-MM-DD HH:mm:ss");
|
||||
const startDate = moment().subtract(1,'days').format("YYYY-MM-DD");
|
||||
const endDate = moment().format("YYYY-MM-DD");
|
||||
import SkInfo from "../skInfo/index.vue";
|
||||
import YlzList from "../ylzList/index.vue";
|
||||
import SwzList from "../sws/index.vue";
|
||||
let timer = null;
|
||||
export default {
|
||||
components: {
|
||||
SkInfo,
|
||||
YlzList,
|
||||
SwzList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Ylzlist: [],
|
||||
userList: uni.getStorageSync("value"),
|
||||
default_src: uni.getStorageSync("avatar"),
|
||||
messagelist: [],
|
||||
xcStatus: false,
|
||||
ylzList: [],
|
||||
swzList: [],
|
||||
resBriefObj:{},
|
||||
startDate,
|
||||
endDate,
|
||||
warnStatus: false, //预警
|
||||
handleStatus: false, //问题处理
|
||||
};
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getresBriefList();
|
||||
this.getYjData();
|
||||
this.getXcrwData();
|
||||
this.getHandleData();
|
||||
uni.$showMsg("刷新成功");
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
computed: {
|
||||
getNavList() {
|
||||
return [
|
||||
{
|
||||
value: "综合监视",
|
||||
key: 1,
|
||||
icon: "../../static/tabs/zhjs.png",
|
||||
url: "/pages/zhjs/index",
|
||||
},
|
||||
{
|
||||
value: "预警",
|
||||
key: 2,
|
||||
icon: "../../static/tabs/yujing_icon@2x2.png",
|
||||
url: "/pages/yj/index",
|
||||
},
|
||||
{
|
||||
value: "视频监控",
|
||||
key: 3,
|
||||
icon: "../../static/tabs/spjk.png",
|
||||
url: "/pages/spjk/index",
|
||||
},
|
||||
{
|
||||
value: "安全监测",
|
||||
key: 4,
|
||||
icon: "../../static/tabs/aqjc.png",
|
||||
url: "/pages/newAqjc/index",
|
||||
},
|
||||
{
|
||||
value: "巡查任务",
|
||||
key: 5,
|
||||
icon: "../../static/tabs/xcrw.png",
|
||||
url: "/pages/xcrw/index",
|
||||
},
|
||||
{
|
||||
value: "问题处理",
|
||||
key: 6,
|
||||
icon: "../../static/tabs/wtcl.png",
|
||||
url: "/pages/wtcl/index",
|
||||
},
|
||||
];
|
||||
},
|
||||
briefTime(){
|
||||
return this.resBriefObj.date ? moment(this.resBriefObj.date).format('YYYY年M月D日') :''
|
||||
},
|
||||
raimTime(){
|
||||
return this.resBriefObj.maxTm ? moment(this.resBriefObj.maxTm).format('D日H时') :''
|
||||
},
|
||||
increaseWater(){
|
||||
const {rz8,rzYesterday8} = this.resBriefObj
|
||||
let values = ''
|
||||
if(rz8 && rzYesterday8){
|
||||
let dob = Math.abs((rz8-rzYesterday8).toFixed(2))
|
||||
values = dob > 0? `上涨${Math.abs(dob)}`:`下降${Math.abs(dob)}`
|
||||
}
|
||||
return values
|
||||
},
|
||||
endDataString(){
|
||||
return moment(this.endDate).format('YYYY-MM-DD 08:00');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getYlzList() {
|
||||
uni.$http.post("/gunshiApp/tsg/stPptnRReal/list").then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.Ylzlist = res.data.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取汛情简报数据
|
||||
getresBriefList() {
|
||||
uni.$http.get(`/gunshiApp/tsg/resBrief/getResBriefList?startDate=${startDate}&endDate=${endDate}`).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.resBriefObj = res.data.data[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
uni.$http
|
||||
.post("/gunshiApp/tsg/messageCenter/list", {
|
||||
start: "",
|
||||
end: "",
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.messagelist = res?.data?.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
getSwList() {
|
||||
uni.$http
|
||||
.post("/gunshiApp/tsg/reservoir/water/listV2", {
|
||||
sources: ["SW", "SK"],
|
||||
})
|
||||
.then((res) => {
|
||||
this.swzList = res.data.data;
|
||||
});
|
||||
},
|
||||
todetailmessgae() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/messageList/index",
|
||||
});
|
||||
},
|
||||
todetailBriefmessgae() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/briefList/index",
|
||||
});
|
||||
},
|
||||
async setInsert(menu2) {
|
||||
try {
|
||||
const params = {
|
||||
createId: uni.getStorageSync("value").userId,
|
||||
loginType: 1,
|
||||
menu1: "首页",
|
||||
menu2: menu2 || "首页",
|
||||
};
|
||||
const { data } = await uni.$http.post(
|
||||
"/gunshiApp/tsg/visitMenuLog/insert",
|
||||
params
|
||||
);
|
||||
} catch (error) {}
|
||||
},
|
||||
myNavigateTo(url, menu2) {
|
||||
uni.navigateTo({
|
||||
url: url, // 跳转到对应路径的页面
|
||||
});
|
||||
this.setInsert(menu2);
|
||||
},
|
||||
|
||||
// 问题处理
|
||||
async getHandleData() {
|
||||
let params = {
|
||||
pageSo: {
|
||||
pageSize: 10,
|
||||
pageNumber: 1,
|
||||
},
|
||||
dateTimeRangeSo: {
|
||||
start: stm,
|
||||
end: etm,
|
||||
},
|
||||
isHandle: 0,
|
||||
inspectUserId: uni.getStorageSync("value").userId,
|
||||
};
|
||||
try {
|
||||
const res = await uni.$http.post(
|
||||
"/gunshiApp/tsg/inspect/detail/page",
|
||||
params
|
||||
);
|
||||
if (res.data.data.records?.length > 0) {
|
||||
this.handleStatus = true;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 预警
|
||||
async getYjData() {
|
||||
const params = {
|
||||
start: warnStm,
|
||||
end: warnetm,
|
||||
};
|
||||
try {
|
||||
const res = await uni.$http.post(
|
||||
"/gunshiApp/tsg/stQxWarnR/home/warn",
|
||||
params
|
||||
);
|
||||
const { flowWarn, pressWarn, qxWarn, shiftWarn } = res.data.data;
|
||||
const arr = [...flowWarn, ...pressWarn, ...qxWarn, ...shiftWarn];
|
||||
if (arr?.length > 0) {
|
||||
this.warnStatus = true;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 巡查任务
|
||||
async getXcrwData() {
|
||||
const userId = uni.getStorageSync("value").userId;
|
||||
const params = {
|
||||
dateRangeSo: {
|
||||
start: stm,
|
||||
end: etm,
|
||||
},
|
||||
inspectUserId: userId,
|
||||
statusList: [0, 1],
|
||||
};
|
||||
try {
|
||||
const res = await uni.$http.post(
|
||||
"/gunshiApp/tsg/inspect/task/list",
|
||||
params
|
||||
);
|
||||
if (res.data.data?.length > 0) {
|
||||
this.xcStatus = true;
|
||||
} else {
|
||||
this.xcStatus = false;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.getYlzList();
|
||||
this.getresBriefList();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
var that = this;
|
||||
that.getList();
|
||||
this.getXcrwData();
|
||||
timer = setInterval(function () {
|
||||
that.getList();
|
||||
}, 10000);
|
||||
this.getHandleData();
|
||||
this.setInsert();
|
||||
this.getYjData();
|
||||
this.getSwList();
|
||||
this.getresBriefList();
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.xqjb-redColor{
|
||||
color:#db001b
|
||||
}
|
||||
.xqjb-title-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background-color: #f3f5f8;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.info {
|
||||
height: 100rpx;
|
||||
background-color: #007afd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
color: #007afd;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.info_name {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navBar {
|
||||
padding: 13px;
|
||||
padding-bottom: 0;
|
||||
/* text-align: center; */
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
// justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.navList {
|
||||
text-align: center;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
position: relative;
|
||||
width: 82px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.readStatus {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 17px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #de2433;
|
||||
}
|
||||
|
||||
.warn {
|
||||
padding: 18rpx 20rpx;
|
||||
text-align: left;
|
||||
margin-bottom: 12rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.warn1 {
|
||||
padding: 18rpx 20rpx;
|
||||
text-align: left;
|
||||
margin-bottom: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info_24 {
|
||||
width: 100%;
|
||||
// position: fixed;
|
||||
// padding: 15px;
|
||||
background-color: #fff;
|
||||
// margin-bottom: 12rpx;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title .line {
|
||||
border: 2px solid #3380ff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.title .h4 {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #121b3d;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #a2a2a2;
|
||||
}
|
||||
|
||||
.g1 {
|
||||
color: #545556;
|
||||
}
|
||||
|
||||
.ye {
|
||||
color: #ff1717;
|
||||
/* font-weight: 600; */
|
||||
}
|
||||
|
||||
.b1 {
|
||||
color: #3380ff;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.uni-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leftTab {
|
||||
width: 80px;
|
||||
/* border-bottom: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
.rightTab {
|
||||
width: 80px;
|
||||
/* border: 1px solid #ccc;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-left: 0; */
|
||||
}
|
||||
|
||||
.activetextTypeTab,
|
||||
.activetextTypeTab:hover {
|
||||
border-bottom: 3rpx solid #2286f6;
|
||||
color: #026be0;
|
||||
}
|
||||
|
||||
.table_div {
|
||||
widows: 100%;
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh - 24px);
|
||||
flex: 1;
|
||||
padding-top: 30px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
/*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: 56rpx;
|
||||
color: #2f4056;
|
||||
background: #f5f6f8;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 56rpx;
|
||||
border-bottom: 1px solid #e5e9f2;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/*table样式 end*/
|
||||
.noData {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<div class="img">
|
||||
<image style="width: 100%; height: 100%" src="../../static/images/bg_img.png" mode="scaleToFill"></image>
|
||||
</div>
|
||||
<view class="user-title">
|
||||
<text class="sub">用户登录</text>
|
||||
<text class="line"></text>
|
||||
</view>
|
||||
<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="login(formData)">
|
||||
登录
|
||||
</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CryptoJS from 'crypto-js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
username: '',
|
||||
password: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (uni.getStorageSync('loginChecked') === true) {
|
||||
this.formData = {
|
||||
username: uni.getStorageSync('username'),
|
||||
password: uni.getStorageSync('password'),
|
||||
checked: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新版本
|
||||
init() {
|
||||
this.checkVersion();
|
||||
},
|
||||
// 检查版本更新情况
|
||||
async checkVersion() {
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.get("/gunshiApp/tsg/appVersionRecord/latest");
|
||||
if (data.code == 200) {
|
||||
const selfVersionCode = uni.getSystemInfoSync().appWgtVersion //当前App版本号
|
||||
const newVersionCode = data.data.version; //线上最新版本号
|
||||
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) {
|
||||
formData.checked = !formData.checked
|
||||
},
|
||||
login(formData) {
|
||||
//loading
|
||||
uni.showLoading({
|
||||
title: '努力登录中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
//MD5加密
|
||||
const encryptData = data => {
|
||||
const encryptedData = CryptoJS.MD5(data).toString()
|
||||
return encryptedData
|
||||
}
|
||||
|
||||
//创建提交表单
|
||||
let postForm = {
|
||||
username: formData.username,
|
||||
password: formData.password
|
||||
}
|
||||
|
||||
//记住密码功能
|
||||
if (formData.checked === true) {
|
||||
uni.setStorageSync('loginChecked', true)
|
||||
uni.setStorageSync('username', postForm.username)
|
||||
uni.setStorageSync('password', formData.password)
|
||||
uni.setStorageSync('secretKey', postForm.secretKey)
|
||||
} else {
|
||||
uni.setStorageSync('loginChecked', false)
|
||||
uni.removeStorageSync('username')
|
||||
uni.removeStorageSync('secretKey')
|
||||
uni.removeStorageSync('password')
|
||||
this.formData.username = ''
|
||||
this.formData.password = ''
|
||||
}
|
||||
|
||||
//提交表单
|
||||
uni.$http.post('/gunshiApp/tsg/login', postForm).then(res => {
|
||||
uni.showLoading({
|
||||
title: '努力登录中...',
|
||||
mask: true
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
//localStorage保存token
|
||||
|
||||
if (res.data.token) {
|
||||
uni.setStorageSync('Gs-Token', res.data.token)
|
||||
uni.$http.get('/gunshiApp/tsg/getInfo').then(res => {
|
||||
this.getImgFlow(res.data.user.avatar)
|
||||
uni.setStorageSync('value', res.data.user)
|
||||
setTimeout(function () {
|
||||
uni.hideLoading()
|
||||
uni.reLaunch({
|
||||
url: '/pages/homeIndex/index'
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.data.description,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
}, 1000)
|
||||
clearTimeout()
|
||||
}
|
||||
})
|
||||
},
|
||||
getImgFlow(imgUrl) {
|
||||
if (imgUrl) {
|
||||
uni.request({
|
||||
url: uni.$http.baseUrl +
|
||||
`/gunshiApp/tsg/common/download/resource?resource=${imgUrl}`,
|
||||
responseType: 'arraybuffer',
|
||||
success: (res) => {
|
||||
// 将arraybuffer转换为Base64编码
|
||||
let base64 = uni.arrayBufferToBase64(res.data);
|
||||
const p = 'data:image/png;base64,' + base64;
|
||||
uni.setStorageSync("avatar", p)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.setStorageSync('avatar', "../../static/tabs/touxiang.png")
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
background-color: #f3f5f8;
|
||||
}
|
||||
|
||||
.img {
|
||||
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
margin-top: 0vh;
|
||||
/* background-color: red; */
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 10vh;
|
||||
width: 80%;
|
||||
height: 8vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user-title {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sub {
|
||||
font-size: 28px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 5px;
|
||||
left: 20px;
|
||||
bottom: -10px;
|
||||
background-color: #00a8ff;
|
||||
border-radius: 15%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',backgroundColor: '#f0f0f0',}">
|
||||
<u-navbar title="消息中心" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<view class="" style="margin-top: 44px;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
|
||||
<view class="" v-for="item in list" style="margin: 10px;background-color: #fff;padding: 10px;">
|
||||
|
||||
<view class="contentItem">
|
||||
|
||||
<view class="itemC">
|
||||
<text>标题</text>
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>发布时间</text>
|
||||
<text>{{item.publishTime}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>发布人</text>
|
||||
<text>{{item.publishUserName}}</text>
|
||||
</view>
|
||||
<!-- <view class="itemC">
|
||||
<text>优先级</text>
|
||||
<text>{{item.xjx}}</text>
|
||||
</view> -->
|
||||
|
||||
<view class="itemNo" style="flex-direction: column;">
|
||||
<text>消息内容</text>
|
||||
<u--textarea v-model="item.content" placeholder="请输入内容" disabled ></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-calendar :show="show" mode="range" @confirm="confirm" @cancel='cancel'></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
model: {
|
||||
stm: '',
|
||||
etm: ''
|
||||
},
|
||||
list: [
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(options){
|
||||
this.list.push(JSON.parse(options.item))
|
||||
this.yd(JSON.parse(options.item))
|
||||
},
|
||||
methods: {
|
||||
yd(item){
|
||||
uni.$http.post('/gunshiApp/tsg/messageCenter/update',{...item,status:1})
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.stm = e[0]
|
||||
this.model.etm = e[1]
|
||||
this.show = false
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
.blueTiao{
|
||||
background-color: #007aff;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.contentItem{
|
||||
.itemC{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.itemNo{
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden',backgroundColor: '#f0f0f0'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar title="消息中心" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
|
||||
}" rightText="一键已读" @rightClick='rightClick' :height='44' :safeAreaInsetTop=true leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<view class="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
|
||||
<view style="padding:0 10px,backgroundColor:#fff">
|
||||
<view class="time-ranger" style="padding:10px;background-color: #fff;">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{startTime}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{endTime}}</text>
|
||||
<view class="search-btn" @click="searchTm">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:calc(100vh - 180px); overflow-y:auto;" v-if="list.length !== 0">
|
||||
<view class="" v-for="(item,index) in list" :key="index" style="margin: 10px;background-color: #fff;padding: 10px;" @click="toDetail(item)">
|
||||
<view class="item">
|
||||
<view class="align-center">
|
||||
<view class="blueTiao">
|
||||
|
||||
</view>
|
||||
<view class="title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="titleRight" >
|
||||
{{item.publishTime}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
{{item.content}}
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;"
|
||||
v-else>
|
||||
<image src="../../static/empty.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<u-datetime-picker :show="showTime" v-model="stm" mode="datetime" @confirm="showTime=false"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
@cancel="showTime=false"></u-datetime-picker>
|
||||
<u-datetime-picker :show="showTime1" v-model="etm" mode="datetime" @confirm="showTime1=false"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
@cancel="showTime1=false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate:moment().startOf('year').valueOf(),
|
||||
maxDate:moment().valueOf(),
|
||||
show: false,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
start: '请选择开始时间',
|
||||
end: '请选择结束时间',
|
||||
stm:'',
|
||||
etm:'',
|
||||
userList: uni.getStorageSync('value').data,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
onShow(options) {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
computed:{
|
||||
startTime:function (){
|
||||
return this.stm?moment(this.stm).format('YYYY-MM-DD HH:mm:ss'):this.start
|
||||
},
|
||||
endTime:function (){
|
||||
return this.etm?moment(this.etm).format('YYYY-MM-DD HH:mm:ss'):this.end
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rightClick() {
|
||||
uni.$http.get('/gunshiApp/tsg/messageCenter/all/read', {
|
||||
receiveUserId: uni.getStorageSync('value').userId
|
||||
}).then(res => {
|
||||
|
||||
if (res.data.code == 200) {
|
||||
this.getList()
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
searchTm() {
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
console.log(111);
|
||||
uni.$http.post('/gunshiApp/tsg/messageCenter/list', {
|
||||
start:this.stm?moment(this.stm).format('YYYY-MM-DD HH:mm:ss'):'',
|
||||
end:this.etm?moment(this.etm).format('YYYY-MM-DD HH:mm:ss'):''
|
||||
}).then(res => {
|
||||
|
||||
if (res.data.code == 200) {
|
||||
this.list = res.data.data
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.start = e[0]
|
||||
this.model.end = e[1]
|
||||
this.show = false
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
toDetail(item) {
|
||||
console.log(item);
|
||||
uni.navigateTo({
|
||||
url: '/pages/messageList/detail/index?item=' + JSON.stringify(item),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.uni-input-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item {
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.blueTiao {
|
||||
background-color: #2a7efa;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
.itemC {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<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.oldPassword" placeholder="请输入原密码" class="password"/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="新密码" :required="true" class="form">
|
||||
<uni-easyinput type="password" v-model="formData.newPassword" placeholder="请输入新密码" class="password"/>
|
||||
</uni-forms-item>
|
||||
<!-- <uni-forms-item label="再次输入新密码" label-width="120px" :required="true" class="form">
|
||||
<uni-easyinput type="password" v-model="formData.newPassword" 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: '',
|
||||
// },
|
||||
formData: {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
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.put(`/gunshiApp/tsg/system/user/profile/updatePwd?oldPassword=${formData.oldPassword}&newPassword=${formData.newPassword}`).then(res=>{
|
||||
console.log(res);
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: "修改成功，即将重新登录",
|
||||
icon:'none',
|
||||
duration: 2000
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
// url:'/pages/homeIndex/index'
|
||||
})
|
||||
},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;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 50vh;
|
||||
width: 92%;
|
||||
height: 6vh;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: #007afd;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'auto'}">
|
||||
<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="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
|
||||
<view style="margin: 10px;background-color: #fff;padding: 10px;">
|
||||
<view class="item">
|
||||
<view class="blueTiao">
|
||||
|
||||
</view>
|
||||
<view class="title">
|
||||
巡检问题信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
|
||||
<view class="itemC">
|
||||
<text>巡查人</text>
|
||||
<text>{{queItem.inspectUserName}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>巡查时间</text>
|
||||
<text>{{queItem.finishTime}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>任务标题</text>
|
||||
<text>{{queItem.taskTitle}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>巡检点</text>
|
||||
<text>{{queItem.name}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>巡检项</text>
|
||||
<text>{{queItem.itemDesc}}</text>
|
||||
</view>
|
||||
<view class="itemNo" style="flex-direction: column;">
|
||||
<text>巡检问题描述</text>
|
||||
<u--textarea v-model="queItem.problemDesc" placeholder="请输入内容" disabled ></u--textarea>
|
||||
</view>
|
||||
<view class="itemNo" style="flex-direction: column;">
|
||||
<text>巡检图片</text>
|
||||
<view class="" v-for="item in queItem.inspectPics">
|
||||
<image :src="item.url" style="width: 80px;height: 80px;margin: 5px;" @click="previewImage(item)"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="itemNo" style="flex-direction: column;">
|
||||
<text>巡检视频</text>
|
||||
<view class="" v-for="item in queItem.inspectVideos">
|
||||
<video :src="item.url" style="width: 80px;height: 80px;margin: 5px;" show-fullscreen-btn></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin: 10px;background-color: #fff;padding: 10px;" class="">
|
||||
<u--form labelPosition="left" :model="o" ref="uForm" label-width='80px'>
|
||||
<view class="itemCc">
|
||||
<u-form-item label="处理人" prop="handleUserName" borderBottom required >
|
||||
<u--input v-model="queItem.handleUserName" disabled disabledColor="#ffffff"
|
||||
placeholder="" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理时间" prop="handleTime" borderBottom required>
|
||||
<u--input v-model="queItem.handleTime" disabled disabledColor="#ffffff"
|
||||
placeholder="" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理内容" prop="handleDesc" borderBottom required labelPosition='top'>
|
||||
<u--textarea v-model="queItem.handleDesc" disabled placeholder="请输入内容" ></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理图片" prop="handlePics" borderBottom required labelPosition='top'>
|
||||
<u-upload accept="image" :fileList="queItem.handlePics || []" disabled
|
||||
name="handlePics" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理视频" prop="handleVideos" borderBottom labelPosition='top'>
|
||||
<u-upload accept="video" :fileList="queItem.handleVideos" disabled
|
||||
name="handleVideos" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
model: {
|
||||
stm: '',
|
||||
etm: ''
|
||||
},
|
||||
customStyle: {
|
||||
background: '#000'
|
||||
},
|
||||
queItem:{},
|
||||
list: [
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.queItem = JSON.parse(options.item)
|
||||
|
||||
this.queItem.handleVideos?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
this.queItem.handlePics?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
this.queItem.inspectVideos?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
this.queItem.inspectPics?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
console.log(this.queItem);
|
||||
},
|
||||
methods: {
|
||||
previewImage(item){
|
||||
uni.previewImage({
|
||||
urls: [item.url],
|
||||
longPressActions: {
|
||||
itemList: ['发送给朋友', '保存图片', '收藏'],
|
||||
success: function(data) {
|
||||
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
.blueTiao{
|
||||
background-color: #007aff;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.itemCc{
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// display: flex;
|
||||
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.contentItem{
|
||||
.itemC{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #303133;;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.itemNo{
|
||||
color: #303133;;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<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>
|
||||
<view class=""
|
||||
style="margin-top: 50px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;overflow: auto;">
|
||||
<view style="padding:0 10px;backgroundColor:#fff">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{startTime}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{endTime}}</text>
|
||||
<view class="search-btn" @click="searchTm">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:calc(100vh - 150px);overflow: auto;" v-if='list.length !== 0'>
|
||||
<view class="" v-for="(item,index) in list" :key="index" @click="toDetail(item)"
|
||||
style="margin:10px;background-color: #fff;padding: 10px;">
|
||||
<view class="item">
|
||||
<!-- {{item.title}} -->
|
||||
<view class="title">
|
||||
{{item.taskTitle}}
|
||||
</view>
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{item.isHandle==1?'已处理':'待处理'}}
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
<text>巡检项</text>
|
||||
<text>{{item.itemDesc}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>巡查人</text>
|
||||
<text>{{item.inspectUserName}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>巡查时间</text>
|
||||
<text>{{item.finishTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;" v-else>
|
||||
<image src="../../../../static/empty.png" mode="" ></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-datetime-picker :show="showTime" v-model="stm" mode="datetime" @confirm="showTime=false"
|
||||
@cancel="showTime=false"></u-datetime-picker>
|
||||
<u-datetime-picker :show="showTime1" v-model="etm" mode="datetime" @confirm="showTime1=false"
|
||||
@cancel="showTime1=false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
showTime: false,
|
||||
showTime1: false,
|
||||
minDate:moment().startOf('year').valueOf(),
|
||||
maxDate:moment().valueOf(),
|
||||
start: '请选择开始时间',
|
||||
end: '请选择结束时间',
|
||||
stm:moment().startOf('year').format('YYYY-MM-DD'),
|
||||
etm:moment().format('YYYY-MM-DD'),
|
||||
customStyle: {
|
||||
background: '#000'
|
||||
},
|
||||
list: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
startTime: function () {
|
||||
|
||||
return this.stm ? moment(this.stm).format('YYYY-MM-DD') : this.start
|
||||
},
|
||||
endTime: function () {
|
||||
return this.etm ? moment(this.etm).format('YYYY-MM-DD') : this.end
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchTm() {
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
console.log(uni.getStorageSync('value'));
|
||||
let params = {
|
||||
"pageSo": {
|
||||
"pageSize": 999,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"dateTimeRangeSo": {
|
||||
start:this.stm?moment(this.stm).format('YYYY-MM-DD 00:00:00'):'',
|
||||
end:this.etm?moment(this.etm).format('YYYY-MM-DD 23:59:59'):''
|
||||
},
|
||||
"isHandle": 1,
|
||||
"handleUserId": uni.getStorageSync('value').userId
|
||||
}
|
||||
uni.$http.post('/gunshiApp/tsg/inspect/detail/page', params).then(res => {
|
||||
this.list = res.data.data.records
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
this.model.start = e[0]
|
||||
this.model.end = e[1]
|
||||
this.show = false
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
toDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mypage/compents/wtcl/detail/index?item=' + JSON.stringify(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
.itemC {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form labelPosition="left" :model="model1" ref="uForm" >
|
||||
<u-form-item label="管护类型" prop="maintainType" borderBottom ref="item1"
|
||||
required
|
||||
labelPosition='top'
|
||||
labelWidth="100px">
|
||||
<u--input v-model="model1.maintainName" disabled disabledColor="#ffffff" placeholder="请选择管护类型"
|
||||
border="none" ></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容说明" prop="maintainContent" borderBottom labelPosition='top' required labelWidth="100px">
|
||||
<u--textarea v-model="model1.maintainContent" placeholder="请输入内容" disabled></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item label="现场图片" prop="pics" borderBottom labelPosition='top' labelWidth="100px">
|
||||
<u-upload :fileList="model1.pics" name="pics" multiple disabled
|
||||
multiple accept='image' :maxCount="10"></u-upload>
|
||||
|
||||
</u-form-item>
|
||||
<u-form-item label="现场视频" prop="videos" borderBottom labelPosition='top' labelWidth="100px">
|
||||
<u-upload :fileList="model1.videos" name="videos" multiple disabled
|
||||
multiple accept='video' :maxCount="10"></u-upload>
|
||||
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
formData:Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSex: false,
|
||||
fileListpics: [],
|
||||
fileListvideos: [],
|
||||
model1: {
|
||||
maintainContent: "",
|
||||
maintainType: '',
|
||||
pics: [],
|
||||
videos: []
|
||||
},
|
||||
actions: [{
|
||||
value: 1,
|
||||
name: "溢洪道清障"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: "除草除杂"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: "设备养护"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
name: "环境清洁"
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: "危险提示"
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
name: "其他"
|
||||
},
|
||||
],
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.model1 = this.formData
|
||||
this.model1.maintainName = this.actions.find(item=>item.value == this.formData.maintainType).name
|
||||
this.model1.pics?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
this.model1.videos?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
console.log(this.model1,'83498943r80432',this.formData);
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
onReady() {
|
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form labelPosition="left" :model="formData" label-width='80px'>
|
||||
<u-form-item label="上报人" prop="reportUserName" borderBottom ref="item1">
|
||||
<u--input v-model="formData.reportUserName" border="none" disabled></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="上报时间" prop="reportTime" borderBottom ref="item1">
|
||||
<u--input v-model="formData.reportTime" border="none" disabled></u--input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
props:{
|
||||
formData:Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// formData: {
|
||||
// reportUserName:uni.getStorageSync('value').userName,
|
||||
// reportTime:moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// userId:uni.getStorageSync('value').userId
|
||||
// },
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// debugger;
|
||||
// const userList=uni.getStorageSync('value')
|
||||
// console.log(userList,'3456789045678945678');
|
||||
// this.formData.reportUserName = uni.getStorageSync('value').userName
|
||||
// this.formData.userId = uni.getStorageSync('value').userId
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar
|
||||
title="维修养护"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize:'18px'
|
||||
}"
|
||||
:height='44'
|
||||
:safeAreaInsetTop=true
|
||||
leftIconSize='20'
|
||||
leftIconColor='rgb(153, 153, 153)'
|
||||
>
|
||||
</u-navbar>
|
||||
<view
|
||||
style="background-color: #f0f0f0;padding: 10px;overflow: auto;margin-top: 44px;">
|
||||
<view class="content">
|
||||
<formTop labelWidth="150rpx" :formData="formData"/>
|
||||
</view>
|
||||
<view class="content" style="margin-top: 10px;">
|
||||
<formBottom labelWidth="150rpx" @submitForm='submitForm' :formData="formData"/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <button @click="submitForm">Submit</button> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formTop from './formTop.vue'
|
||||
import formBottom from './formBottom.vue'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
components: { formTop,formBottom },
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
reportUserName:'',
|
||||
reportTime:moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
userId:''
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.formData=JSON.parse(options.item)
|
||||
console.log(this.formData,JSON.parse(options.item));
|
||||
},
|
||||
methods: {
|
||||
submitForm(params) {
|
||||
//
|
||||
console.log({...params,...this.formData});
|
||||
uni.$http.post('/gunshiApp/tsg/maintain/service/insert',{...params,...this.formData}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
uni.$u.toast('新增成功')
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
console.log(12121);
|
||||
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
/* margin: 10px; */
|
||||
padding: 10px;
|
||||
/* width: 95%; */
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar title="维修养护" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<view style="background-color: #f0f0f0;padding: 10px;margin-top: 60px;">
|
||||
<!-- <view style="padding:0 10px;backgroundColor:#fff"> -->
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{startTime}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{endTime}}</text>
|
||||
<view class="search-btn" @click="searchTm">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<view class="" style="height:calc(100vh - 150px);overflow: auto;" v-if="dataList.length !== 0">
|
||||
<view class="" v-for="item in dataList" class="contentItemWx" @click="toDetail(item)">
|
||||
<view class="contentItem">
|
||||
<view class="itemWxyhT">
|
||||
<text>{{type[item.maintainType]}}</text>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
<view class="itemWxyhB">
|
||||
<text>{{item.reportTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;" v-else>
|
||||
<image src="../../../../static/empty.png" mode="" ></image>
|
||||
</view>
|
||||
<!-- <view class="content">
|
||||
<formTop labelWidth="150rpx" />
|
||||
</view> -->
|
||||
<!-- <view class="content" style="margin-top: 10px;">
|
||||
<formBottom labelWidth="150rpx" @submitForm='submitForm'/>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <button @click="submitForm">Submit</button> -->
|
||||
<u-datetime-picker :show="showTime" v-model="stm" mode="date" @confirm="showTime=false"
|
||||
@cancel="showTime=false"></u-datetime-picker>
|
||||
<u-datetime-picker :show="showTime1" v-model="etm" mode="date" @confirm="showTime1=false"
|
||||
@cancel="showTime1=false"></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formTop from './formZdy/formTop.vue'
|
||||
import formBottom from './formZdy/formBottom.vue'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
components: {
|
||||
formTop,
|
||||
formBottom
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
reportUserName: '',
|
||||
reportTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
userId: ''
|
||||
},
|
||||
showTime: false,
|
||||
showTime1: false,
|
||||
start: '请选择开始时间',
|
||||
end: '请选择结束时间',
|
||||
stm:moment().startOf('year').format('YYYY-MM-DD'),
|
||||
etm:moment().format('YYYY-MM-DD'),
|
||||
dataList: [],
|
||||
type: {
|
||||
1: "溢洪道清障",
|
||||
2: "除草除杂",
|
||||
3: "设备养护",
|
||||
4: "环境清洁",
|
||||
5: "危险提示",
|
||||
6: "其他",
|
||||
},
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
startTime: function () {
|
||||
|
||||
return this.stm ? moment(this.stm).format('YYYY-MM-DD') : this.start
|
||||
},
|
||||
endTime: function () {
|
||||
return this.etm ? moment(this.etm).format('YYYY-MM-DD') : this.end
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchTm(){
|
||||
this.getList()
|
||||
},
|
||||
toDetail(item){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mypage/compents/wxyh/formZdy/index?item='+JSON.stringify(item)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
let params = {
|
||||
"pageSo": {
|
||||
"pageSize": 999,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"dateTimeSo": {
|
||||
start:this.stm?moment(this.stm).format('YYYY-MM-DD 00:00:00'):'',
|
||||
end:this.etm?moment(this.etm).format('YYYY-MM-DD 23:59:59'):''
|
||||
}
|
||||
}
|
||||
uni.$http.post('/gunshiApp/tsg/maintain/service/page', params).then(res => {
|
||||
this.dataList = res.data.data.records
|
||||
})
|
||||
},
|
||||
submitForm(params) {
|
||||
//
|
||||
console.log({
|
||||
...params,
|
||||
...this.formData
|
||||
});
|
||||
uni.$http.post('/gunshiApp/tsg/maintain/service/insert', {
|
||||
...params,
|
||||
...this.formData
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
uni.$u.toast('新增成功')
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
console.log(12121);
|
||||
|
||||
uni.navigateBack()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
/* margin: 10px; */
|
||||
padding: 10px;
|
||||
/* width: 95%; */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.itemWxyhT {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: rgb(102, 102, 102);
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.itemWxyhB{
|
||||
color: rgba(127, 127, 127, 0.8);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.contentItemWx{
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
<template>
|
||||
<view class="contentItem">
|
||||
<uni-collapse>
|
||||
|
||||
<uni-collapse-item title-border="none" v-for="(item,index) in listData" :key="index" :border="false"
|
||||
:show-animation="true">
|
||||
<template v-slot:title>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<text class="yuandian"></text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="xj-content">
|
||||
<view class="xj-text" v-for="(o,i) in item.children" :key="i">
|
||||
<view style="display: flex;align-items: center;">
|
||||
<text>{{o.itemDesc}}</text>
|
||||
<text>（{{o.isNormal == 0?'异常':'正常'}}{{o.isNormal == 0?o.isHandle?'已处理':'未处理':''}})</text>
|
||||
<!-- <text></text> -->
|
||||
|
||||
</view>
|
||||
<view class="" v-if="o.isNormal == 0">
|
||||
<view class="itemEve">
|
||||
<text>现场图片:</text>
|
||||
<view class="" v-for="item in o.inspectPics">
|
||||
<image :src="item.url" style="width: 80px;height: 80px;margin: 5px;" @click="previewImage(item)"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="o.inspectVideos.length" class="itemEve">
|
||||
<text>现场视频:</text>
|
||||
<view class="" v-for="item in o.inspectVideos">
|
||||
<video :src="item.url" style="width: 80px;height: 80px;margin: 5px;" show-fullscreen-btn :show-progress='false'></video>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;" class="itemEve">
|
||||
<text>问题描述:</text>
|
||||
<text>{{o.problemDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="o.isHandle == 1">
|
||||
<view style="" class="itemEve" v-if="o.handlePics.length">
|
||||
<text>处理图片:</text>
|
||||
<view class="" v-for="item in o.handlePics">
|
||||
<image :src="item.url" style="width: 80px;height: 80px;margin: 5px;" @click="previewImage(item)"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="" v-if="o.handleVideos.length" class="itemEve">
|
||||
<text>处理视频:</text>
|
||||
<view class="" v-for="item in o.handleVideos">
|
||||
|
||||
<video :src="item.url" style="width: 80px;height: 80px;margin: 5px;" show-fullscreen-btn></video>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;" class="itemEve">
|
||||
<text>处理描述:</text <text>{{o.handleDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex;" v-if="o.isHandle == 0" class="itemEve">
|
||||
<text>责任人</text>
|
||||
<text>{{o.handleUserName}}</text>
|
||||
</view>
|
||||
|
||||
<view class="subsectioin">
|
||||
<!-- <u--form labelPosition="left" :model="o" ref="uForm">
|
||||
<u-form-item label="状态" prop="isNormal" borderBottom required>
|
||||
<u-subsection :list="list" :current="getNormal(o.isNormal)" mode="subsection" disabled
|
||||
@change="(e)=>change(e,o,index,i,'isNormal')"
|
||||
style="width:200px;margin-left: 10px"></u-subsection>
|
||||
</u-form-item>
|
||||
<view class="" v-if="o.isNormal">
|
||||
<u-form-item label="现场图片" prop="inspectPics" borderBottom required>
|
||||
<u-upload accept="image" :fileList="o.inspectPics" disabled
|
||||
@afterRead="(e)=>afterRead(e,o,index,i)"
|
||||
@delete="(e)=>deletePic(e,o,index,i)" name="inspectPics" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="现场视频" prop="inspectVideos" borderBottom>
|
||||
<u-upload accept="video" :fileList="o.inspectVideos" disabled
|
||||
@afterRead="(e)=>afterRead(e,o,index,i)"
|
||||
@delete="(e)=>deletePic(e,o,index,i)" name="inspectVideos" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="问题描述" prop="itemProblemDesc" borderBottom required>
|
||||
<u--textarea v-model="o.itemProblemDesc" placeholder="请输入内容" disabled></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理状态" prop="isHandle" borderBottom required>
|
||||
<u-subsection :list="listStatus" :current="getHandle(o.isHandle)" disabled
|
||||
mode="subsection" @change="(e)=>change(e,o,index,i,'isHandle')"
|
||||
style="width:200px;margin-left: 10px"></u-subsection>
|
||||
</u-form-item>
|
||||
<view class="" v-if="o.isHandle !== 0">
|
||||
<u-form-item label="处理图片" prop="handlePics" borderBottom required>
|
||||
<u-upload accept="image" :fileList="o.handlePics" disabled
|
||||
@afterRead="(e)=>afterRead(e,o,index,i)"
|
||||
@delete="(e)=>deletePic(e,o,index,i)" name="handlePics" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="处理视频" prop="handleVideos" borderBottom>
|
||||
<u-upload accept="video" :fileList="o.handleVideos" disabled
|
||||
@afterRead="(e)=>afterRead(e,o,index,i)"
|
||||
@delete="(e)=>deletePic(e,o,index,i)" name="handleVideos" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
</u-form-item>
|
||||
<u-form-item label="问题描述" prop="handleDesc" borderBottom required>
|
||||
<u--textarea v-model="o.handleDesc" placeholder="请输入内容" disabled></u--textarea>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="" v-if="o.isHandle == 0">
|
||||
<u-form-item label="责任人" prop="handleUserId" borderBottom
|
||||
@click="showSex = true; hideKeyboard()" required>
|
||||
<u--input v-model="o.handleUserId" disabled disabledColor="#ffffff"
|
||||
placeholder="请选择性别" border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
|
||||
@close="showSex = false" @select="sexSelect">
|
||||
</u-action-sheet> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
</uni-collapse>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
xjItem: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: ["正常", "异常"],
|
||||
listStatus: ["已处理", "未处理"],
|
||||
current: 0,
|
||||
listData: [],
|
||||
showSex: false,
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.listData = this.xjItem
|
||||
},
|
||||
watch: {
|
||||
xjItem: function(n, o) {
|
||||
|
||||
this.listData = n.map(item => {
|
||||
item.childen = item.children.map(i => {
|
||||
i.handlePics?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
i.handleVideos?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
i.inspectPics?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
i.inspectVideos?.map(item1=>{
|
||||
item1.url ='http://223.75.53.141:9102/test.by-lyf.tmp' + item1.filePath
|
||||
return item1
|
||||
})
|
||||
if (!i.handlePics) {
|
||||
i.handlePics = []
|
||||
}
|
||||
if (!i.handleVideos) {
|
||||
i.handleVideos = []
|
||||
}
|
||||
if (!i.inspectPics) {
|
||||
i.inspectPics = []
|
||||
}
|
||||
if (!i.inspectVideos) {
|
||||
i.inspectVideos = []
|
||||
}
|
||||
return i
|
||||
})
|
||||
return item
|
||||
})
|
||||
console.log(n, this.listData, 'this.listData ');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage(item){
|
||||
uni.previewImage({
|
||||
urls: [item.url],
|
||||
longPressActions: {
|
||||
itemList: ['发送给朋友', '保存图片', '收藏'],
|
||||
success: function(data) {
|
||||
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getIsItem(arr) {
|
||||
return arr.filter(item1 => item1.isNormal !== 1 && item1.isNormal !== 0).length
|
||||
},
|
||||
getNormal(isNormal) {
|
||||
if (isNormal == 0) {
|
||||
return 0
|
||||
}
|
||||
if (isNormal == 1) {
|
||||
return 1
|
||||
}
|
||||
if (isNormal == null) {
|
||||
return 3
|
||||
}
|
||||
},
|
||||
getHandle(isHandle) {
|
||||
if (isHandle == 0) {
|
||||
return 0
|
||||
}
|
||||
if (isHandle == 1) {
|
||||
return 1
|
||||
}
|
||||
if (isHandle == null) {
|
||||
return 3
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentItem {
|
||||
height: 100%;
|
||||
// overflow: auto;
|
||||
overflow: auto;
|
||||
|
||||
.itemC {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.itemNo {
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #007aff;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
.yuandian {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #409eff;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.xj-content {
|
||||
// height: 300px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
.xj-text {
|
||||
margin-left: 10%;
|
||||
margin-top: 2%;
|
||||
font-size: 16px;
|
||||
border-bottom:1px solid #f0f0f0 ;
|
||||
}
|
||||
|
||||
.subsectioin {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.itemEve{
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
|
||||
<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input v-model="model1.userInfo.name" border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
||||
border="none"></u--input>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u--textarea v-model="model1.userInfo.namevalue1" placeholder="请输入内容"></u--textarea>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||||
ref="item1">
|
||||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10"></u-upload>
|
||||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
|
||||
@close="showSex = false" @select="sexSelect">
|
||||
</u-action-sheet>
|
||||
<button @click="submit">11</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showSex: false,
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: 'uView UI',
|
||||
sex: '',
|
||||
},
|
||||
},
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
'userInfo.name': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'userInfo.sex': {
|
||||
type: 'string',
|
||||
max: 1,
|
||||
required: true,
|
||||
message: '请选择男或女',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
},
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 删除图片
|
||||
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,name) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: uni.$http.baseUrl +'/gunshiApp/tsg/maintain/service/file/upload/singleSimple', // 仅为示例，非真实的接口地址
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
// const obj = this.model1[name].find(item=>item.fileId==res.data.data.fileId)
|
||||
// if(obj){
|
||||
|
||||
// }
|
||||
console.log(JSON.parse(res.data),this.model1,name);
|
||||
this.model1[name].push({fileId:JSON.parse(res.data).data.fileId})
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.sex = e.name
|
||||
this.$refs.uForm.validateField('userInfo.sex')
|
||||
},
|
||||
submit() {
|
||||
this.$refs.uForm.validate().then(res => {
|
||||
uni.$u.toast('校验通过')
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'hidden'}">
|
||||
<u-status-bar></u-status-bar>
|
||||
<u-navbar :title="taskTitle" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<!-- <view class=""
|
||||
style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0; height:calc(100vh - 44px)">
|
||||
<view style="margin: 10px;background-color: #fff;padding: 10px;">
|
||||
<!-- <view class="item">
|
||||
<view class="blueTiao"></view>
|
||||
<view class="title">
|
||||
基本信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
<text>任务标题1</text>
|
||||
<text>{{taskTitle}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>任务类型11</text>
|
||||
<text>{{taskType == 1 ? "日常巡查" : taskType == 2 ? "特别检查" : taskType == 3 ? "汛前巡检" : '' }}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>任务内容</text>
|
||||
<text>{{taskContent ? taskContent : ''}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>开始日期</text>
|
||||
<text>{{startDate}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>结束日期</text>
|
||||
<text>{{endDate}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- </view> -->
|
||||
|
||||
<view style="margin: 10px;background-color: #fff;padding: 10px; height:calc(100vh - 50px);margin-top: 50px;">
|
||||
<view class="item">
|
||||
<view class="blueTiao"></view>
|
||||
<view class="title">
|
||||
巡检项
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem" style="height: calc(100% - 50px);">
|
||||
<db-form :xjItem="xjItem"></db-form>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import DbForm from './dbForm.vue'
|
||||
export default {
|
||||
components: {
|
||||
DbForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
taskTitle: '',
|
||||
taskType: '',
|
||||
taskContent: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
status: '',
|
||||
id: '',
|
||||
btnStatus: 0,
|
||||
xjItem: [],
|
||||
list: ["正常", "异常"],
|
||||
current: 3
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.startXc()
|
||||
},
|
||||
methods: {
|
||||
// 开始巡查
|
||||
async startXc() {
|
||||
try {
|
||||
this.btnStatus = 1;
|
||||
this.getXjItem(this.id)
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
// 获取巡查项
|
||||
async getXjItem(id) {
|
||||
try {
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.get(`/gunshiApp/tsg/inspect/detail/info?taskId=${this.id}`)
|
||||
if (data.code == 200) {
|
||||
this.xjItem = data.data
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
this.current = e;
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.taskTitle = option.taskTitle
|
||||
this.taskType = option.taskType
|
||||
this.taskContent = option.taskContent == "null" ? null : option.taskContent
|
||||
this.startDate = (option.startDate)
|
||||
this.endDate = option.endDate == "null" ? "" : option.endDate
|
||||
this.status = option.status
|
||||
this.id = option.id
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// justify-content: space-between;
|
||||
.blueTiao {
|
||||
background-color: #007aff;
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 58px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
.itemC {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.itemNo {
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #007aff;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
.yuandian {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #409eff;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.xj-content {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.xj-text {
|
||||
margin-left: 10%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.subsectioin {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<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>
|
||||
<view style="padding:0 10px; margin-top:50px">
|
||||
<view class="time-ranger" >
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="" style='overflow: auto;max-height:calc(100vh - 180px)' v-if="list.length !== 0">
|
||||
<view class="" v-for="(item,i) in list" :key="i" @click="toDetail(item)" style="background-color: #fff;margin-top:10px;padding: 10px;">
|
||||
<view class="item">
|
||||
<!-- {{item.title}} -->
|
||||
<view class="title">
|
||||
{{item.taskTitle}}
|
||||
</view>
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{status[item.status]}}
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentItem">
|
||||
<view class="itemC">
|
||||
<text>接收时间</text>
|
||||
<text>{{item.receiveTime}}</text>
|
||||
</view>
|
||||
<view class="itemC">
|
||||
<text>完成时间</text>
|
||||
<text>{{item.finishTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height:calc(100vh - 150px);display: flex;align-items: center;justify-content: center;background-color: #fff;" v-else>
|
||||
<image src="../../../../static/empty.png" mode="" ></image>
|
||||
</view>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="date"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="date"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const stm = moment().startOf('year').set({minute: 0, second: 0}).format("YYYY-MM-DD");
|
||||
const etm = moment().set({minute: 0, second: 0}).format("YYYY-MM-DD");
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status:{
|
||||
0:'开始任务',
|
||||
1:'继续任务',
|
||||
2:'已完成'
|
||||
},
|
||||
minDate:moment().startOf('year').valueOf(),
|
||||
maxDate:moment().valueOf(),
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
stm,
|
||||
etm,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
searchHandle(){
|
||||
this.getData()
|
||||
},
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-D")
|
||||
this.stm = time;
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
|
||||
async getData(){
|
||||
const userId = uni.getStorageSync('value')?.userId
|
||||
const params = {
|
||||
dateRangeSo:{
|
||||
start:moment(this.stm).format("YYYY-MM-DD 00:00:00"),
|
||||
end:moment(this.etm).format("YYYY-MM-DD 23:59:59"),
|
||||
},
|
||||
inspectUserId:userId,
|
||||
statusList:[2]
|
||||
}
|
||||
try {
|
||||
const res = await uni.$http.post("/gunshiApp/tsg/inspect/task/list",params)
|
||||
this.list = [...res.data.data];
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
toDetail(record){
|
||||
uni.navigateTo({
|
||||
url:`/pages/mypage/compents/xcrw/detail/index?taskTitle=${record.taskTitle}&taskType=${record.taskType}&taskContent=${record.taskContent}&startDate=${record.startDate}&endDate=${record.endDate}&status=${record.status}&id=${record.id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
border-width: 0px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
.border {
|
||||
border-width: 0px;
|
||||
background-color: rgba(236, 245, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(187, 220, 255, 1);
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
width: 75px;
|
||||
height: 25px;
|
||||
color: #689FFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.contentItem{
|
||||
.itemC{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
<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">{{userList.nickName}}</div>
|
||||
<div class="userresponse">{{deptName}}</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="funcBar">
|
||||
<div class="funcList" v-for="(item, index) in func" :key="index">
|
||||
<div @click="navigateToSubPage(func,index)">
|
||||
<div class="funcIcon" style="width:30px;height:30px">
|
||||
<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" style="display:flex">
|
||||
<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'
|
||||
},
|
||||
]
|
||||
console.log(uni.getStorageSync('value'));
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userList: uni.getStorageSync('value'),
|
||||
username: '',
|
||||
userresponse: '防汛办',
|
||||
version: uni.getSystemInfoSync().appWgtVersion,
|
||||
func: func,
|
||||
default_src: uni.getStorageSync('avatar'),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
deptName() {
|
||||
const d = this.userList && this.userList.dept
|
||||
return (d && d.deptName) || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateToSubPage(item,index) {
|
||||
uni.navigateTo({
|
||||
url: item[index].url,
|
||||
animationType:'pop-in',
|
||||
})
|
||||
},
|
||||
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.removeStorageSync('avatar')
|
||||
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: 8vh;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: #007afd;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 40%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 40%;">测点编号</th>
|
||||
<th style="width: 20%;">有无白蚁</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 40%;">{{item.obDate}}</td>
|
||||
<td style="width: 40%;">{{item.order}}</td>
|
||||
<td style="width:20%;"><span :class="item.status === 1 ? 'has-ant' : 'no-ant'">{{ simpleData(item.status) }}</span></td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(status){
|
||||
if(status === 1) {
|
||||
return '有'
|
||||
} else if(status === 0) {
|
||||
return '无'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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;
|
||||
}
|
||||
|
||||
.has-ant {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.no-ant {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: green;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<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">
|
||||
安全监测
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar">
|
||||
<uni-swiper-dot :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>
|
||||
</uni-swiper-dot>
|
||||
|
||||
</view>
|
||||
<view class="rain-detail-content">
|
||||
<SlTable :tableData="slData" v-if="activeOne == 2" />
|
||||
<SyView v-else-if="activeOne == 1" />
|
||||
<WyTable :tableData="zwyData" v-else-if="activeOne == 0" />
|
||||
<ByTable :tableData="byData" v-else-if="activeOne == 3" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SlTable from "./slTable.vue"
|
||||
import SyView from "../aqjc/index.vue"
|
||||
import WyTable from "./zwyTable.vue"
|
||||
import ByTable from "./byTable.vue"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeOne: 0,
|
||||
current: 0,
|
||||
slData: [],
|
||||
zwyData: [],
|
||||
byData:[],
|
||||
dotsStyles: {
|
||||
bottom: 0,
|
||||
selectedBackgroundColor: "#d9001b"
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SlTable,
|
||||
SyView,
|
||||
WyTable,
|
||||
ByTable
|
||||
},
|
||||
methods: {
|
||||
backTo() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
},
|
||||
change(e) {
|
||||
console.log(e.detail.current);
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
async getSlData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
"/gunshiApp/tsg/osmoticPressR/list/value?type=2"
|
||||
);
|
||||
if (data.code == 200) {
|
||||
this.slData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
async getZwyData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
"/gunshiApp/tsg/osmoticShiftR/list/value"
|
||||
);
|
||||
if (data.code == 200) {
|
||||
this.zwyData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
async getByData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
`/gunshiApp/tsg/termite/survey/listNewData`
|
||||
);
|
||||
if (data.code == 200) {
|
||||
this.byData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getSlData();
|
||||
this.getZwyData();
|
||||
this.getByData();
|
||||
},
|
||||
}
|
||||
</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,94 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 30%;">
|
||||
监测点
|
||||
</th>
|
||||
<th style="width: 40%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 30%;">渗流量(L/s)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 30%;">{{item.stationCode}}</td>
|
||||
<td style="width: 40%;">{{simpleData(item.tm)}}</td>
|
||||
<td style="width:30%;">{{ item.value }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(tm){
|
||||
return tm ? moment(tm).format("MM-DD HH:mm") :''
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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(55vh - 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,98 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 20%;">
|
||||
监测点
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 20%;">x方向(mm)</th>
|
||||
<th style="width: 20%;">y方向(mm)</th>
|
||||
<th style="width: 20%;">h方向(mm)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 20%; height: 30%;">{{item.cdnm}}</td>
|
||||
<td style="width: 20%;">{{simpleData(item.tm)}}</td>
|
||||
<td style="width:20%;">{{ item.de }}</td>
|
||||
<td style="width:20%;">{{ item.dn }}</td>
|
||||
<td style="width:20%;">{{ item.du }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(tm){
|
||||
if(!tm) return ''
|
||||
return moment(tm).format("MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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;
|
||||
}
|
||||
.table_cur th {
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
text-align: center !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 75rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</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,235 @@
|
|||
<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.phonenumber
|
||||
}, ]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userList: userList,
|
||||
userListShow: userListShow,
|
||||
modify: modify,
|
||||
default_src: uni.getStorageSync('avatar'),
|
||||
phone: userList.phonenumber,
|
||||
}
|
||||
},
|
||||
mounted() { //挂载时重新获取一次Storage数据
|
||||
this.userList = uni.getStorageSync('value')
|
||||
this.userListShow[0].info = this.userList.phonenumber
|
||||
},
|
||||
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/tsg/system/user/profile/avatar',
|
||||
fileType: 'image',
|
||||
filePath: tempFilePaths[0],
|
||||
name: 'avatarfile',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + uni.getStorageSync('Gs-Token')
|
||||
},
|
||||
success: (res) => {
|
||||
const imgUrl = JSON.parse(res.data).imgUrl;
|
||||
this.getImgFlow(imgUrl)
|
||||
// uni.setStorageSync("imgUrl",imgUrl)
|
||||
uni.$showMsg("上传成功")
|
||||
},
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('弹窗取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getImgFlow(imgUrl) {
|
||||
uni.request({
|
||||
url: uni.$http.baseUrl +
|
||||
`/gunshiApp/tsg/common/download/resource?resource=${imgUrl}`,
|
||||
responseType: 'arraybuffer',
|
||||
success: (res) => {
|
||||
// 将arraybuffer转换为Base64编码
|
||||
let base64 = uni.arrayBufferToBase64(res.data);
|
||||
const p = 'data:image/png;base64,' + base64;
|
||||
uni.setStorageSync("avatar",p)
|
||||
}
|
||||
})
|
||||
},
|
||||
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('取消');
|
||||
}
|
||||
})
|
||||
},
|
||||
async save() {
|
||||
try {
|
||||
let new_userList = uni.getStorageSync('value')
|
||||
new_userList.phonenumber = this.phone;
|
||||
const
|
||||
{data}
|
||||
=await uni.$http.put('/gunshiApp/tsg/system/user/profile', new_userList);
|
||||
if (data.code == 200) {
|
||||
uni.setStorageSync('value', new_userList)
|
||||
uni.reLaunch({
|
||||
url: '/pages/mypage/mypage'
|
||||
})
|
||||
}
|
||||
uni.$showMsg("保存成功")
|
||||
} catch (error) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
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,550 @@
|
|||
<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(){
|
||||
let obj = {
|
||||
...this.formData,
|
||||
timeType:undefined
|
||||
}
|
||||
try{
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xfflood/real/rain/app/list",obj
|
||||
)
|
||||
if(data.code == 200){
|
||||
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,156 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;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{
|
||||
.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,121 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 40%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 40%;">测点编号</th>
|
||||
<th style="width: 20%;">有无白蚁</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 40%;">{{item.obDate}}</td>
|
||||
<td style="width: 40%;">{{item.order}}</td>
|
||||
<td style="width:20%;"><span :class="item.status === 1 ? 'has-ant' : 'no-ant'">{{ simpleData(item.status) }}</span></td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(status){
|
||||
if(status === 1) {
|
||||
return '有'
|
||||
} else if(status === 0) {
|
||||
return '无'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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;
|
||||
}
|
||||
|
||||
.has-ant {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.no-ant {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: green;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<u-navbar
|
||||
:title="name"
|
||||
:autoBack="true"
|
||||
:titleStyle="{
|
||||
fontSize: '18px',
|
||||
}"
|
||||
:height="44"
|
||||
:safeAreaInsetTop="true"
|
||||
leftIconSize="20"
|
||||
leftIconColor="rgb(153, 153, 153)"
|
||||
>
|
||||
</u-navbar>
|
||||
<view style="margin-top: 70px; padding: 10px">
|
||||
<SlTable :tableData="slData" v-if="name == '渗流监测'"></SlTable>
|
||||
<ZwyTable
|
||||
:tableData="zwyData"
|
||||
v-else-if="name == '主坝位移监测'"
|
||||
></ZwyTable>
|
||||
<ZwyTable
|
||||
:tableData="zwyData"
|
||||
v-else-if="name == '溢洪道位移监测'"
|
||||
></ZwyTable>
|
||||
<ZwyTable
|
||||
:tableData="zwyData"
|
||||
v-else-if="name == '副坝位移监测'"
|
||||
></ZwyTable>
|
||||
<ZsyTable
|
||||
:tableData="zsyData"
|
||||
v-else-if="name == '主坝渗压监测'"
|
||||
></ZsyTable>
|
||||
<ZsyTable
|
||||
:tableData="sdData"
|
||||
v-else-if="name == '灌溉发电洞渗压监测'"
|
||||
></ZsyTable>
|
||||
<ZsyTable
|
||||
:tableData="fbData"
|
||||
v-else-if="name == '副坝渗压监测'"
|
||||
></ZsyTable>
|
||||
<ZwyTable
|
||||
:tableData="zwyData"
|
||||
v-else-if="name == '灌溉发电洞变形监测'"
|
||||
></ZwyTable>
|
||||
<ByTable
|
||||
:tableData="byData"
|
||||
v-else-if="name == '白蚁监测'"
|
||||
></ByTable>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import SlTable from "./slTable.vue";
|
||||
import ZwyTable from "./zwyTable.vue";
|
||||
import ZsyTable from "./zsyTable.vue";
|
||||
import ByTable from "./byTable.vue";
|
||||
export default {
|
||||
components: {
|
||||
SlTable,
|
||||
ZwyTable,
|
||||
ZsyTable,
|
||||
ByTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slData: [], //渗流监测
|
||||
zwyData: [], //主坝位移监测
|
||||
zsyData: [], //主坝渗压监测
|
||||
sdData: [], //发电洞渗压监测
|
||||
fbData: [], //副坝渗压监测
|
||||
byData:[],
|
||||
name: "",
|
||||
deviceId:""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
filterStationsByCode(array, config) {
|
||||
const { prefix, start, end, digitLength = 1 } = config;
|
||||
console.log("array",array);
|
||||
|
||||
return array.filter((item) => {
|
||||
if (!item.stationCode) return false;
|
||||
|
||||
const code = item.stationCode;
|
||||
if (!code.startsWith(prefix)) return false;
|
||||
|
||||
const numStr = code.substring(prefix.length);
|
||||
const num = parseInt(numStr);
|
||||
|
||||
// 检查数字部分的长度是否符合要求
|
||||
if (digitLength > 1 && numStr.length !== digitLength) return false;
|
||||
|
||||
return num >= start && num <= end;
|
||||
});
|
||||
},
|
||||
async getSlData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
"/gunshiApp/tsg/osmoticPressR/list/value?type=2"
|
||||
);
|
||||
if (data.code == 200) {
|
||||
this.slData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
|
||||
async getByData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
`/gunshiApp/tsg/termite/survey/listNewData?deviceId=${this.deviceId}`
|
||||
);
|
||||
if (data.code == 200) {
|
||||
this.byData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
async getZwyData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
"/gunshiApp/tsg/osmoticShiftR/list/value"
|
||||
);
|
||||
|
||||
if (data.code == 200) {
|
||||
let resData = [];
|
||||
if (this.name == "主坝位移监测") {
|
||||
resData = this.filterStationsByCode(data.data, {
|
||||
prefix: "WY-",
|
||||
start: 1,
|
||||
end: 27,
|
||||
digitLength: 2,
|
||||
});
|
||||
}else if(this.name == "溢洪道位移监测"){
|
||||
const wy = this.filterStationsByCode(data.data, {
|
||||
prefix: "WY-",
|
||||
start: 28,
|
||||
end: 31,
|
||||
digitLength: 2,
|
||||
});
|
||||
const zy = this.filterStationsByCode(data.data, {
|
||||
prefix: "ZY-",
|
||||
start: 5,
|
||||
end: 36,
|
||||
digitLength: 2,
|
||||
});
|
||||
resData = [...wy,...zy]
|
||||
}else if(this.name == "副坝位移监测"){
|
||||
resData = this.filterStationsByCode(data.data, {
|
||||
prefix: "ZY-",
|
||||
start: 1,
|
||||
end: 4,
|
||||
digitLength: 2,
|
||||
});
|
||||
}else{
|
||||
resData = data.data.filter(item => item.stationCode == 'WY-32')
|
||||
}
|
||||
// this.zwyData = resData;
|
||||
this.zwyData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
async getzsyData() {
|
||||
try {
|
||||
const { data } = await uni.$http.get(
|
||||
"/gunshiApp/tsg/osmoticPressR/list/value?type=1"
|
||||
);
|
||||
if (data.code == 200) {
|
||||
const zb = data.data.filter(
|
||||
(item) => item?.profileName?.split("+")[0] == "ZB0"
|
||||
);
|
||||
const fb = data.data.filter(
|
||||
(item) => item?.profileName?.split("+")[0] == "FB0"
|
||||
);
|
||||
const sd = data.data.filter(
|
||||
(item) => item?.profileName?.split("+")[0] == "SD0"
|
||||
);
|
||||
this.zsyData = zb;
|
||||
this.fbData = fb;
|
||||
this.sdData = sd;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getSlData();
|
||||
this.getZwyData();
|
||||
this.getzsyData();
|
||||
this.getByData();
|
||||
},
|
||||
onLoad(options) {
|
||||
this.name = options.name;
|
||||
this.deviceId = options.deviceId || '';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 30%;">
|
||||
监测点
|
||||
</th>
|
||||
<th style="width: 40%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 30%;">渗流量(L/s)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 30%;">{{item.stationCode}}</td>
|
||||
<td style="width: 40%;">{{simpleData(item.tm)}}</td>
|
||||
<td style="width:30%;">{{ item.value }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(tm){
|
||||
return moment(tm).format("MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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(55vh - 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,97 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 19%;">
|
||||
监测点
|
||||
</th>
|
||||
<th style="width: 30%;">所属断面</th>
|
||||
<th style="width: 26%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 25%;">管水位(m)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 19%;">{{item.stationCode}}</td>
|
||||
<td style="width:30%;">{{ item.profileName }}</td>
|
||||
<td style="width: 26%;text-align: center;">{{simpleData(item.tm)}}</td>
|
||||
<td style="width:25%;">{{ item.value }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(tm){
|
||||
if(!tm) return ''
|
||||
return moment(tm).format("MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 50px;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 75rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
// text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 20%;">
|
||||
监测点
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
监测时间
|
||||
</th>
|
||||
<th style="width: 20%;">x方向(mm)</th>
|
||||
<th style="width: 20%;">y方向(mm)</th>
|
||||
<th style="width: 20%;">h方向(mm)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 20%; height: 30%;">{{item.cdnm}}</td>
|
||||
<td style="width: 20%;">{{simpleData(item.tm)}}</td>
|
||||
<td style="width:20%;">{{ item.de }}</td>
|
||||
<td style="width:20%;">{{ item.dn }}</td>
|
||||
<td style="width:20%;">{{ item.du }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
simpleData(tm){
|
||||
if(!tm) return ''
|
||||
return moment(tm).format("MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
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;
|
||||
}
|
||||
.table_cur th {
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
text-align: center !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 75rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: wrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</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,157 @@
|
|||
<template>
|
||||
<view class="jcsj-box">
|
||||
<view class="time-ranger">
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 10%;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{
|
||||
.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,126 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<div class="table_div" v-if="tableData.length !=0">
|
||||
<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>
|
||||
<view
|
||||
style="display: flex;align-items: center;justify-content: center;background-color: #fff;"
|
||||
v-else>
|
||||
<image src="../../../static/empty.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</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,149 @@
|
|||
<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 {
|
||||
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.get(
|
||||
`/gunshiApp/tsg/reservoir/water/detail?stcd=${uni.$stcd}`)
|
||||
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;
|
||||
.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.name}}</td>
|
||||
<td style="width: 130px;">{{info.unit}}</td>
|
||||
<td style="width: 80px">{{info.duty}}</td>
|
||||
<td style="width: 100px;color: #62bafa;" @click="show = true">{{info.contactInfo}}</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 5px 12px 5px;
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue