|
|
@@ -7,10 +7,10 @@
|
|
|
</view>
|
|
|
<view class="info">
|
|
|
<view class="info_item">
|
|
|
- <image :src="eqinfo.item.is_online==1?'http://static.yfpyx.com/bigdata_app/image/cb/onBg.png':'http://static.yfpyx.com/bigdata_app/image/cb/offBg.png'" mode=""
|
|
|
- class="bgi"></image>
|
|
|
+ <image :src="eqinfo.item.is_online==1?'http://static.yfpyx.com/bigdata_app/image/cb/onBg.png':'http://static.yfpyx.com/bigdata_app/image/cb/offBg.png'"
|
|
|
+ mode="" class="bgi"></image>
|
|
|
<p style="font-size: 32rpx;" @click="copy(eqinfo.item)">设备 ID:{{eqinfo.item.equip_id||eqinfo.item.device_id}}
|
|
|
- <image src="http://static.yfpyx.com/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi"></image>
|
|
|
+ <image src="http://static.yfpyx.com/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi"></image>
|
|
|
</p>
|
|
|
<p>设备名称:{{eqinfo.item.equip_name?eqinfo.item.equip_name:"无"}}</p>
|
|
|
<p>最近上报时间:{{eqinfo.item.uptime|timeFormat()}}</p>
|
|
|
@@ -22,7 +22,7 @@
|
|
|
<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/environment/8.png'" mode=""></image>
|
|
|
<p>设备控制</p>
|
|
|
</view>
|
|
|
- <view class="control_item" @click="repairs">
|
|
|
+ <view class="control_item" @click="repairs">
|
|
|
<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/environment/7.png'" mode=""></image>
|
|
|
<p>一键报修</p>
|
|
|
</view>
|
|
|
@@ -35,9 +35,10 @@
|
|
|
<p class="realtime_title">实时数据</p>
|
|
|
<view class="realtime_text">
|
|
|
<view class="realtime_text_item">
|
|
|
- <view class="realtime_text_item_info" v-for="(item,index) in olddata.conf" :key="index" v-if="item">
|
|
|
+ <view class="realtime_text_item_info" v-for="(item,index) in olddata.conf" :key="index" v-if="item" @click="oneday(item,index)">
|
|
|
<view class="item_info_img" :style="{'background-color':olddatas[Math.floor(Math.random()*(5-0+1))]}">
|
|
|
- <image :src="'http://static.yfpyx.com/bigdata_app'+'/image/environment/icon_'+olddata.dat[index][1]+'.png'" mode=""></image>
|
|
|
+ <image :src="'http://static.yfpyx.com/bigdata_app'+'/image/environment/icon_'+olddata.dat[index][1]+'.png'"
|
|
|
+ mode=""></image>
|
|
|
</view>
|
|
|
<view class="item_info_text">
|
|
|
<p>{{item}}</p>
|
|
|
@@ -48,10 +49,30 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-modal v-model="show" :title-style="{color: 'red'}" :mask-close-able="true" title="24小时数据">
|
|
|
+ <p class="tishiTF" v-if="tishiTF">暂无24小时数据</p>
|
|
|
+ <view class="slot-content" v-else>
|
|
|
+ <canvas v-if="canvastishiTF" canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchLineA($event)"
|
|
|
+ @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)" disable-scroll=true :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
|
|
|
+ <view class="maxdata">
|
|
|
+ <view class="maxdata_box">
|
|
|
+ <p class="dian"></p>
|
|
|
+ <p>当天最大值:{{onedatasMax}}  {{onedatasMaxtime|timeFormat()}}</p>
|
|
|
+ </view>
|
|
|
+ <view class="maxdata_box">
|
|
|
+ <p class="dian diantwo"></p>
|
|
|
+ <p>当天最小值:{{onedatasMin}}  {{onedatasMintime|timeFormat()}}</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
|
|
|
+ var canvasColumnA = null;
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -59,9 +80,20 @@
|
|
|
olddata: {},
|
|
|
olddatas: ["#fba825", "#53d67c", "#008cf2", "#fb504d", "#d87ffc", "#4ec5f0"],
|
|
|
city: "",
|
|
|
- kongtf:false,
|
|
|
- daydatatf:false,
|
|
|
- shujutf:false
|
|
|
+ kongtf: false,
|
|
|
+ daydatatf: false,
|
|
|
+ shujutf: false,
|
|
|
+ onedatas: [],
|
|
|
+ canvastishiTF: true,
|
|
|
+ cWidth: '300',
|
|
|
+ cHeight: '200',
|
|
|
+ pixelRatio: 1,
|
|
|
+ show: false,
|
|
|
+ onedatasMax: 0,
|
|
|
+ onedatasMin: 0,
|
|
|
+ onedatasMaxtime:"",
|
|
|
+ onedatasMintime:"",
|
|
|
+ tishiTF:false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -86,6 +118,21 @@
|
|
|
}
|
|
|
console.log(this.olddata)
|
|
|
},
|
|
|
+ // weather.weather.qxz_data_chart 一天的数据
|
|
|
+ async onehistory() { //设备列表
|
|
|
+ var newtime = +new Date()/1000
|
|
|
+ var oldtime = newtime-24*60*60
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=weather.weather.qxz_data_chart',
|
|
|
+ data: {
|
|
|
+ device_id: this.eqinfo.item.equip_id || this.eqinfo.item.device_id,
|
|
|
+ begin: parseInt(oldtime),
|
|
|
+ end: parseInt(newtime)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.onedatas = res.data
|
|
|
+ console.log(this.onedatas)
|
|
|
+ },
|
|
|
control() { //设备控制
|
|
|
uni.navigateTo({
|
|
|
url: "./contros?id=" + this.eqinfo.item.d_id
|
|
|
@@ -96,57 +143,153 @@
|
|
|
url: "./history?device_id=" + this.eqinfo.item.equip_id
|
|
|
})
|
|
|
},
|
|
|
- reverseGeocode(lat,lng){
|
|
|
+ reverseGeocode(lat, lng) {
|
|
|
uni.request({
|
|
|
type: "GET",
|
|
|
- url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," +lat + "&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
|
|
|
+ url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
|
|
|
+ "&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
|
|
|
dataType: "json",
|
|
|
complete: ress => {
|
|
|
console.log(ress)
|
|
|
this.city = ress.data.regeocode.formatted_address
|
|
|
- }
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
- copy(item){
|
|
|
+ copy(item) {
|
|
|
uni.setClipboardData({
|
|
|
- data: item.equip_id||item.device_id,
|
|
|
- success: function () {
|
|
|
- console.log('success');
|
|
|
- }
|
|
|
+ data: item.equip_id || item.device_id,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
- repairs(){
|
|
|
+ repairs() {
|
|
|
console.log(this.eqinfo.item)
|
|
|
- var device_id = this.eqinfo.item.equip_id||this.eqinfo.item.device_id
|
|
|
+ var device_id = this.eqinfo.item.equip_id || this.eqinfo.item.device_id
|
|
|
uni.navigateTo({
|
|
|
- url: "../afterSale/addafter?device_id="+ device_id +"&device_type="+ 5
|
|
|
+ url: "../afterSale/addafter?device_id=" + device_id + "&device_type=" + 5
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ oneday(item, index) {
|
|
|
+ console.log(item, index)
|
|
|
+ var obj = {
|
|
|
+ name: item,
|
|
|
+ data: [],
|
|
|
+ }
|
|
|
+ var xtitle = []
|
|
|
+ var linearr = []
|
|
|
+ var arr = []
|
|
|
+ var timearr = []
|
|
|
+ for (var i = 0; i < this.onedatas.length; i++) {
|
|
|
+ if(Number(this.onedatas[i].dat[index].slice(0, this.onedatas[i].dat[index].indexOf("#")))!=-99.99){
|
|
|
+ obj.data.unshift(Number(this.onedatas[i].dat[index].slice(0, this.onedatas[i].dat[index].indexOf("#"))))
|
|
|
+ arr.unshift(Number(this.onedatas[i].dat[index].slice(0, this.onedatas[i].dat[index].indexOf("#"))))
|
|
|
+ var times = new Date(this.onedatas[i].time * 1000)
|
|
|
+ xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
|
|
|
+ timearr.unshift(+new Date(times)/1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arr.sort(function(a, b) {
|
|
|
+ return a - b
|
|
|
+ })
|
|
|
+ this.onedatasMin = arr[0]
|
|
|
+ this.onedatasMax = arr[arr.length - 1]
|
|
|
+ for(var i = 0; i < obj.data.length; i++){
|
|
|
+ if(this.onedatasMax==obj.data[i]){
|
|
|
+ this.onedatasMaxtime = timearr[i]
|
|
|
+ }
|
|
|
+ if(this.onedatasMin==obj.data[i]){
|
|
|
+ this.onedatasMintime = timearr[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ linearr.push(obj)
|
|
|
+ if(obj.data.length==0){
|
|
|
+ this.tishiTF = true
|
|
|
+ }else{
|
|
|
+ this.tishiTF = false
|
|
|
+ }
|
|
|
+ this.showColumn("canvasColumnA", xtitle, linearr)
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ showColumn(id, xtitle, xinfo) {
|
|
|
+ var _self = this
|
|
|
+ canvasColumnA = new uCharts({
|
|
|
+ canvasId: id,
|
|
|
+ type: 'line',
|
|
|
+ legend: {
|
|
|
+ position: "top"
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ background: '#FFFFFF',
|
|
|
+ pixelRatio: 1,
|
|
|
+ animation: true,
|
|
|
+ dataLabel: false,
|
|
|
+ categories: xtitle,
|
|
|
+ series: xinfo,
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true,
|
|
|
+ type: 'grid',
|
|
|
+ gridType: 'dash',
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
+ scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
|
|
+ scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ format:(val)=>{return val.toFixed(2)}
|
|
|
+ },
|
|
|
+ width: _self.cWidth * 1,
|
|
|
+ height: _self.cHeight * 1,
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: 'curve'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchLineA(e) {
|
|
|
+ canvasColumnA.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ canvasColumnA.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ canvasColumnA.scrollEnd(e);
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
+ canvasColumnA.showToolTip(e, {
|
|
|
+ format: function(item, category) {
|
|
|
+ return category + ' ' + item.name + ':' + item.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.$forceUpdate()
|
|
|
this.eqinfo.item = JSON.parse(option.shebei)
|
|
|
console.log(JSON.parse(option.shebei))
|
|
|
this.history()
|
|
|
- if(this.eqinfo.item.lat==''||this.eqinfo.item.lng==""){
|
|
|
+ this.onehistory()
|
|
|
+ if (this.eqinfo.item.lat == '' || this.eqinfo.item.lng == "") {
|
|
|
console.log(1)
|
|
|
- }else{
|
|
|
- this.reverseGeocode(this.eqinfo.item.lat,this.eqinfo.item.lng)
|
|
|
+ } else {
|
|
|
+ this.reverseGeocode(this.eqinfo.item.lat, this.eqinfo.item.lng)
|
|
|
}
|
|
|
uni.getStorage({
|
|
|
- key:"jurisdiction",
|
|
|
- success:(res)=>{
|
|
|
+ key: "jurisdiction",
|
|
|
+ success: (res) => {
|
|
|
console.log(JSON.parse(res.data))
|
|
|
- let items = JSON.parse(res.data).filter((item)=>{
|
|
|
+ let items = JSON.parse(res.data).filter((item) => {
|
|
|
return item.purview_name == "环境监测系统"
|
|
|
})
|
|
|
- let items2 = items[0].children.filter((item)=>{
|
|
|
+ let items2 = items[0].children.filter((item) => {
|
|
|
return item.purview_name == "环境监测"
|
|
|
})
|
|
|
var arr = items2[0].children
|
|
|
console.log(arr)
|
|
|
- for(var i =0;i<arr.length;i++){
|
|
|
- switch (arr[i].purview_name){
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ switch (arr[i].purview_name) {
|
|
|
case "设备控制":
|
|
|
this.kongtf = true
|
|
|
break
|
|
|
@@ -169,6 +312,7 @@
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
top: 44px;
|
|
|
+
|
|
|
.info_item {
|
|
|
width: 90%;
|
|
|
margin: 0 auto;
|
|
|
@@ -176,6 +320,7 @@
|
|
|
padding: 26rpx 50rpx;
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.bgi {
|
|
|
width: 100%;
|
|
|
height: 250rpx;
|
|
|
@@ -184,11 +329,13 @@
|
|
|
left: 0;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
margin-bottom: 10rpx;
|
|
|
- .tishi{
|
|
|
+
|
|
|
+ .tishi {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
margin: 0rpx 0 0 20rpx;
|
|
|
@@ -211,6 +358,7 @@
|
|
|
width: 128rpx;
|
|
|
height: 120rpx;
|
|
|
width: 33%;
|
|
|
+
|
|
|
image {
|
|
|
width: 70rpx;
|
|
|
height: 70rpx;
|
|
|
@@ -258,6 +406,7 @@
|
|
|
margin-right: 28rpx;
|
|
|
border-radius: 50%;
|
|
|
height: 90rpx;
|
|
|
+
|
|
|
image {
|
|
|
width: 64rpx;
|
|
|
height: 64rpx;
|
|
|
@@ -273,4 +422,34 @@
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+ .charts {
|
|
|
+ // width: 650upx;
|
|
|
+ // height: 400upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .tishiTF{
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .maxdata {
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ .maxdata_box {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .dian {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: red;
|
|
|
+ margin: 8rpx 10rpx 0 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diantwo {
|
|
|
+ background-color: #16c60d;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|