heyang

.gitignore

@@ -0,0 +1,2 @@
+/.idea
+/unpackage

App.vue

@@ -0,0 +1,259 @@
+<script>
+    import $mqtt from '@/utils/mqtt.min.js';
+    import { config } from '@/api/request/config.js'
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+      //获取openid
+      uni.login({
+        success(loginRes) {
+          console.log('获取code成功');
+          uni.setStorageSync('code', loginRes.code);
+        }
+      })
+		},
+		onShow: function() {
+			this.onMQTT();
+
+			console.log('App Show')
+		},
+		onHide: function() {
+            this.offMQTT();
+			console.log('App Hide')
+		},
+        data(){
+		    return{
+		        //MQTT数据
+                client:{},
+                //MQTT请求参数
+                mtopicBigview:"lab/bigview",
+                mtopicFunction:"lab/function/data",
+                mtopicHardware:"lab/hardware/data",
+				mtopicLine:"lab/exit/line",
+                //监听数据
+                watchObj:{},
+            }
+        },
+        globalData:{
+            mqttAlarmData:{},
+            mqttSensorData:{},
+            mqttDeviceData:{},
+			warnData:{},
+			lineData:{},
+        },
+        methods: {
+
+			//删除报警监听
+			delWarnData(){
+				delete this.watchObj.warnData;
+			},
+		    //删除报警监听
+            deleteAlarmWatch(){
+                delete this.watchObj.mqttAlarmData;
+            },
+		    //删除传感器监听
+            deleteSensorWatch(){
+                delete this.watchObj.mqttSensorData;
+            },
+		    //删除设备监听
+            deleteDeviceWatch(){
+                delete this.watchObj.mqttDeviceData;
+            },
+		    //删除应急监听
+            deleteLineData(){
+                delete this.watchObj.lineData;
+            },
+            //监听对应的mqtt数据
+            watch:function(method,istr){
+                this.watchObj = this.globalData;
+                Object.defineProperty(this.watchObj,istr,{
+                    configurable:true,
+                    enumerable:true,
+                    immediate: true,
+                    deep: true,
+                    set:function(value){
+                        this._consumerGoodsStatus=value
+                        method(value)
+                    },
+                    get:function(value){
+                        return this._consumerGoodsStatus
+                    }
+                })
+            },
+            //MQTT订阅
+            subscriptionMQTT(){
+                let self = this;
+                const mqttOptions = {
+                    keepalive: 30,
+                    clean: true,//保留会话
+                    connectTimeout: 5000, // 超时时间
+                    reconnectPeriod:5000, // 重连间隔
+                    clientId: uni.getStorageSync('token')+'lab/function/data',
+                    username: config.username,
+                    password: config.password,
+                }
+                const connectUrl = config.mqtt_url;
+                // this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
+                this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
+                this.client.on('connect', () => {
+                    // 这是为了给自己发条消息，其它无作用
+                    this.client.subscribe(this.mtopicBigview, (err) => {
+                        if (!err) {
+                            console.log("报警信息订阅成功",this.mtopicBigview)
+                        }
+                    });
+                    this.client.subscribe(this.mtopicFunction, (err) => {
+                        if (!err) {
+                            console.log("传感器信息订阅成功",this.mtopicFunction)
+                        }
+                    });
+                    this.client.subscribe(this.mtopicHardware, (err) => {
+                        if (!err) {
+                            console.log("设备信息订阅成功",this.mtopicHardware)
+                        }
+                    });
+					//订阅应急疏散变更信息
+                    this.client.subscribe(this.mtopicLine, (err) => {
+                        if (!err) {
+                            console.log("设备信息订阅成功",this.mtopicLine)
+                        }
+                    });
+                });
+                // 自动重连
+                this.client.on('reconnect', (msg) => {
+                    console.log('自动重连-reconnect-1', msg)
+                });
+                // 错误
+                this.client.on('error', () => {
+                    console.log('错误-error-1')
+                });
+                // 断开
+                this.client.on('end', () => {
+                    console.log('断开-end-1')
+                });
+                // 掉线
+                this.client.on('offline', (msg) => {
+                    console.log('掉线-offline-1',msg)
+                });
+                // 收到消息
+                this.client.on('message', (topic, message) => {
+                    // 把arrayBuffer转成字符串
+                    let data = JSON.parse(message)
+                    if(topic == this.mtopicBigview){
+                        console.log("报警",data);
+                        if(data.data == 'SUB_RISKPLAN_GROUP'){
+                            this.globalData.mqttAlarmData = data.data;
+                        }
+                    }
+                    if(topic == this.mtopicFunction){
+                        // console.log("传感器",data);
+                        this.globalData.mqttSensorData = data.data;
+                    }
+                    if(topic == this.mtopicHardware){
+                        // console.log("设备开关",data);
+                        this.globalData.mqttDeviceData = data.data;
+                    }
+                    if(topic == this.mtopicLine){
+                        console.log("应急",data);
+                        this.globalData.lineData = data.data;
+                    }
+                    // if(data.data.subId){
+                    // 	for(let i=0;i<self.dataList.length;i++){
+                    // 		if(self.dataList[i].id == data.data.subId){
+                    // 		    self.$set(self.dataList[i],'sensorFunctionStatusList',data.data.functionStatuses);
+                    // 		    console.log("找到了",data)
+                    // 		}
+                    // 	}
+                    // }
+                })
+                // 全局监听是否有关闭mqtt的消息的事件
+                uni.$on('closeMqtt',() => {
+                    this.client.end(true); // 主动断开连接
+                })
+            },
+			onMQTT(){
+				console.log("onMQTT");
+				if(this.client.unsubscribe){
+					this.client.unsubscribe(this.mtopicBigview, error => {
+						if (error) {
+							console.log('Unsubscribe error mtopicBigview', error)
+						}
+					})
+					this.client.unsubscribe(this.mtopicFunction, error => {
+						if (error) {
+							console.log('Unsubscribe error mtopicFunction', error)
+						}
+					})
+					this.client.unsubscribe(this.mtopicHardware, error => {
+						if (error) {
+							console.log('Unsubscribe error mtopicHardware', error)
+						}
+					})
+					this.client.unsubscribe(this.mtopicLine, error => {
+						if (error) {
+							console.log('Unsubscribe error mtopicLine', error)
+						}
+					})
+					this.client.end();
+					this.client = {};
+				}
+				this.subscriptionMQTT();
+			},
+            //取消订阅关闭MQTT连接
+            offMQTT(){
+                console.log("offMQTT");
+				this.client.unsubscribe(this.mtopicBigview, error => {
+					if (error) {
+						console.log('Unsubscribe error mtopicBigview', error)
+					}
+				})
+				this.client.unsubscribe(this.mtopicFunction, error => {
+					if (error) {
+						console.log('Unsubscribe error mtopicFunction', error)
+					}
+				})
+				this.client.unsubscribe(this.mtopicHardware, error => {
+					if (error) {
+						console.log('Unsubscribe error mtopicHardware', error)
+					}
+				})
+				this.client.unsubscribe(this.mtopicLine, error => {
+					if (error) {
+						console.log('Unsubscribe error mtopicLine', error)
+					}
+				})
+				this.client.end();
+				this.client = {};
+            },
+        }
+	}
+</script>
+
+<style lang="stylus">
+	page{
+		height:100%;
+		width:100%;
+		background:#f5f5f5;
+		font-family: PingFang SC;
+		font-weight: 400;
+		font-size:30rpx;
+		color:#333;
+	}
+	img{
+        margin:0;
+        padding:0;
+		display:block;
+	}
+	.name-box-p{
+		display block
+		overflow:hidden;
+		text-overflow:ellipsis;
+		white-space:nowrap;
+	}
+    view{
+        margin:0;
+        padding:0;
+    }
+    /*每个页面公共css */
+    @import './styles/index.styl'
+</style>

api/request/config.js

@@ -0,0 +1,25 @@
+const config = {
+     //base_url: 'http://192.168.1.9:8080',//柴
+     // base_url: 'http://192.168.1.7:8080',//刘波
+	//base_url: 'http://192.168.1.17:8080',//周攀
+    // base_url: 'http://192.168.1.8:8080',//高升
+	//base_url: 'http://192.168.1.29:8080',//何成
+     // base_url: 'http://192.168.1.43:9800',//43服务器
+	// base_url: 'https://demo.sxitdlc.com/xzgd/',
+	
+	// base_url: 'https://lab.sxitdlc.com/labNhSystem/',//43服务器高升测试
+	//base_url: 'https://lab.sxitdlc.com/labAppTest/',//43服务器线上
+     base_url: 'https://lab.sxitdlc.com/appTest/',//88服务器线上
+	// base_url: 'https://lab.sxitdlc.com/labSystem/', //线上地址
+	
+	
+	//视频地址
+	video_url:'https://lab.sxitdlc.com', 
+	
+	//MQTT
+	// mqtt_url :'192.168.1.43:1883', //43MQTT
+	mqtt_url: 'lab.sxitdlc.com/nhmqtt', //正式MQTT
+    username: 'mqtt',
+    password: 'mqtt@zd1883',
+}
+export { config }

api/request/request.js

@@ -0,0 +1,296 @@
+import { config } from './config.js'
+import { tansParams } from "./util.js";
+
+export const apiResquest = (prams) => {
+	return new Promise((resolve, reject) => {
+		let url = config.base_url + prams.url;
+		uni.showLoading({
+			title: '加载中',
+			mask: true
+		});
+        // get请求映射params参数
+        if (prams.method === 'GET' && prams.data) {
+            url = url + '?' + tansParams(prams.data);
+            url = url.slice(0, -1);
+            prams.data = {};
+        }
+		
+		return uni.request({
+			url: url,
+			data: {
+				...prams.data
+			},
+			method: prams.method,
+			header: {
+			  	// 'content-type': 'application/x-www-form-urlencoded',
+			  	'content-type': 'application/json;charset=utf-8',
+				'Authorization':uni.getStorageSync('token')
+			},
+			success: (res) => {
+				// 成功
+				uni.hideLoading()
+				if(res.data.code == 200){
+					resolve(res);
+				}else if(res.data.code == 401){
+					uni.showToast({
+						mask:true,
+						icon:"none",
+						position:"center",
+						title: "登录超时,请重新登录~",
+						duration: 2000
+					});
+                    uni.removeStorageSync('token');
+                    uni.removeStorageSync('userId');
+                    uni.removeStorageSync('userType');
+					setTimeout(function(){
+						uni.redirectTo({
+							url: '/pages/login',
+						});
+					},2000);
+				}else{
+					uni.showToast({
+						mask:true,
+						icon:"none",
+						position:"center",
+						title: res.data.msg,
+						duration: 2000
+					});
+					resolve(res);
+				}
+			},
+			fail: (err) => {
+				// 失败
+				uni.hideLoading()
+				uni.showToast({
+					mask:true,
+					icon:"none",
+					position:"center",
+					title: '出错啦~请联系管理员!',
+					duration: 2000
+				});
+				console.log("失败",err)
+			},
+			complete: () => {
+				// 完成
+			}
+		});
+	})
+}
+export const apiResquestForm = (prams) => {
+    return new Promise((resolve, reject) => {
+        let url = config.base_url + prams.url;
+        uni.showLoading({
+            title: '加载中',
+            mask: true
+        });
+        // get请求映射params参数
+        if (prams.method === 'GET' && prams.data) {
+            url = url + '?' + tansParams(prams.data);
+            url = url.slice(0, -1);
+            prams.data = {};
+        }
+        return uni.request({
+            url: url,
+            data: {
+                ...prams.data
+            },
+            method: prams.method,
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'Authorization':uni.getStorageSync('token')
+            },
+            success: (res) => {
+                // 成功
+                uni.hideLoading()
+                if(res.data.code == 200){
+                    resolve(res);
+                }else if(res.data.code == 401){
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: "登录超时,请重新登录~",
+                        duration: 2000
+                    });
+                    uni.removeStorageSync('token');
+                    uni.removeStorageSync('userId');
+                    uni.removeStorageSync('userType');
+                    setTimeout(function(){
+                        uni.redirectTo({
+                            url: '/pages/login',
+                        });
+                    },2000);
+                }else{
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: res.data.msg,
+                        duration: 2000
+                    });
+                    resolve(res);
+                }
+            },
+            fail: (err) => {
+                // 失败
+                uni.hideLoading()
+                uni.showToast({
+                    mask:true,
+                    icon:"none",
+                    position:"center",
+                    title: '出错啦~请联系管理员!',
+                    duration: 2000
+                });
+                console.log("失败",err)
+            },
+            complete: () => {
+                // 完成
+            }
+        });
+    })
+}
+export const apiResquestJsonList = (prams) => {
+    return new Promise((resolve, reject) => {
+        let url = config.base_url + prams.url;
+        uni.showLoading({
+            title: '加载中',
+            mask: true
+        });
+        // get请求映射params参数
+        if (prams.method === 'GET' && prams.data) {
+            url = url + '?' + tansParams(prams.data);
+            url = url.slice(0, -1);
+            prams.data = {};
+        }
+        console.log("prams",prams)
+        return uni.request({
+            url: url,
+            data: prams.data,
+            method: prams.method,
+            header: {
+                'content-type': 'application/json',
+                'Authorization':uni.getStorageSync('token')
+            },
+            success: (res) => {
+                // 成功
+                uni.hideLoading()
+                if(res.data.code == 200){
+                    resolve(res);
+                }else if(res.data.code == 401){
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: "登录超时,请重新登录~",
+                        duration: 2000
+                    });
+                    uni.removeStorageSync('token');
+                    uni.removeStorageSync('userId');
+                    uni.removeStorageSync('userType');
+                    setTimeout(function(){
+                        uni.redirectTo({
+                            url: '/pages/login',
+                        });
+                    },2000);
+                }else{
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: res.data.msg,
+                        duration: 2000
+                    });
+                    resolve(res);
+                }
+            },
+            fail: (err) => {
+                // 失败
+                uni.hideLoading()
+                uni.showToast({
+                    mask:true,
+                    icon:"none",
+                    position:"center",
+                    title: '出错啦~请联系管理员!',
+                    duration: 2000
+                });
+                console.log("失败",err)
+            },
+            complete: () => {
+                // 完成
+            }
+        });
+    })
+}
+export const apiResquestFormVideo = (prams) => {
+    return new Promise((resolve, reject) => {
+        let url = config.video_url + prams.url;
+        uni.showLoading({
+            title: '加载中',
+            mask: true
+        });
+        // get请求映射params参数
+        if (prams.method === 'GET' && prams.data) {
+            url = url + '?' + tansParams(prams.data);
+            url = url.slice(0, -1);
+            prams.data = {};
+        }
+        return uni.request({
+            url: url,
+            data: {
+                ...prams.data
+            },
+            method: prams.method,
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'Authorization':uni.getStorageSync('token')
+            },
+            success: (res) => {
+                // 成功
+                uni.hideLoading()
+                if(res.data.code == 200){
+                    resolve(res);
+                }else if(res.data.code == 401){
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: "登录超时,请重新登录~",
+                        duration: 2000
+                    });
+                    uni.removeStorageSync('token');
+                    uni.removeStorageSync('userId');
+                    uni.removeStorageSync('userType');
+                    setTimeout(function(){
+                        uni.redirectTo({
+                            url: '/pages/login',
+                        });
+                    },2000);
+                }else{
+                    uni.showToast({
+                        mask:true,
+                        icon:"none",
+                        position:"center",
+                        title: res.data.msg,
+                        duration: 2000
+                    });
+                    resolve(res);
+                }
+            },
+            fail: (err) => {
+                // 失败
+                uni.hideLoading()
+                uni.showToast({
+                    mask:true,
+                    icon:"none",
+                    position:"center",
+                    title: '出错啦~请联系管理员!',
+                    duration: 2000
+                });
+                console.log("失败",err)
+            },
+            complete: () => {
+                // 完成
+            }
+        });
+    })
+}

api/request/util.js

@@ -0,0 +1,21 @@
+export function tansParams(params) {
+    let result = ''
+    for (const propName of Object.keys(params)) {
+        const value = params[propName];
+        var part = encodeURIComponent(propName) + "=";
+        if (value !== null && typeof (value) !== "undefined") {
+            if (typeof value === 'object') {
+                for (const key of Object.keys(value)) {
+                    if (value[key] !== null && typeof (value[key]) !== 'undefined') {
+                        let params = propName + '[' + key + ']';
+                        var subPart = encodeURIComponent(params) + "=";
+                        result += subPart + encodeURIComponent(value[key]) + "&";
+                    }
+                }
+            } else {
+                result += part + encodeURIComponent(value) + "&";
+            }
+        }
+    }
+    return result
+}

component/cropper.js

@@ -0,0 +1,538 @@
+const ABS = Math.abs
+const calcLen = (v) => { // distance between two coordinate 
+  return Math.sqrt(v.x * v.x + v.y * v.y)
+}
+const calcAngle = (a, b) => { // angle of the two vectors
+  var l = calcLen(a) * calcLen(b); var cosValue; var angle
+  if (l) {
+    cosValue = (a.x * b.x + a.y * b.y) / l
+    angle = Math.acos(Math.min(cosValue, 1))
+    angle = a.x * b.y - b.x * a.y > 0 ? -angle : angle
+    return angle * 180 / Math.PI
+  }
+  return 0
+}
+const generateCanvasId = () => { // generate a random string
+  const seeds = 'abcdefghijklmnopqrstuvwxyz'
+  const arr = seeds.split('').concat(seeds.toUpperCase().split('')).concat('0123456789'.split(''))
+  let m = arr.length; let i
+  while (m) {
+    i = Math.floor(Math.random() * m--)
+    const temp = arr[m]
+    arr[m] = arr[i]
+    arr[i] = temp
+  }
+  return arr.slice(0, 16).join('')
+}
+
+export default {
+  props: {
+    width: { // width of the container
+      type: [String, Number],
+      default: '100%'
+    },
+    height: { // height of the container
+      type: [String, Number],
+      default: '100%'
+    },
+    cutWidth: { // cutter width
+      type: [String, Number],
+      default: '50%'
+    },
+    cutHeight: { // cutter height
+      type: [String, Number],
+      default: 0
+    },
+    minWidth: { // minWidth of the cutter
+      type: Number,
+      default: 50
+    },
+    minHeight: { // minHeight of the cutter
+      type: Number,
+      default: 50
+    },
+    center: { // autoCenter
+      type: Boolean,
+      default: true
+    },
+    src: String, 
+    disableScale: Boolean, // disable to zoom
+    disableRotate: Boolean, 
+    disableTranslate: Boolean, 
+    disableCtrl: Boolean, // disable to resize the cutter
+    boundDetect: Boolean, // open boundary detection
+    freeBoundDetect: Boolean, // open boundary detection while doing rotation
+    keepRatio: Boolean, // keep the ratio of the cutter
+    disablePreview: Boolean, // disable preview after cutting
+    showCtrlBorder: Boolean, // show cutter border
+    resetCut: Boolean, // reset cut while img change
+    fit: {
+      type: Boolean,
+      default: true
+    },
+    imageCenter: Boolean, // auto center/middle for image
+    maxZoom: { // maximum scaling factor 
+      type: Number,
+      default: 10 // can not be Infinity in baidu-MiniProgram
+    },
+    minZoom: { // minimum scaling factor
+      type: Number,
+      default: 1
+    },
+    angle: { // initial angle of rotation
+      type: Number,
+      default: 0
+    },
+    zoom: { // initial scaling factor
+      type: Number,
+      default: 1
+    },
+    offset: { // initial offset relative to the cutter left border
+      type: Array,
+      default() {
+        return [0, 0]
+      }
+    },
+    background: {
+      type: String,
+      default: '#000'
+    },
+    canvasBackground: { // background for the exported image
+      type: String,
+      default: '#fff'
+    },
+    canvasZoom: {  // export multiples of the cutter size
+      type: Number,
+      default: 1
+    },
+    fileType: {
+      type: String,
+      default: 'png',
+      validator(t) {
+        return ['png', 'jpg'].includes(t)
+      }
+    },
+    quality: {
+      type: Number,
+      default: 1
+    },
+    maskType: { // type for mask
+      type: String,
+      default: "shadow"
+    },
+    circleView: Boolean // circle clip view
+  },
+  data() {
+    return {
+      transform: {
+        angle: 0,
+        translate: {
+          x: 0,
+          y: 0
+        },
+        zoom: 1
+      },
+      corner: {
+        left: 50,
+        right: 50,
+        bottom: 50,
+        top: 50
+      },
+      image: {
+        originWidth: 0,
+        originHeight: 0,
+        width: 0,
+        height: 0
+      },
+      ctrlWidth: 0,
+      ctrlHeight: 0,
+      view: false,
+      canvasId: ''
+    }
+  },
+  computed: {
+    transformMeta: function() {
+      const transform = this.transform
+      return `translate3d(${transform.translate.x}px, ${transform.translate.y}px, 0) rotate(${transform.angle}deg) scale(${transform.zoom})`
+    },
+    ctrlStyle: function() {
+      const corner = this.corner
+      let cssStr = `left: ${corner.left}px;top: ${corner.top}px;right: ${corner.right}px;bottom: ${corner.bottom }px;`
+      if(this.maskType !== 'outline') {
+        cssStr += `box-shadow: 0 0 0 50000rpx rgba(0,0,0, ${this.view ? 0.8 : 0.4})`
+      } else {
+        cssStr += `outline: rgba(0,0,0, ${this.view ? 0.8 : 0.4}) solid 5000px`
+      }
+      return cssStr
+    }
+  },
+  watch: {
+    src: function() {
+      if(this.resetCut) this.resetCutReact()
+      this.initImage()
+    }
+  },
+  created() {
+    this.canvasId = generateCanvasId()
+    uni.getSystemInfo().then(result => {
+      result = result[1] || {windowWidth: 375, windowHeight: 736}
+      this.ratio = result.windowWidth / 750
+      this.windowHeight = result.windowHeight
+      this.init()
+      this.initCanvas()
+    })
+  },
+  methods: {
+    toPx(str) {
+      if (str.indexOf('%') !== -1) {
+        return Math.floor(Number(str.replace('%', '')) / 100 * this.containerWidth)
+      }
+      if (str.indexOf('rpx') !== -1) {
+        return Math.floor(Number(str.replace('rpx', '')) * this.ratio)
+      }
+      return Math.floor(Number(str.replace('px', '')))
+    },
+    initCanvas() {
+			// #ifdef MP-ALIPAY
+			const context = uni.createSelectorQuery()
+			// #endif
+			// #ifndef MP-ALIPAY
+			const context = uni.createSelectorQuery().in(this)
+			// #endif
+      
+      // get contianer size
+      context.select('.nice-cropper').boundingClientRect()
+      context.exec(res => {
+        this.containerWidth = res[0].width
+        this.containerHeight = res[0].height
+        this.initCut()
+      })
+    },
+    resetCutReact() {// init size and position of the cutter
+      this.ctrlWidth = Math.min(this.toPx(this.cutWidth), this.containerWidth)
+      if (this.cutHeight) {
+        this.ctrlHeight = Math.min(this.toPx(this.cutHeight), this.containerHeight)
+      } else { // 默认为正方形
+        this.ctrlHeight = Math.min(this.ctrlWidth, this.containerHeight)
+      }
+      const cornerStartX = this.center ? Math.floor((this.containerWidth - this.ctrlWidth) / 2) : 0
+      const cornerStartY = this.center ? Math.floor((this.containerHeight - this.ctrlHeight) / 2) : 0
+      this.cutRatio = this.ctrlHeight / this.ctrlWidth
+      this.corner = {
+        left: cornerStartX,
+        right: this.containerWidth - this.ctrlWidth - cornerStartX,
+        top: cornerStartY,
+        bottom: this.containerHeight - this.ctrlHeight - cornerStartY
+      }
+    },
+    initCut() { 
+      this.resetCutReact()
+      this.initImage()
+    },
+    async initImage() {
+		
+      if (!this.src) return
+
+      const [err, res] = await uni.getImageInfo({
+        src: this.src
+      })
+
+      if(err) {
+        this.$emit("error", err)
+      } else {
+        this.$emit('load', res)
+      }   
+console.log(res.path)
+      // init image size
+      this.image.originWidth = err ? this.ctrlWidth : res.width
+      this.image.originHeight = err ? this.ctrlHeight : res.height
+      this.image.width = this.fit ? this.ctrlWidth : this.image.originWidth
+      this.image.height = err ? this.ctrlHeight : res.height / res.width * this.image.width
+      this.img = res.path
+
+      const offset = [0, 0]
+      if(this.imageCenter) {
+        offset[0] = (this.ctrlWidth - this.image.width) / 2
+        offset[1] = (this.ctrlHeight - this.image.height) / 2
+      }
+      offset[0] += this.offset[0] || 0
+      offset[1] += this.offset[1] || 0
+      
+      this.setTranslate(offset)
+      this.setZoom(this.zoom)
+      this.transform.angle = this.freeBoundDetect || !this.disableRotate ? this.angle : 0
+
+      this.setBoundary() // boundary detect
+      this.preview() // preview
+      this.draw()
+    },
+    init() {
+      this.pretouch = {}
+      this.handles = {}
+      this.preVector = {
+        x: 0,
+        y: 0
+      }
+      this.distance = 30
+      this.touch = {}
+      this.movetouch = {}
+      this.cutMode = false
+      this.params = {
+        zoom: 1,
+        deltaX: 0,
+        deltaY: 0,
+        diffX: 0,
+        diffY: 0,
+        angle: 0
+      }
+    },
+    start(e) {
+      if(!this.src) e.preventDefault() 
+      const point = e.touches ? e.touches[0] : e
+      const touch = this.touch
+      const now = Date.now()
+      touch.startX = point.pageX
+      touch.startY = point.pageY
+      touch.startTime = now
+      this.doubleTap = false
+      this.view = false
+      clearTimeout(this.previewTimer)
+      if (e.touches.length > 1) {
+        var point2 = e.touches[1]
+        this.preVector = {
+          x: point2.pageX - this.touch.startX,
+          y: point2.pageY - this.touch.startY
+        }
+        this.startDistance = calcLen(this.preVector)
+      } else {
+        let pretouch = this.pretouch
+        this.doubleTap = this.pretouch.time && now - this.pretouch.time < 300 && ABS(touch.startX - pretouch.startX) < 30 && ABS(touch.startY - pretouch.startY) < 30 && ABS(touch.startTime - pretouch.time) < 300
+        pretouch = { // reserve the last touch
+          startX: this.touch.startX,
+          startY: this.touch.startY,
+          time: this.touch.startTime
+        }
+      }
+    },
+    move(e) {
+      if(!this.src) return 
+      const point = e.touches ? e.touches[0] : e
+      if (e.touches.length > 1) { // multi touch
+        const point2 = e.touches[1]
+        const v = {
+          x: point2.pageX - point.pageX,
+          y: point2.pageY - point.pageY
+        }
+
+        if (this.preVector.x !== null) {
+          if (this.startDistance) { // zoom
+            const len = calcLen(v)
+            this.params.zoom = calcLen(v) / this.startDistance
+            this.startDistance = len
+            this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableScale && this.pinch()
+          }
+          // rotate
+          this.params.angle = calcAngle(v, this.preVector)
+          this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableRotate && this.rotate()
+        }
+        this.preVector.x = v.x
+        this.preVector.y = v.y
+      } else { // translate
+        const diffX = point.pageX - this.touch.startX
+        const diffY = point.pageY - this.touch.startY
+        this.params.diffY = diffY
+        this.params.diffX = diffX
+        if (this.movetouch.x) {
+          this.params.deltaX = point.pageX - this.movetouch.x
+          this.params.deltaY = point.pageY - this.movetouch.y
+        } else {
+          this.params.deltaX = this.params.deltaY = 0
+        }
+        if (ABS(diffX) > 30 || ABS(diffY) > 30) {
+          this.doubleTap = false
+        }
+        this.cutMode && !this.disableCtrl ? this.setCut() : !this.disableTranslate && this.translate()
+        this.movetouch.x = point.pageX
+        this.movetouch.y = point.pageY
+      }
+      !this.cutMode && this.setBoundary()
+      if (e.touches.length > 1) {
+        e.preventDefault()
+      }
+    },
+    end() {
+      this.doubleTap && this.$emit('doubleTap')
+      this.cutMode && this.setBoundary()
+      this.init()
+      !this.disablePreview && this.preview()
+      this.draw()
+    },
+    translate() {
+      const transform = this.transform.translate
+      const meta = this.params
+      transform.x += meta.deltaX
+      transform.y += meta.deltaY
+    },
+    pinch() {
+      this.transform.zoom *= this.params.zoom
+    },
+    rotate() {
+      this.transform.angle += this.params.angle
+    },
+    setZoom(scale) {
+      scale = Math.min(Math.max(Number(scale) || 1, this.minZoom), this.maxZoom)
+      this.transform.zoom = scale
+    },
+    setTranslate(offset) {
+      if(Array.isArray(offset)) {
+        const x = Number(offset[0])
+        const y = Number(offset[1])
+        this.transform.translate.x = isNaN(x) ? this.transform.translate.x : this.corner.left + x
+        this.transform.translate.y = isNaN(y) ? this.transform.translate.y : this.corner.top + y
+      }
+    },
+    setRotate(angle) {
+      this.transform.angle = Number(angle) || 0
+    },
+    setTransform(x, y, angle, scale) {
+      this.setTranslate([x, y])
+      this.setZoom(scale)
+      this.setRotate(angle)
+    },
+    setCutMode(type) {
+      if(!this.src) return 
+      this.cutMode = true
+      this.cutDirection = type
+    },
+    setCut() {
+      const corner = this.corner
+      const meta = this.params
+      this.setMeta(this.cutDirection, meta) // correct cutter position
+      if (this.keepRatio) {
+        if (this.cutDirection === 'lt' || this.cutDirection === 'rb') {
+          meta.deltaY = meta.deltaX * this.cutRatio
+        } else {
+          meta.deltaX = meta.deltaY / this.cutRatio
+        }
+      }
+      switch (this.cutDirection) {
+        case 'lt':
+          corner.top += meta.deltaY
+          corner.left += meta.deltaX
+          break
+        case 'rt':
+          corner.top += meta.deltaY
+          corner.right -= this.keepRatio ? -meta.deltaX : meta.deltaX
+          break
+        case 'rb':
+          corner.right -= meta.deltaX
+          corner.bottom -= meta.deltaY
+          break
+        case 'lb':
+          corner.bottom -= meta.deltaY
+          corner.left += this.keepRatio ? -meta.deltaX : meta.deltaX
+          break
+      }
+      this.ctrlWidth = this.containerWidth - corner.left - corner.right
+      this.ctrlHeight = this.containerHeight - corner.top - corner.bottom
+    },
+    setMeta(direction, meta) {
+      const {ctrlWidth, ctrlHeight, minWidth, minHeight } = this
+      switch(direction) {
+        case 'lt':
+          if(meta.deltaX > 0 || meta.deltaY > 0) {
+            meta.deltaX = Math.min(meta.deltaX, ctrlWidth - minWidth)
+            meta.deltaY = Math.min(meta.deltaY, ctrlHeight - minHeight)
+          }
+          break
+        case 'rt':
+          if(meta.deltaX < 0 || meta.deltaY > 0) {
+            meta.deltaX = Math.max(meta.deltaX, minWidth - ctrlWidth)
+            meta.deltaY = Math.min(meta.deltaY, ctrlHeight - minHeight)
+          }
+          break
+        case 'rb':
+          if(meta.deltaX < 0 || meta.deltaY < 0) {
+            meta.deltaX = Math.max(meta.deltaX, minWidth - ctrlWidth)
+            meta.deltaY = Math.max(meta.deltaY, minHeight - ctrlHeight)
+          }
+          break
+        case 'lb':
+          if(meta.deltaX > 0 || meta.deltaY < 0) {
+            meta.deltaX = Math.min(meta.deltaX, ctrlWidth - minWidth)
+            meta.deltaY = Math.max(meta.deltaY, minHeight - ctrlHeight)
+          }
+          break
+      }
+
+    },
+    setBoundary() {
+      let zoom = this.transform.zoom
+      zoom = zoom < this.minZoom ? this.minZoom : (zoom > this.maxZoom ? this.maxZoom : zoom)
+      this.transform.zoom = zoom
+      if (!this.boundDetect || !this.disableRotate && !this.freeBoundDetect) return true
+      const translate = this.transform.translate
+      const corner = this.corner
+      const minX = corner.left - this.image.width + this.ctrlWidth - this.image.width * (zoom - 1) / 2
+      const maxX = corner.left + this.image.width * (zoom - 1) / 2
+      const minY = corner.top - this.image.height + this.ctrlHeight - this.image.height * (zoom - 1) / 2
+      const maxY = corner.top + this.image.height * (zoom - 1) / 2
+      translate.x = Math.floor(translate.x < minX ? minX : (translate.x > maxX ? maxX : translate.x))
+      translate.y = Math.floor(translate.y < minY ? minY : (translate.y > maxY ? maxY : translate.y))
+    },
+    preview() {
+      clearTimeout(this.previewTimer)
+      this.previewTimer = setTimeout(() => {
+        this.view = true
+      }, 500)
+    },
+    draw() {
+      // #ifdef MP-ALIPAY
+      const context = uni.createCanvasContext(this.canvasId)
+      // #endif
+      // #ifndef MP-ALIPAY
+      const context = uni.createCanvasContext(this.canvasId, this)
+      // #endif
+      const transform = this.transform
+      const corner = this.corner
+      const canvasZoom = this.canvasZoom
+      const img = this.image
+      context.save()
+      context.setFillStyle(this.canvasBackground)
+      this.$emit('beforeDraw', context, transform) // beforeDraw hook
+
+      const zoom = transform.zoom
+      context.fillRect(0, 0, this.ctrlWidth * canvasZoom, this.ctrlHeight * canvasZoom) // clear canvas
+      context.translate((transform.translate.x - corner.left + img.width / 2) *canvasZoom, (transform.translate.y - corner.top + img.height / 2) * canvasZoom) // translate the canvas's orgin to the image center
+      context.rotate(transform.angle * Math.PI / 180)
+      context.translate(-img.width * zoom * 0.5 * canvasZoom, -img.height * zoom * 0.5 * canvasZoom)
+      context.drawImage(this.img, 0, 0, img.width * zoom * canvasZoom, img.height * zoom * canvasZoom)
+      context.restore()
+      this.$emit('afterDraw', context, {
+        width: this.ctrlWidth * canvasZoom,
+        height: this.ctrlHeight * canvasZoom
+      }) // afterDraw hook
+      context.draw(false, () => {
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasId,
+          quality: this.quality || 1,
+          fileType: this.fileType,
+          success: (res) => {
+            this.$emit('cropped', res.tempFilePath, {
+              originWidth: this.image.originWidth,
+              originHeight: this.image.originHeight,
+              width: this.ctrlWidth * canvasZoom,
+              height: this.ctrlHeight * canvasZoom,
+              scale: zoom,
+              translate: {
+                x: transform.translate.x,
+                y: transform.translate.y
+              },
+              rotate: transform.angle
+            }) // draw callback
+          }
+        }, this)
+      })
+    }
+  }
+}

component/cropper.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="nice-cropper" :style="{height: height, width: width, background: background}" @touchstart="start" @touchmove.stop="move" @touchcancel="end" @touchend="end">
+    <image class="nice-cropper__image" :src="src" :style="{transform: transformMeta, width: image.width + 'px', height: image.height + 'px'}" />
+    <view class="nice-cropper__ctrls" :class="{'nice-cropper__ctrls--view' : view, 'nice-cropper__ctrls--border': showCtrlBorder, 'nice-cropper__ctrls--circle': view && circleView && maskType !== 'outline'}" :style="ctrlStyle">
+      <view class="nice-cropper__corner nice-cropper__corner--lt" @touchstart="setCutMode('lt')" />
+      <view class="nice-cropper__corner nice-cropper__corner--rt" @touchstart="setCutMode('rt')" />
+      <view class="nice-cropper__corner nice-cropper__corner--rb" @touchstart="setCutMode('rb')" />
+      <view class="nice-cropper__corner nice-cropper__corner--lb" @touchstart="setCutMode('lb')" />
+    </view>
+    <canvas v-if="canvasId" :id="canvasId" :canvas-id="canvasId" style="position: absolute;left:-500000px;top: -500000px" :style="{width: ctrlWidth * canvasZoom+'px', height: ctrlHeight * canvasZoom + 'px'}" />
+  </view>
+</template>
+<script src="./cropper.js"></script>
+<style>
+.nice-cropper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow: hidden;
+}
+.nice-cropper__image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 50% 50%;
+}
+.nice-cropper__corner {
+  width: 30rpx;
+  height: 30rpx;
+  position: absolute;
+}
+.nice-cropper__corner::after {
+  position: absolute;
+  left: -5px;
+  right: -5px;
+  bottom: -5px;
+  top: -5px;
+  content: '';
+}
+.nice-cropper__ctrls {
+  position: absolute;
+  box-shadow: inset 0 0 10rpx 0 rgba(0,0,0,.3);
+}
+.nice-cropper__ctrls--circle {
+  border-radius: 50%;
+}
+.nice-cropper__ctrls--border {
+  border: 2rpx solid #fff;
+}
+.nice-cropper__corner--lt {
+  left: 0;
+  top: 0;
+  border-top: 4rpx solid #FFF;
+  border-left: 4rpx solid #FFF;
+}
+.nice-cropper__corner--rt {
+  right: 0;
+  top: 0;
+  border-top: 4rpx solid #FFF;
+  border-right: 4rpx solid #FFF;
+}
+.nice-cropper__corner--rb {
+  right: 0;
+  bottom: 0;
+  border-right: 4rpx solid #FFF;
+  border-bottom: 4rpx solid #FFF;
+}
+.nice-cropper__corner--lb {
+  left: 0;
+  bottom: 0;
+  border-left: 4rpx solid #FFF;
+  border-bottom: 4rpx solid #FFF;
+}
+</style>

component/tabBar.vue

@@ -0,0 +1,140 @@
+<!-- 底部导航组件 -->
+<template>
+	<view class="tabBar">
+		<!-- 运输 -->
+		<view class="tab-bar-box">
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(1)">
+				<img src="@/images/Version2.2/btn_sy_xz.png" v-if="currentRoute == 'pages/home'">
+				<img src="@/images/Version2.2/btn_sy_zc.png" v-else>
+				<view :class="currentRoute == 'pages/home'?'primary':''">首页</view>
+			</view>
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(2)">
+				<img src="@/images/Version2.2/btn_xx_xz.png" v-if="currentRoute == 'pages/information/information'">
+				<img src="@/images/Version2.2/btn_xx_zc.png" v-else>
+				<view class="tip" v-if="totalCount!=0">{{totalCount}}</view>
+				<view :class="currentRoute == 'pages/information/information'?'primary':''">消息</view>
+			</view>
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(3)">
+				<img src="@/images/Version2.2/btn_wd_xz.png" v-if="currentRoute == 'pages/mine'">
+				<img src="@/images/Version2.2/btn_wd_zc.png" v-else>
+				<view :class="currentRoute == 'pages/mine'?'primary':''">我的</view>
+			</view>
+			<view class="null-box"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+ import { infoTotalCount } from '@/api/index.js'
+	export default {
+		data() {
+			return {
+				currentRoute:"",
+				userType:"",
+				totalCount:0,
+			}
+		},
+		created() {
+			
+		},
+		
+		onShow(){
+			this.getTotalList();
+		},
+		mounted(){
+			
+			this.getTotalList();
+			this.totalCount=uni.getStorageSync('totalCount')
+            // 获取当前路由
+            let pages = getCurrentPages();
+            let page = pages[pages.length - 1];
+            this.currentRoute = page.route;
+            // 获取当前角色
+			this.userType = uni.getStorageSync('userType');
+		},
+		methods: {
+			//获取消息总数接口
+			async getTotalList(){
+			console.log('消息')
+				const {data} = await infoTotalCount();
+				if(data.code==200){
+					console.log(data)
+					this.totalCount=data.data.totalCount
+				}
+				
+			},
+            tabBarGoPage(type){
+                if(type === 1){
+                    if (this.currentRoute !== 'pages/home') {
+                        uni.redirectTo({
+                            url: '/pages/home',
+                        });
+                    }
+				}else if(type === 2){
+                    if (this.currentRoute !== 'pages/information/information') {
+                        uni.redirectTo({
+                            url: '/pages/information/information',
+                        });
+                    }
+                }else if(type === 3){
+                    if (this.currentRoute !== 'pages/mine') {
+                        uni.redirectTo({
+                            url: '/pages/mine',
+                        });
+                    }
+                }
+
+			},
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.tabBar{
+		z-index:9999;
+		width:100%;
+		height:98rpx;
+		background:#ffffff;
+		position fixed
+		bottom:0;
+		left:0;
+		box-shadow: 0 -3rpx 13rpx 0 rgba(0, 0, 0, 0.1);
+		.tab-bar-box{
+			display flex;
+			.null-box{
+				flex:1;
+			}
+			.tba-bar-min-box{
+				width:64rpx;
+				position :relative;
+				img{
+					width:44rpx;
+					height:44rpx;
+					margin:14rpx auto 0;
+				}
+				view{
+					line-height:37rpx;
+					font-size:19rpx;
+					text-align center;
+					color:#666666;
+				}
+				.tip{
+					display inline-block;
+					background :#EF0909;
+					border-radius 50%;
+					position :absolute;
+					font-size 24rpx;
+					line-height 24rpx;
+					color #fff;
+					top :10rpx;
+					left :44rpx;
+					padding:6rpx 10rpx;
+					box-sizing border-box;
+				}
+			}
+		}
+	}
+</style>

component/topWarn.vue

@@ -0,0 +1,179 @@
+<!-- 顶部警告 -->
+<template>
+	<view class="top-warn" v-if="pageType">
+		<view>{{text}}</view>
+		<view @click="buttonClick">操作</view>
+	</view>
+</template>
+
+<script>
+    import { getListStatusTwo,evacuate,closeRiskPlan } from '@/api/index.js'
+    
+	export default {
+		data() {
+			return {
+				pageType:false,
+				text:"",
+				subjectId:"",
+				subjectName:"",
+				closePlan:false,
+				closeId:"",
+				
+			}
+		},
+		created() {
+			
+		},
+		mounted(){
+			this.getWarn();
+			getApp().watch(this.getWarn,'warnData');
+			getApp().watch(this.lineDataFunction,'lineData');
+			this.timeFuncontion();
+		},
+		methods: {
+			//应急变更
+			lineDataFunction(val){
+				console.log("val",val);
+			},
+			buttonClick(){
+				let self = this;
+				let list = [];
+				if(self.closePlan){
+					list = ['执行疏散', '结束预案'];
+				}else{
+					list = ['执行疏散'];
+				}
+				uni.showActionSheet({
+					itemList: list,
+					success: function (res) {
+						if(res.tapIndex == 0){
+							self.evacuationClick();
+						}else if(res.tapIndex == 1){
+							self.offEvacuationClick();
+						}
+						console.log('res.tapIndex',res.tapIndex);
+						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
+					},
+					fail: function (res) {
+						console.log(res.errMsg);
+					}
+				});
+			},
+			//执行疏散
+			evacuationClick(){
+				let self = this;
+				uni.showModal({
+				    content: '确认执行疏散?',
+				    cancelColor:"#999",
+				    confirmColor:"#0183FA",
+				    success: function (res) {
+				        if (res.confirm) {
+							self.goPage();
+				            console.log('用户点击确定');
+				        } else if (res.cancel) {
+				            console.log('用户点击取消');
+				        }
+				    }
+				});
+			},
+			offEvacuationClick(){
+				let self = this;
+				uni.showModal({
+					content: '确认结束预案?',
+					cancelColor:"#999",
+					confirmColor:"#0183FA",
+					success: function (res) {
+						if (res.confirm) {
+							self.closeRiskPlan();
+							console.log('用户点击确定');
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+			},
+			async closeRiskPlan(){
+				const {data} = await closeRiskPlan({id:this.closeId});
+				if(data.code == 200){
+					uni.showToast({
+						title: '操作成功',
+						icon:"none",
+						mask:true,
+						duration: 2000
+					});
+					this.pageType = false;
+				}
+			},
+			//页面跳转
+			goPage(){
+				let obj = {
+					subId:this.subjectId,
+					text:this.subjectName,
+					type:"1",
+				}
+				uni.navigateTo({
+					url:'/pages/emergencyEvacuationBig?item='+encodeURIComponent(JSON.stringify(obj))
+				});
+			},
+			//获取报警信息
+			async getWarn(){
+				let self = this;
+				const {data} = await getListStatusTwo();
+				if(data.code == 200){
+					let num = 0;
+					for(let i=0;i<data.data.length;i++){
+					  if(data.data[i].floorId == 5){
+						num++;
+						self.text = data.data[i].buildName + data.data[i].floorName + data.data[i].roomName + data.data[i].subjectName + '发生应急预案.';
+						self.subjectId = data.data[i].subjectId;
+						self.subjectName = data.data[i].subjectName;
+						self.pageType = true;
+						self.subjectId = data.data[i].subjectId;
+						self.closePlan =data.data[i].closePlan;
+						self.closeId = data.data[i].id;
+					  }
+					}
+					if(num == 0){
+					  self.pageType = false;
+					}
+				}
+			},
+			timeFuncontion(){
+				let self = this;
+				var t1 = setInterval(refreshCount, 300);
+				function refreshCount() {
+					let txt = self.text
+					let start = txt.substring(0, 1);//取该字符串的第一个字符
+					let end = txt.substring(1);//取该字符串的从1之后的所有字符
+					let newText = end + start;//拼接新的字符串
+					self.$set(self,'text',newText)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.top-warn{
+		height:80rpx;
+		line-height:80rpx;
+		background rgba(2550,0,0,0.2)
+		margin:20rpx 0;
+		display flex;
+		overflow hidden
+		view:nth-child(1){
+			padding-left:20rpx;
+			color:#FF0000;
+			flex:1;
+			view{
+				padding-left:20rpx;
+				white-space:nowrap;
+			}
+		}
+		view:nth-child(2){
+			width:140rpx;
+			color:#0183FA;
+			text-align center;
+		}
+	}
+</style>