styles(): 样式优化
parent
051881323a
commit
849ee99c3f
|
|
@ -30,8 +30,8 @@
|
|||
<view class="jcsj-content">
|
||||
<view class="tool-btn">
|
||||
<view class="scale-btn">
|
||||
<button style="margin-right:10px" @click="fd">+</button>
|
||||
<button @click="sx">-</button>
|
||||
<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" @click="play"></uni-icons>
|
||||
|
|
@ -39,7 +39,8 @@
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -49,20 +50,10 @@
|
|||
</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>
|
||||
<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>
|
||||
|
|
@ -71,8 +62,14 @@
|
|||
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 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");
|
||||
export default {
|
||||
|
||||
data() {
|
||||
|
|
@ -88,14 +85,18 @@
|
|||
dbType: '',
|
||||
trData: [],
|
||||
dataSources: [],
|
||||
chartData: {chartData:{},eopts:{}},
|
||||
areaStyle:{left:"-450px"},
|
||||
chartData: {
|
||||
chartData: {},
|
||||
eopts: {}
|
||||
},
|
||||
areaStyle: {
|
||||
left: "-450px"
|
||||
},
|
||||
scaleValue: 0.5,
|
||||
swiper: false,
|
||||
timer: 100,
|
||||
columns: [],
|
||||
cols1:[
|
||||
{
|
||||
cols1: [{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
width: 60,
|
||||
|
|
@ -107,11 +108,21 @@
|
|||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{ title: '库水位(m)', key: 'rz', dataIndex: 'rz', width: 150, align: "center" },
|
||||
],
|
||||
cols2:[
|
||||
{title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center",}
|
||||
{
|
||||
title: '库水位(m)',
|
||||
key: 'rz',
|
||||
dataIndex: 'rz',
|
||||
width: 150,
|
||||
align: "center"
|
||||
},
|
||||
],
|
||||
cols2: [{
|
||||
title: '结果分析',
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
align: "center",
|
||||
}],
|
||||
newCol: []
|
||||
}
|
||||
},
|
||||
|
|
@ -135,6 +146,7 @@
|
|||
this.dbType = name == "大坝B0+060" ? "1" :
|
||||
name == "大坝B0+090" ? "2" :
|
||||
name == "大坝B0+120" ? "2" : '1'
|
||||
this.getDmTree();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
|
|
@ -150,7 +162,9 @@
|
|||
dataSources: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.chartData = {...drpOption(newVal[0],this.dbType)}
|
||||
this.chartData = {
|
||||
...drpOption(newVal[0], this.dbType)
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
|
|
@ -172,7 +186,9 @@
|
|||
this.timer = setInterval(() => {
|
||||
console.log("data", data[index % data.length]);
|
||||
|
||||
this.chartData = {...drpOption(data[index % data.length],this.dbType)}
|
||||
this.chartData = {
|
||||
...drpOption(data[index % data.length], this.dbType)
|
||||
}
|
||||
index++;
|
||||
}, 1000)
|
||||
},
|
||||
|
|
@ -225,7 +241,9 @@
|
|||
// 获取监测点数据
|
||||
async getMonthData() {
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post(
|
||||
`/gunshiApp/xyt/attDamProfile/list`, )
|
||||
if (data.code == 200) {
|
||||
this.array = data.data
|
||||
|
|
@ -239,12 +257,12 @@
|
|||
// 获取坝面上点位数据
|
||||
async getTableData() {
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/osmoticPressR/infiltra/line",
|
||||
{
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/osmoticPressR/infiltra/line", {
|
||||
stationCodes: this.trData,
|
||||
dateTimeRangeSo:
|
||||
{
|
||||
dateTimeRangeSo: {
|
||||
start: moment(this.stm).format("YYYY-MM-DD HH:mm:00"),
|
||||
end: moment(this.etm).format("YYYY-MM-DD HH:mm:00"),
|
||||
}
|
||||
|
|
@ -273,14 +291,20 @@
|
|||
})
|
||||
let obj = {};
|
||||
r.forEach(s1 => {
|
||||
obj = {...s1,...obj}
|
||||
obj = {
|
||||
...s1,
|
||||
...obj
|
||||
}
|
||||
})
|
||||
return {
|
||||
...s,
|
||||
...obj,
|
||||
}
|
||||
})
|
||||
let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除
|
||||
let res1 = result.map(item => ({
|
||||
...item,
|
||||
rz: (item.rz - 100).toFixed(2)
|
||||
})) //为了测试 最后需要删除
|
||||
this.dataSources = [...res1];
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -290,13 +314,15 @@
|
|||
// 获取各点
|
||||
async getDmTree() {
|
||||
try {
|
||||
const {data} = await uni.$http.post("/gunshiApp/xyt/attDamProfile/tree")
|
||||
const {
|
||||
data
|
||||
} = await uni.$http.post("/gunshiApp/xyt/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 => ({
|
||||
this.trData = filterData[0].children;
|
||||
const newCol = filterData[0].children.map(s => ({
|
||||
title: `${s}(m)`,
|
||||
key: s,
|
||||
dataIndex: s,
|
||||
|
|
@ -335,45 +361,56 @@
|
|||
border-right: none;
|
||||
// background-image: '../../static/images/';
|
||||
}
|
||||
|
||||
.jcsj-box {
|
||||
padding: 0 10px;
|
||||
|
||||
.time-ranger {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
|
||||
.start-time,
|
||||
.end-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin: 3px 0 0 5px;
|
||||
// color: #3399ef;
|
||||
}
|
||||
}
|
||||
|
||||
.jcsj-content {
|
||||
max-height: 100vh;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
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;
|
||||
|
|
@ -382,6 +419,7 @@
|
|||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
background-color: #efefef;
|
||||
|
||||
movable-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -390,10 +428,17 @@
|
|||
background-color: #fff;
|
||||
left: 450px;
|
||||
top: 10px
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-color: #68bbff !important;
|
||||
color: #68bbff;
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
.aqjc-custom-style {
|
||||
width: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -40,10 +40,9 @@
|
|||
<view class="warn">
|
||||
<sk-info />
|
||||
</view>
|
||||
<view class="warn" v-for="item in Ylzlist" :key="item.stnm">
|
||||
<view class="warn1" v-for="item in Ylzlist" :key="item.stnm">
|
||||
<ylz-list :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>
|
||||
|
|
@ -230,7 +229,12 @@
|
|||
}
|
||||
try {
|
||||
const res = await uni.$http.post("/gunshiApp/xyt/stQxWarnR/home/warn", params)
|
||||
const {flowWarn,pressWarn,qxWarn,shiftWarn} = res.data.data
|
||||
const {
|
||||
flowWarn,
|
||||
pressWarn,
|
||||
qxWarn,
|
||||
shiftWarn
|
||||
} = res.data.data
|
||||
const arr = [...flowWarn, ...pressWarn, ...qxWarn, ...shiftWarn]
|
||||
if (arr.length > 0) {
|
||||
this.warnStatus = true
|
||||
|
|
@ -259,6 +263,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background-color: #f3f5f8;
|
||||
|
|
@ -337,11 +342,19 @@
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
.warn1 {
|
||||
padding: 18rpx 20rpx;
|
||||
text-align: left;
|
||||
// margin-bottom: 12rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.info_24 {
|
||||
width: 100%;
|
||||
// position: fixed;
|
||||
// padding: 15px;
|
||||
background-color: #fff;
|
||||
// margin-bottom: 12rpx;
|
||||
// height: 40px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title .line {
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
</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"
|
||||
<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" @click="toDetail(item)">
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{item.isHandle==1?'已处理':'待处理'}}
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
|
||||
</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" style="background-color: #fff;margin-top:10px;padding: 10px;">
|
||||
<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" @click="toDetail(item)">
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{status[item.status]}}
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
import { format } from 'echarts/lib/export';
|
||||
export default function DrpOption(data,num) {
|
||||
const minL = Math.floor(Math.min(...data?.map(s => s.q)));
|
||||
const maxL = Math.ceil(Math.max(...data?.map(s => s.q)));
|
||||
|
|
@ -20,8 +21,8 @@ export default function DrpOption(data,num) {
|
|||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '10%',
|
||||
right: '14%',
|
||||
left: '7%',
|
||||
right: '11%',
|
||||
bottom: '10%',
|
||||
borderWidth: 0
|
||||
},
|
||||
|
|
@ -40,7 +41,8 @@ export default function DrpOption(data,num) {
|
|||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
formatter: val => val.substr(0,'2020-11-11 11:11'.length)
|
||||
// formatter: val => val.substr(0,'2020-11-11 11:11'.length)
|
||||
format:"waterXaxis"
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
|
@ -58,6 +60,9 @@ export default function DrpOption(data,num) {
|
|||
type: 'value',
|
||||
position: 'left',
|
||||
name: "流量(m³/s)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 0, 30]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="" v-if="list.length !== 0" style="height:calc(100vh - 180px);overflow: auto;">
|
||||
<view class="" v-for="item in list" style="margin: 10px;background-color: #fff;padding: 10px;" >
|
||||
<view class="" v-for="(item,i) in list" @click="toDetail(item)" :key="i" style="margin: 10px;background-color: #fff;padding: 10px;" >
|
||||
<view class="item">
|
||||
<!-- {{item.title}} -->
|
||||
<view class="title">
|
||||
{{item.taskTitle}}
|
||||
</view>
|
||||
<view class="titleRight" @click="toDetail(item)">
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{isHandle==0?'已处理':'待处理'}}
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
|
||||
</view>
|
||||
<view class="" style='overflow: auto;height:calc(100vh - 150px)' v-if="list.length !== 0">
|
||||
<view class="" v-for="(item,i) in list" :key="i" style="background-color: #fff;margin-top:10px;padding: 10px;">
|
||||
<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" @click="toDetail(item)">
|
||||
<view class="titleRight" >
|
||||
<view class="border">
|
||||
{{status[item.status]}}
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,9 @@ const cfe = {
|
|||
return value
|
||||
}
|
||||
},
|
||||
"waterXaxis": function (val) {
|
||||
return val.substr(0,'2020-11-11 11:11'.length)
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue