From bf18b4a2951e3f661dbcf716e04e4d5926380045 Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Mon, 29 Jan 2024 21:59:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B0=B4=E8=B4=A8=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/water-quality.vue | 1520 +++++++++++++++--------------
 1 file changed, 813 insertions(+), 707 deletions(-)

diff --git a/src/pages/index/water-quality.vue b/src/pages/index/water-quality.vue
index 9cbd43b..88d7db9 100644
--- a/src/pages/index/water-quality.vue
+++ b/src/pages/index/water-quality.vue
@@ -1,724 +1,830 @@
 <template>
-	<view class="warning-page">
-		<view class="content-box">
-			<view class="secreen-section">
-				<u-dropdown ref="uDropdown" @open="openDropDown">
-					<u-dropdown-item v-model="addressValue" title="基地" 
-					:options="deviceAddressList" @change="change"></u-dropdown-item>
-					<u-dropdown-item v-model="device_id" title="检测点" 
-					:options="options2" @change="change2"></u-dropdown-item>
-					<u-dropdown-item title="日期">
-						<view class="slot-content" style="background-color: #FFFFFF;">
-							<view class="select-date u-border-bottom" >
-								<view class="name" @click="calendarShow = true">
-									<u-icon name="calendar" color="#333" size="32"></u-icon>
-									<text style="margin-left: 6rpx;">选择日期：</text>
-								</view>
-								<view class="time_box">
-									<view class="tip_txt" v-if="!start_date_c"
-									@click="calendarShow = true">开始日期-结束日期</view>
-									<view class="tile_val" v-else
-									@click="calendarShow = true">{{start_date_c}} ~ {{end_date_c}}</view>
-									<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn()">
-										<u-icon name="close-circle" color="#333" size="34"></u-icon>
-									</view>
-								</view>
-								
-							</view>
-							<u-button type="primary" @click="selectedDateConform()">确定</u-button>
-						</view>
-					</u-dropdown-item>
-				</u-dropdown>
-				<view class="quick_times">
-					<view class="tab-section">
-						<view class="tab-item" :class="currentIndex==index?'active':''" 
-						v-for="(item,index) in sublist"
-						@click="subChange1(index)" :key="index" >
-							<view class="name">{{item.name}}</view>
-						</view>
-					</view>
-					
-				</view>
-			</view>
-			<view class="warning-section">
-				<view class="top_box">
-					<view class="tit">预警数据统计</view>
-					<view class="set_warning">
-						<u-button v-auth="['endpoint.water.setting','endpoint.water.setting_edit']" class="set_btn" @click="setWarnInfo()" size="mini">设置</u-button>
-					</view>
-				</view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-				<view class="cont-box">
-					<view class="warning-item" @click="warningClickFn(1)">
-						<view class="name">Ⅰ级预警</view>
-						<view class="val">{{deviceWarning[1]?deviceWarning[1]:0}}<text class="unit">个</text></view>
-					</view>
-					<view class="warning-item" @click="warningClickFn(2)">
-						<view class="name">Ⅱ级预警</view>
-						<view class="val">{{deviceWarning[2]?deviceWarning[2]:0}}<text class="unit">个</text></view>
-					</view>
-					<view class="warning-item" @click="warningClickFn(3)">
-						<view class="name">Ⅲ级预警</view>
-						<view class="val">{{deviceWarning[3]?deviceWarning[3]:0}}<text class="unit">个</text></view>
-					</view>
-					<view class="warning-item" @click="warningClickFn(4)">
-						<view class="name">Ⅳ级预警</view>
-						<view class="val">{{deviceWarning[4]?deviceWarning[4]:0}}<text class="unit">个</text></view>
-					</view>
-				</view>
-			</view>
-			<template v-if="loadingType!=0">
-			<!-- 氯 -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">氯<text class="unit">mg/L</text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="opts"
-					:chartData="chart_chlorine"
-				  />
-			  </view>
-			</view>
-			<!-- 电导率 -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">电导率<text class="unit">us/cm</text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="opts"
-					:chartData="chart_conductivity"
-				  />
-			  </view>
-			</view>
-			
-			<!-- 氧气 -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">氧气<text class="unit">mg/L</text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="opts"
-					:chartData="chart_oxygen"
-				  />
-			  </view>
-			</view>
-			<!-- PH -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">PH<text class="unit"></text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="opts"
-					:chartData="chart_ph"
-				  />
-			  </view>
-			</view>
-			<!-- 温度 -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">温度<text class="unit">℃</text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="optsc"
-					:chartData="chart_temperature"
-				  />
-			  </view>
-			</view>
-			<!-- 浊度 -->
-			<view class="chart_section">
-			  <view class="top_box">
-				  <view class="tit">浊度<text class="unit">NTU</text></view>
-				  <view class="name">{{addressName}}</view>
-			  </view>
-				<view class="mb-20rpx">
-					<u-line></u-line>
-				</view>
-			  <view class="cart_box">
-				  <qiun-data-charts 
-					:loadingType="loadingType"
-					type="area"
-					:opts="opts"
-					:chartData="chart_turbidity"
-				  />
-			  </view>
-			</view>
-		</template>
-		</view>
-		<!-- 设置预警值 -->
-		<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
-		 mode="center" :closeable="true" :mask-close-able="false" z-index="910">
-			<view class="u-popup-section">
-				<view class="top_box">
-					<view class="title">设置预警值</view>
-				</view>
-				<scroll-view class="scroll-y" scroll-y="true">
-					<view class="form_cont">
-						<u-form v-for="(info,k) in formInfo" :key="k">
-							<view class="title2 u-border-bottom">{{keyToName[k]}}</view>
-							<u-form-item v-for="(cd2,k2) in info"
-							:label="numberToString[k2]+'级预警'" label-width="140" :key="k2">
-								<view class="row" >
-									<view class="input_box flex-row u-margin-bottom-20"
-									v-for="(item,index) in cd2" :key="index">
-										<view class="input_unit_ibox flex-row u-border">
-											<u-input type="number" v-model="item.min" placeholder="请输入" :clearable="false"/>
-											<view class="unit">{{keyToUnit[k]}}</view>
-										</view>
-									    <view class="pdlr12">~</view>
-										<view class="input_unit_ibox flex-row u-border">
-											<u-input type="number" v-model="item.max" placeholder="请输入" :clearable="false"/>
-											<view class="unit">{{keyToUnit[k]}}</view>
-										</view>
-									</view>
-									
-								</view>
-							</u-form-item>
-						</u-form>
-					</view>
-				</scroll-view>
-				<view class="buttom_section">
-					<u-button class="btn" type="default" @click="warningShow = false">取消</u-button>
-					<u-button class="btn" @click="warningInfoBtn()" type="primary">确定</u-button>
-				</view>
-			</view>
-		</u-popup>
-		<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
-	</view>
+  <view class="warning-page">
+    <view class="content-box">
+      <view class="secreen-section">
+        <u-dropdown ref="uDropdown" @open="openDropDown">
+          <u-dropdown-item
+            v-model="addressValue"
+            title="基地"
+            :options="deviceAddressList"
+            @change="change"
+          ></u-dropdown-item>
+          <u-dropdown-item
+            v-model="device_id"
+            title="检测点"
+            :options="options2"
+            @change="change2"
+          ></u-dropdown-item>
+          <u-dropdown-item title="日期">
+            <view class="slot-content" style="background-color: #ffffff">
+              <view class="select-date u-border-bottom">
+                <view class="name" @click="calendarShow = true">
+                  <u-icon name="calendar" color="#333" size="32"></u-icon>
+                  <text style="margin-left: 6rpx">选择日期：</text>
+                </view>
+                <view class="time_box">
+                  <view
+                    class="tip_txt"
+                    v-if="!start_date_c"
+                    @click="calendarShow = true"
+                    >开始日期-结束日期</view
+                  >
+                  <view class="tile_val" v-else @click="calendarShow = true"
+                    >{{ start_date_c }} ~ {{ end_date_c }}</view
+                  >
+                  <view
+                    class="delete_btn"
+                    v-if="start_date_c"
+                    @click="deleteDateFn()"
+                  >
+                    <u-icon name="close-circle" color="#333" size="34"></u-icon>
+                  </view>
+                </view>
+              </view>
+              <u-button type="primary" @click="selectedDateConform()"
+                >确定</u-button
+              >
+            </view>
+          </u-dropdown-item>
+        </u-dropdown>
+        <view class="quick_times">
+          <view class="tab-section">
+            <view
+              class="tab-item"
+              :class="currentIndex == index ? 'active' : ''"
+              v-for="(item, index) in sublist"
+              @click="subChange1(index)"
+              :key="index"
+            >
+              <view class="name">{{ item.name }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="warning-section">
+        <view class="top_box">
+          <view class="tit">预警数据统计</view>
+          <view class="set_warning">
+            <u-button
+              v-auth="['endpoint.water.setting', 'endpoint.water.setting_edit']"
+              class="set_btn"
+              @click="setWarnInfo()"
+              size="mini"
+              >设置</u-button
+            >
+          </view>
+        </view>
+        <view class="mb-20rpx">
+          <u-line></u-line>
+        </view>
+        <view class="cont-box">
+          <view class="warning-item" @click="warningClickFn(1)">
+            <view class="name">Ⅰ级预警</view>
+            <view class="val"
+              >{{ deviceWarning[1] ? deviceWarning[1] : 0
+              }}<text class="unit">个</text></view
+            >
+          </view>
+          <view class="warning-item" @click="warningClickFn(2)">
+            <view class="name">Ⅱ级预警</view>
+            <view class="val"
+              >{{ deviceWarning[2] ? deviceWarning[2] : 0
+              }}<text class="unit">个</text></view
+            >
+          </view>
+          <view class="warning-item" @click="warningClickFn(3)">
+            <view class="name">Ⅲ级预警</view>
+            <view class="val"
+              >{{ deviceWarning[3] ? deviceWarning[3] : 0
+              }}<text class="unit">个</text></view
+            >
+          </view>
+          <view class="warning-item" @click="warningClickFn(4)">
+            <view class="name">Ⅳ级预警</view>
+            <view class="val"
+              >{{ deviceWarning[4] ? deviceWarning[4] : 0
+              }}<text class="unit">个</text></view
+            >
+          </view>
+        </view>
+      </view>
+      <template v-if="loadingType != 0">
+        <!-- 氯 -->
+        <view class="chart_section" v-if="chart_chlorine">
+          <view class="top_box">
+            <view class="tit">氯<text class="unit">mg/L</text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="opts"
+              :chartData="chart_chlorine"
+            />
+          </view>
+        </view>
+        <!-- 电导率 -->
+        <view class="chart_section" v-if="chart_conductivity">
+          <view class="top_box">
+            <view class="tit">电导率<text class="unit">us/cm</text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="opts"
+              :chartData="chart_conductivity"
+            />
+          </view>
+        </view>
+
+        <!-- 氧气 -->
+        <view class="chart_section" v-if="chart_oxygen">
+          <view class="top_box">
+            <view class="tit">氧气<text class="unit">mg/L</text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="opts"
+              :chartData="chart_oxygen"
+            />
+          </view>
+        </view>
+        <!-- PH -->
+        <view class="chart_section" v-if="chart_ph">
+          <view class="top_box">
+            <view class="tit">PH<text class="unit"></text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="opts"
+              :chartData="chart_ph"
+            />
+          </view>
+        </view>
+        <!-- 温度 -->
+        <view class="chart_section" v-if="chart_temperature">
+          <view class="top_box">
+            <view class="tit">温度<text class="unit">℃</text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="optsc"
+              :chartData="chart_temperature"
+            />
+          </view>
+        </view>
+        <!-- 浊度 -->
+        <view class="chart_section" v-if="chart_turbidity">
+          <view class="top_box">
+            <view class="tit">浊度<text class="unit">NTU</text></view>
+            <view class="name">{{ addressName }}</view>
+          </view>
+          <view class="mb-20rpx">
+            <u-line></u-line>
+          </view>
+          <view class="cart_box">
+            <qiun-data-charts
+              :loadingType="loadingType"
+              type="area"
+              :opts="opts"
+              :chartData="chart_turbidity"
+            />
+          </view>
+        </view>
+      </template>
+    </view>
+    <!-- 设置预警值 -->
+    <u-popup
+      v-model="warningShow"
+      border-radius="28"
+      width="94%"
+      height="70%"
+      mode="center"
+      :closeable="true"
+      :mask-close-able="false"
+      z-index="910"
+    >
+      <view class="u-popup-section">
+        <view class="top_box">
+          <view class="title">设置预警值</view>
+        </view>
+        <scroll-view class="scroll-y" scroll-y="true">
+          <view class="form_cont">
+            <u-form v-for="(info, k) in formInfo" :key="k">
+              <view class="title2 u-border-bottom">{{ keyToName[k] }}</view>
+              <u-form-item
+                v-for="(cd2, k2) in info"
+                :label="numberToString[k2] + '级预警'"
+                label-width="140"
+                :key="k2"
+              >
+                <view class="row">
+                  <view
+                    class="input_box flex-row u-margin-bottom-20"
+                    v-for="(item, index) in cd2"
+                    :key="index"
+                  >
+                    <view class="input_unit_ibox flex-row u-border">
+                      <u-input
+                        type="number"
+                        v-model="item.min"
+                        placeholder="请输入"
+                        :clearable="false"
+                      />
+                      <view class="unit">{{ keyToUnit[k] }}</view>
+                    </view>
+                    <view class="pdlr12">~</view>
+                    <view class="input_unit_ibox flex-row u-border">
+                      <u-input
+                        type="number"
+                        v-model="item.max"
+                        placeholder="请输入"
+                        :clearable="false"
+                      />
+                      <view class="unit">{{ keyToUnit[k] }}</view>
+                    </view>
+                  </view>
+                </view>
+              </u-form-item>
+            </u-form>
+          </view>
+        </scroll-view>
+        <view class="buttom_section">
+          <u-button class="btn" type="default" @click="warningShow = false"
+            >取消</u-button
+          >
+          <u-button class="btn" @click="warningInfoBtn()" type="primary"
+            >确定</u-button
+          >
+        </view>
+      </view>
+    </u-popup>
+    <u-calendar
+      v-model="calendarShow"
+      :mode="'range'"
+      @change="calendarChange"
+    ></u-calendar>
+  </view>
 </template>
 
 <script>
-	import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
-	import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
-	export default {
-		components: { QiunDataCharts },
-		data() {
-			return {
-				loadingType:1,
-				optsc:{},
-				opts: {
-					dataLabel:false,//显示数据
-					padding:[10,40,25,25],
-					xAxis: {
-					  disableGrid: true,
-					  labelCount:5,
-					  
-					},
-					yAxis: {
-					  gridType: "dash",
-					  data:[
-						  {
-							  min:0
-						  }
-					  ]
-					},
-					extra: {
-					  area: {
-						type: "curve",
-						opacity: 0.9,
-						addLine: true,
-						gradient: true,
-					  },
-					}
-				},
-				chart_conductivity:{},//电导率
-				chart_chlorine:{},//氯
-				chart_oxygen:{},//氧气
-				chart_ph:{},//PH
-				chart_temperature:{},//温度
-				chart_turbidity:{},//浊度
-				//筛选
-				q_start_time:'',
-				q_end_time:'',
-				deviceAddressList:[],//筛选设备地区列表
-				addressName:'',
-				addressValue:'',
-				device_id:'11',//检测点 - options2中的设备id
-				options2:[],
-				calendarShow:false,//选择日期
-				start_date_c:'',
-				end_date_c:'',
-				sublist:[
-					{
-						name: '今天'
-					},
-					 {
-					 	name: '近一周'
-					 }, 
-					 {
-					 	name: '近一月'
-					 }, 
-				],
-				currentIndex:0,
-				deviceWarning:{},//设备预警
-				warningShow:false,
-				formInfo:{},//设置表单
-				keyToName:{
-					temperature:'温度',
-					conductivity:'电导率',
-					chlorine:'氯',
-					oxygen:'氧气',
-					ph:'PH',
-					turbidity:'浊度',
-				},
-				keyToUnit:{
-					temperature:'℃',
-					conductivity:'us/cm',
-					chlorine:'mg/L',
-					oxygen:'mg/L',
-					ph:'',
-					turbidity:'NTU',
-				},
-				numberToString:{
-					1:'Ⅰ',
-					2:'Ⅱ',
-					3:'Ⅲ',
-					4:'Ⅳ'
-				},
-				device_type:3,
-			};
-		},
-		onLoad(){
-			this.queryDeviceBasics();
-			this.optsc = JSON.parse(JSON.stringify(this.opts));
-		},
-		onShow(){
-			
-		},
-		methods:{
-			warningClickFn(lv){
-				
-				let urlparams = `?lv=${lv}&base=${this.addressValue}&device=${this.device_id}&title=水质监控`;
-				uni.navigateTo({
-					url:`/pages/index/warning-list${urlparams}`
-				})
-			},
-			//设置预警值
-			setWarnInfo(){
-				this.getDeviceWarningRules();
-				this.warningShow = true;
-			},
-			//地区
-			change(val){
-				console.log(val);
-				let narray = this.deviceAddressList.filter(item=>{
-					return item.value==val;
-				})
-				console.log(narray);
-				this.addressName = narray[0].name;
-				this.$refs.uDropdown.highlight(0);
-				this.queryAddressDevicePoints(val);
-				
-			},
-			
-			//地区下设备id
-			change2(val){
-				this.$refs.uDropdown.highlight(1);
-				this.queryMonitoringData();
-				this.getDeviceWarningNums();//报警查询
-			},
-			//日期范围
-			calendarChange(e){
-				console.log(e,'日期范围')
-				this.start_date_c = e.startDate;
-				this.end_date_c = e.endDate;
-			},
-			selectedDateConform(){
-				this.q_start_time = this.start_date_c;
-				this.q_end_time = this.end_date_c;
-				this.queryMonitoringData();
-				this.$refs.uDropdown.close();
-				if(this.q_start_time!=this.q_end_time){
-					this.currentIndex = -1;
-				}else{
-					this.currentIndex = 0;
-				}
-				
-			},
-			//删除选择的时间
-			deleteDateFn(){
-				this.start_date_c = '';
-				this.end_date_c = '';
-			},
-			//时间筛选
-			openDropDown(index){
-				console.log(index,'openDropDown');
-				if(index==2){//日期
-					this.start_date_c = this.q_start_time;
-					this.end_date_c = this.q_end_time;
-				}
-			},
-			//快捷时间
-			subChange1(index){
-				console.log(index)
-				this.currentIndex = index;
-				if(index==1){
-					
-					let lastWeekDate = getLastWeekRange();
-					let startDate = this.$u.timeFormat(lastWeekDate.startDate, 'yyyy-mm-dd');
-					let endDate = this.$u.timeFormat(lastWeekDate.endDate, 'yyyy-mm-dd');
-					console.log(startDate,endDate);
-					this.q_start_time = startDate;
-					this.q_end_time = endDate;
-				}else if(index==2){
-					let lastMonthRange = getLastMonthRange();
-					let startDate = this.$u.timeFormat(lastMonthRange.startDate, 'yyyy-mm-dd');
-					let endDate = this.$u.timeFormat(lastMonthRange.endDate, 'yyyy-mm-dd');
-					console.log(startDate,endDate);
-					this.q_start_time = startDate;
-					this.q_end_time = endDate;
-				}else{
-					this.q_start_time = '';
-					this.q_end_time = '';
-				}
-				this.queryMonitoringData();
-				
-			},
-			//设置警戒值
-			warningInfoBtn(){
-				let params = {
-					slug: "device_warning_rule_waterquality",
-					value:this.formInfo
-				}
-				this.$http.put('/api/device-warning-rules',params).then(({data})=>{
-					this.warningShow = false;
-					if(data.code==200){
-						uni.showToast({ title: '设置成功', icon: 'none' });
-					}else{
-						uni.showToast({ title: '设置失败', icon: 'none' });
-					}
-				}).catch(()=>{
-					uni.showToast({ title: '设置失败', icon: 'none' });
-				})
-			},
-			//查询地址筛选
-			queryDeviceBasics(){
-				let params = {
-					device_type:this.device_type,
-					_t: new Date().getTime()
-				}
-				this.$http.get('/api/agricultural-device-basic',{params:params}).then(({data})=>{
-					console.log(data);
-					if(data.code==200){
-						let _data = data.data;
-						if(_data.length==0){
-							this.loadingType = 0
-							return this.$u.toast('没有关联基地');
+import {
+  showLoading,
+  getLastWeekRange,
+  getLastMonthRange,
+} from '@/com/utils.js'
+import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
+export default {
+  components: { QiunDataCharts },
+  data() {
+    return {
+      loadingType: 1,
+      optsc: {},
+      opts: {
+        dataLabel: false, //显示数据
+        padding: [10, 40, 25, 25],
+        xAxis: {
+          disableGrid: true,
+          labelCount: 5,
+        },
+        yAxis: {
+          gridType: 'dash',
+          data: [
+            {
+              min: 0,
+            },
+          ],
+        },
+        extra: {
+          area: {
+            type: 'curve',
+            opacity: 0.9,
+            addLine: true,
+            gradient: true,
+          },
+        },
+      },
+      chart_conductivity: {}, //电导率
+      chart_chlorine: {}, //氯
+      chart_oxygen: {}, //氧气
+      chart_ph: {}, //PH
+      chart_temperature: {}, //温度
+      chart_turbidity: {}, //浊度
+      //筛选
+      q_start_time: '',
+      q_end_time: '',
+      deviceAddressList: [], //筛选设备地区列表
+      addressName: '',
+      addressValue: '',
+      device_id: '11', //检测点 - options2中的设备id
+      options2: [],
+      calendarShow: false, //选择日期
+      start_date_c: '',
+      end_date_c: '',
+      sublist: [
+        {
+          name: '今天',
+        },
+        {
+          name: '近一周',
+        },
+        {
+          name: '近一月',
+        },
+      ],
+      currentIndex: 0,
+      deviceWarning: {}, //设备预警
+      warningShow: false,
+      formInfo: {}, //设置表单
+      keyToName: {
+        temperature: '温度',
+        conductivity: '电导率',
+        chlorine: '氯',
+        oxygen: '氧气',
+        ph: 'PH',
+        turbidity: '浊度',
+      },
+      keyToUnit: {
+        temperature: '℃',
+        conductivity: 'us/cm',
+        chlorine: 'mg/L',
+        oxygen: 'mg/L',
+        ph: '',
+        turbidity: 'NTU',
+      },
+      numberToString: {
+        1: 'Ⅰ',
+        2: 'Ⅱ',
+        3: 'Ⅲ',
+        4: 'Ⅳ',
+      },
+      device_type: 3,
+    }
+  },
+  onLoad() {
+    this.queryDeviceBasics()
+    this.optsc = JSON.parse(JSON.stringify(this.opts))
+  },
+  onShow() {},
+  methods: {
+    warningClickFn(lv) {
+      let urlparams = `?lv=${lv}&base=${this.addressValue}&device=${this.device_id}&title=水质监控`
+      uni.navigateTo({
+        url: `/pages/index/warning-list${urlparams}`,
+      })
+    },
+    //设置预警值
+    setWarnInfo() {
+      this.getDeviceWarningRules()
+      this.warningShow = true
+    },
+    //地区
+    change(val) {
+      console.log(val)
+      let narray = this.deviceAddressList.filter((item) => {
+        return item.value == val
+      })
+      console.log(narray)
+      this.addressName = narray[0].name
+      this.$refs.uDropdown.highlight(0)
+      this.queryAddressDevicePoints(val)
+    },
+
+    //地区下设备id
+    change2(val) {
+      this.$refs.uDropdown.highlight(1)
+      this.queryMonitoringData()
+      this.getDeviceWarningNums() //报警查询
+    },
+    //日期范围
+    calendarChange(e) {
+      console.log(e, '日期范围')
+      this.start_date_c = e.startDate
+      this.end_date_c = e.endDate
+    },
+    selectedDateConform() {
+      this.q_start_time = this.start_date_c
+      this.q_end_time = this.end_date_c
+      this.queryMonitoringData()
+      this.$refs.uDropdown.close()
+      if (this.q_start_time != this.q_end_time) {
+        this.currentIndex = -1
+      } else {
+        this.currentIndex = 0
+      }
+    },
+    //删除选择的时间
+    deleteDateFn() {
+      this.start_date_c = ''
+      this.end_date_c = ''
+    },
+    //时间筛选
+    openDropDown(index) {
+      console.log(index, 'openDropDown')
+      if (index == 2) {
+        //日期
+        this.start_date_c = this.q_start_time
+        this.end_date_c = this.q_end_time
+      }
+    },
+    //快捷时间
+    subChange1(index) {
+      console.log(index)
+      this.currentIndex = index
+      if (index == 1) {
+        let lastWeekDate = getLastWeekRange()
+        let startDate = this.$u.timeFormat(lastWeekDate.startDate, 'yyyy-mm-dd')
+        let endDate = this.$u.timeFormat(lastWeekDate.endDate, 'yyyy-mm-dd')
+        console.log(startDate, endDate)
+        this.q_start_time = startDate
+        this.q_end_time = endDate
+      } else if (index == 2) {
+        let lastMonthRange = getLastMonthRange()
+        let startDate = this.$u.timeFormat(
+          lastMonthRange.startDate,
+          'yyyy-mm-dd'
+        )
+        let endDate = this.$u.timeFormat(lastMonthRange.endDate, 'yyyy-mm-dd')
+        console.log(startDate, endDate)
+        this.q_start_time = startDate
+        this.q_end_time = endDate
+      } else {
+        this.q_start_time = ''
+        this.q_end_time = ''
+      }
+      this.queryMonitoringData()
+    },
+    //设置警戒值
+    warningInfoBtn() {
+      let params = {
+        slug: 'device_warning_rule_waterquality',
+        value: this.formInfo,
+      }
+      this.$http
+        .put('/api/device-warning-rules', params)
+        .then(({ data }) => {
+          this.warningShow = false
+          if (data.code == 200) {
+            uni.showToast({ title: '设置成功', icon: 'none' })
+          } else {
+            uni.showToast({ title: '设置失败', icon: 'none' })
+          }
+        })
+        .catch(() => {
+          uni.showToast({ title: '设置失败', icon: 'none' })
+        })
+    },
+    //查询地址筛选
+    queryDeviceBasics() {
+      let params = {
+        device_type: this.device_type,
+        _t: new Date().getTime(),
+      }
+      this.$http
+        .get('/api/agricultural-device-basic', { params: params })
+        .then(({ data }) => {
+          if (data.code == 200) {
+            let _data = data.data
+            if (_data.length == 0) {
+              this.loadingType = 0
+              return this.$u.toast('没有关联基地')
+            }
+            for (let item of _data) {
+              item['label'] = item.name
+              item['value'] = item.id
+            }
+            this.deviceAddressList = _data
+            this.addressValue = _data[0].id
+            this.addressName = _data[0].name
+
+            this.queryAddressDevicePoints(this.addressValue)
+          }
+        })
+        .catch(() => {})
+    },
+    //查询地址下的设备监控点
+    queryAddressDevicePoints(id) {
+      let params = {
+        device_type: this.device_type,
+        agricultural_basic: id,
+        _t: new Date().getTime(),
+      }
+      this.$http
+        .get(`/api/agricultural-device-point/${id}`, { params: params })
+        .then(({ data }) => {
+          console.log(data)
+          if (data.code == 200) {
+            let _data = data.data
+            if (_data.length == 0) {
+              // return this.$u.toast('监测点为空');
+            }
+            let options = []
+            for (let k in _data) {
+              let item = {}
+              item['label'] = _data[k]
+              item['value'] = k
+              options.push(item)
+            }
+            this.options2 = options
+            this.device_id = options[0].value
+            console.log(this.options2, this.device_id, 'this.options2')
+            this.queryMonitoringData()
+            this.getDeviceWarningNums() //报警查询
+          }
+        })
+        .catch(() => {})
+    },
+    //查询监测数据
+    queryMonitoringData() {
+      let params = {
+        device_id: this.device_id,
+        start_time: this.q_start_time,
+        end_time: this.q_end_time,
+        _t: new Date().getTime(),
+      }
+      this.$http
+        .get('/api/monitoring-data', { params: params })
+        .then(({ data }) => {
+          if (data.code == 200) {
+            let info = data.data
+
+            let chartInfo = {}
+
+            for (let fk in info) {
+              let _item = {
+                categories: [],
+                data: [],
+              }
+
+              if (info[fk]) {
+                for (let k in info[fk]) {
+                  _item.data.push(info[fk][k])
+
+                  let timestamp = new Date(k).getTime()
+                  // let time1 = k.split(/\s+/);
+                  if (params.start_time != params.end_time) {
+                    let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
+                    _item.categories.push(time1)
+                  } else {
+                    let time2 = this.$u.timeFormat(timestamp, 'hh:ss')
+                    _item.categories.push(time2)
+                  }
+                }
+                chartInfo[fk] = _item
+              }
+            }
+            console.log(chartInfo, 'chartDatas--')
+            if (params.start_time != params.end_time) {
+              //不是当天
+              this.opts.xAxis.labelCount = 3
+              this.optsc.xAxis.labelCount = 3
+            } else {
+              let len = chartInfo.oxygen.categories.length - 1
+              let v = 5
+              let aw = len > 10 ? len % 6 : len % 5
+
+              if (aw == 3 || aw == 0 || aw == 1) {
+                v = 4
+              } else if (aw == 2) {
+                v = 3
+              } else {
+                v = 5
+              }
+              this.opts.xAxis.labelCount = v
+              this.optsc.xAxis.labelCount = v
+              console.log(this.opts, v, len, '配置', aw)
+            }
+
+            //start 氯
+            if (chartInfo.chlorine) {
+              let res2 = {
+                categories: chartInfo.chlorine.categories,
+                series: [
+                  {
+                    name: '氯',
+                    legendShape: 'circle',
+                    data: chartInfo.chlorine.data,
+                  },
+                ],
+              }
+              this.chart_chlorine = JSON.parse(JSON.stringify(res2))
+            }else{
+							this.chart_chlorine = null
 						}
-						for(let item of _data){
-							item['label'] = item.name;
-							item['value'] = item.id;
+            //end 氯
+
+            //start 电导率 conductivity
+            if (chartInfo.conductivity) {
+              let res = {
+                categories: chartInfo.conductivity.categories,
+                series: [
+                  {
+                    name: '电导率',
+                    legendShape: 'circle',
+                    data: chartInfo.conductivity.data,
+                  },
+                ],
+              }
+
+              this.chart_conductivity = JSON.parse(JSON.stringify(res))
+              console.log(this.chart_conductivity, '电导率')
+            }else{
+							this.chart_conductivity = null
 						}
-						this.deviceAddressList = _data;
-						this.addressValue = _data[0].id;
-						this.addressName = _data[0].name;
-						
-						this.queryAddressDevicePoints(this.addressValue);
-					}
-				}).catch(()=>{
-					
-				})
-			},
-			//查询地址下的设备监控点
-			queryAddressDevicePoints(id){
-				let params = {
-					device_type:this.device_type,
-					agricultural_basic:id,
-					_t: new Date().getTime()
-				}
-				this.$http.get(`/api/agricultural-device-point/${id}`,{params:params}).then(({data})=>{
-					console.log(data);
-					if(data.code==200){
-						let _data = data.data;
-						if(_data.length==0){
-							// return this.$u.toast('监测点为空');
+            //end 电导率 conductivity
+
+            //start 氧气 oxygen
+            if (chartInfo.oxygen) {
+              let res3 = {
+                categories: chartInfo.oxygen.categories,
+                series: [
+                  {
+                    name: '氧气',
+                    legendShape: 'circle',
+                    data: chartInfo.oxygen.data,
+                  },
+                ],
+              }
+
+              this.chart_oxygen = JSON.parse(JSON.stringify(res3))
+            }else{
+							this.chart_oxygen = null
 						}
-						let options = [];
-						for(let k in _data){
-							let item = {};
-							item['label'] = _data[k];
-							item['value'] = k;
-							options.push(item);
+            //end 氧气
+            //start PH
+            if (chartInfo.ph) {
+              let res4 = {
+                categories: chartInfo.ph.categories,
+                series: [
+                  {
+                    name: 'PH',
+                    legendShape: 'circle',
+                    data: chartInfo.ph.data,
+                  },
+                ],
+              }
+              this.chart_ph = JSON.parse(JSON.stringify(res4))
+            }else{
+							this.chart_ph = null
 						}
-						this.options2 = options;
-						this.device_id = options[0].value;
-						console.log(this.options2,this.device_id,'this.options2')
-						this.queryMonitoringData();
-						this.getDeviceWarningNums();//报警查询
-					}
-				}).catch(()=>{
-					
-				})
-			},
-			//查询监测数据
-			queryMonitoringData(){
-				let params = {
-					device_id:this.device_id,
-					start_time:this.q_start_time,
-					end_time:this.q_end_time,
-					_t: new Date().getTime()
-				}
-				this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
-					if(data.code==200){
-						let info = data.data;
-						let chartInfo = {};
-						
-						for(let fk in info){
-							let _item = {
-								categories: [],
-								data:[]
-							}
-							for(let k in info[fk]){
-								
-								_item.data.push(info[fk][k]);
-								
-								let timestamp = new Date(k).getTime();
-								// let time1 = k.split(/\s+/);
-								if(params.start_time!=params.end_time){
-									let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
-									_item.categories.push(time1);
-								}else{
-									let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
-									_item.categories.push(time2);
-								}
-							}
-							chartInfo[fk] = _item;
+            //start 温度 temperature
+            if (chartInfo.temperature) {
+              let res5 = {
+                categories: chartInfo.temperature.categories,
+                series: [
+                  {
+                    name: '温度',
+                    legendShape: 'circle',
+                    data: chartInfo.temperature.data,
+                  },
+                ],
+              }
+              let min_temperature = 0
+              for (let val of chartInfo.temperature.data) {
+                if (val < 0) {
+                  min_temperature = val
+                }
+              }
+              if (min_temperature < 0) {
+                this.optsc.yAxis.data = []
+              }
+              this.chart_temperature = JSON.parse(JSON.stringify(res5))
+            }else{
+							this.chart_temperature = null
 						}
-						console.log(chartInfo,'chartDatas--')
-						if(params.start_time!=params.end_time){//不是当天
-							this.opts.xAxis.labelCount = 3;
-							this.optsc.xAxis.labelCount = 3;
-						}else{
-							
-							let len = chartInfo.conductivity.categories.length-1;
-							let v = 5;
-							let aw = len>10?len%6:len%5;
-							if(aw==3||aw==0||aw==1){
-								v = 4;
-							}else if(aw==2){
-								v = 3;
-							}else{v=5}
-							this.opts.xAxis.labelCount = v;
-							this.optsc.xAxis.labelCount = v;
-							console.log(this.opts,v,len,'配置',aw) 
+            //end 温度 temperature
+            //start 浊度 turbidity
+            if (chartInfo.turbidity) {
+              let res6 = {
+                categories: chartInfo.turbidity.categories,
+                series: [
+                  {
+                    name: '浊度',
+                    legendShape: 'circle',
+                    data: chartInfo.turbidity.data,
+                  },
+                ],
+              }
+              this.chart_turbidity = JSON.parse(JSON.stringify(res6))
+            }else{
+							this.chart_turbidity = null
 						}
-						//start 氯
-						let res2 = {
-						    categories: chartInfo.chlorine.categories,
-						    series: [
-						      {
-								name:'氯',
-								legendShape:'circle',
-						        data: chartInfo.chlorine.data
-						      }
-						    ]
-						};
-						this.chart_chlorine = JSON.parse(JSON.stringify(res2));
-						//end 氯
-						
-						//start 电导率 conductivity
-						let res = {
-						    categories: chartInfo.conductivity.categories,
-						    series: [
-						      {
-								name:'电导率',
-								legendShape:'circle',
-						        data: chartInfo.conductivity.data,
-								
-						      }
-						    ]
-						};
-						
-						this.chart_conductivity = JSON.parse(JSON.stringify(res));
-						console.log(this.chart_conductivity,'电导率')
-						//end 电导率 conductivity
-						
-						//start 氧气 oxygen
-						let res3 = {
-						    categories: chartInfo.oxygen.categories,
-						    series: [
-						      {
-							    name:'氧气',
-							    legendShape:'circle',
-							    data: chartInfo.oxygen.data
-						      }
-						    ]
-						};
-						
-						this.chart_oxygen = JSON.parse(JSON.stringify(res3));
-						//end 氧气
-						//start PH
-						let res4 = {
-						    categories: chartInfo.ph.categories,
-						    series: [
-						      {
-							    name:'PH',
-							    legendShape:'circle',
-						        data: chartInfo.ph.data,
-						      }
-						    ]
-						};
-						this.chart_ph = JSON.parse(JSON.stringify(res4));
-						//start 温度 temperature
-						let res5 = {
-						    categories: chartInfo.temperature.categories,
-						    series: [
-						      {
-								name:'温度',
-								legendShape:'circle',
-						        data: chartInfo.temperature.data,
-						      }
-						    ]
-						};
-						let min_temperature = 0;
-						for(let val of chartInfo.temperature.data){
-							if(val<0){
-								min_temperature = val;
-							}
-						}
-						if(min_temperature<0){
-							this.optsc.yAxis.data = [];
-						}
-						this.chart_temperature = JSON.parse(JSON.stringify(res5));
-						//end 温度 temperature
-						//start 浊度 turbidity
-						let res6 = {
-						    categories: chartInfo.turbidity.categories,
-						    series: [
-						      {
-								name:'浊度',
-								legendShape:'circle',
-						        data: chartInfo.turbidity.data,
-						      }
-						    ]
-						};
-						this.chart_turbidity = JSON.parse(JSON.stringify(res6));
-						//end 浊度 turbidity
-						
-					}
-				}).catch(()=>{
-					
-				})
-				
-			},
-			//预警查询
-			getDeviceWarningNums(){
-				let params = {
-					base:this.addressValue,
-					device:this.device_id,
-					status:0,
-					_t: new Date().getTime()
-				}
-				this.$http.get('/api/device-warning-nums',{params:params}).then(({data})=>{
-					if(data.code==200){
-						this.deviceWarning = data.data;
-					}
-				}).catch(()=>{
-					
-				})
-			},
-			//预警规则
-			getDeviceWarningRules(){
-				this.$http.get('/api/device-warning-rules',{params:{}}).then(({data})=>{
-					if(data.code==200){
-						let _data = data.data;
-						let info = {};
-						for(let item of _data){
-							if(item.slug=='device_warning_rule_waterquality'){//警报
-								info = item;
-								break;
-							}
-						}
-						this.formInfo = info.value;
-					}
-				}).catch(()=>{
-					
-				})
-			}
-		}
-	}
+            //end 浊度 turbidity
+          }
+        })
+        .catch(() => {})
+    },
+    //预警查询
+    getDeviceWarningNums() {
+      let params = {
+        base: this.addressValue,
+        device: this.device_id,
+        status: 0,
+        _t: new Date().getTime(),
+      }
+      this.$http
+        .get('/api/device-warning-nums', { params: params })
+        .then(({ data }) => {
+          if (data.code == 200) {
+            this.deviceWarning = data.data
+          }
+        })
+        .catch(() => {})
+    },
+    //预警规则
+    getDeviceWarningRules() {
+      this.$http
+        .get('/api/device-warning-rules', { params: {} })
+        .then(({ data }) => {
+          if (data.code == 200) {
+            let _data = data.data
+            let info = {}
+            for (let item of _data) {
+              if (item.slug == 'device_warning_rule_waterquality') {
+                //警报
+                info = item
+                break
+              }
+            }
+            this.formInfo = info.value
+          }
+        })
+        .catch(() => {})
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-.content-box{
-	padding-bottom: 60rpx;
+.content-box {
+  padding-bottom: 60rpx;
 }
 
-.warning-section{
-	padding: 20rpx 24rpx;
-	background-color: #fff;
-	border-top: 14rpx solid #f5f5f5;
-	border-bottom: 14rpx solid #f5f5f5;
-	.top_box{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		// margin-bottom: 24rpx;
-		padding-bottom: 20rpx;
-		.tit{
-			font-weight: bold;
-		}
-		.set_warning{
-			display: flex;
-			align-items: center;
-		}
-	}
-	.cont-box{
-		display: flex;
-		padding-bottom: 12rpx;
-		
-	}
-	.warning-item{
-		flex: 1;
-		text-align: center;
-		.name{
-			margin-bottom: 15rpx;
-		}
-		.val{
-			font-size: 34rpx;
-			font-weight: bold;
-		}
-		.unit{
-			font-size: 24rpx;
-			font-weight: 500;
-			margin-left: 6rpx;
-		}
-	}
+.warning-section {
+  padding: 20rpx 24rpx;
+  background-color: #fff;
+  border-top: 14rpx solid #f5f5f5;
+  border-bottom: 14rpx solid #f5f5f5;
+  .top_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // margin-bottom: 24rpx;
+    padding-bottom: 20rpx;
+    .tit {
+      font-weight: bold;
+    }
+    .set_warning {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .cont-box {
+    display: flex;
+    padding-bottom: 12rpx;
+  }
+  .warning-item {
+    flex: 1;
+    text-align: center;
+    .name {
+      margin-bottom: 15rpx;
+    }
+    .val {
+      font-size: 34rpx;
+      font-weight: bold;
+    }
+    .unit {
+      font-size: 24rpx;
+      font-weight: 500;
+      margin-left: 6rpx;
+    }
+  }
 }
 </style>