接口对接

App.vue

@@ -1,7 +1,37 @@
 <script>
 import encrypt from './common/js/aes.js'
+import {
+    MQTT_IP,
+    MQTT_OPTIONS
+} from './common/js/mqtt.js';
+import mqtt from 'mqtt/dist/mqtt.js'
 export default {
+    methods: {
+        connect () {
+            MQTT_OPTIONS.clientId = uni.getStorageSync('cidAES')
+            var that = this
+            let client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
+            client.on('connect', function () {
+                console.log('连接成功')
+                client.subscribe(that.topic, function (err) {
+                    if (!err) {
+                        console.log('订阅成功')
+                    }
+                })
+            }).on('reconnect', function (error) {
+                console.log(error);
+                console.log('正在重连...', that.topic)
+            }).on('error', function (error) {
+                console.log('连接失败...', error)
+            }).on('end', function () {
+                console.log('连接断开')
+            }).on('message', function (topic, message) {
+                console.log('接收推送信息：', message.toString())
+            })
+        }
+    },
     onLaunch: function () {
+        // this.connect()
         let cidAES = uni.getStorageSync('cidAES') || 'nnvmhMk8626D8QHhJefm+W9rTAJWuBPRxcnRm4+9bWXdSLRIyTnTruoYfLxGK3Oy'
         uni.setStorageSync('cidAES', cidAES);
         if (!cidAES) {
@@ -13,7 +43,7 @@ export default {
                 uni.setStorageSync('cidAES', cidAES);
             }, false);
         }
-  
+
     },
     onShow: function () {
         console.log('App Show')

common/api/project.js

@@ -0,0 +1,22 @@
+import request from '../js/request'
+import config from '../js/config'
+
+export function addAppProject (params, files) {
+    return uni.uploadFile({
+        url: config.domain + '/project/addAppProject', //仅为示例，非真实的接口地址
+        files: files,
+        header: {
+            "Authorization": "12",
+        },
+        formData: params,
+    });
+}
+
+
+export function getProjectList (params) {
+    return request({
+        url: '/project/queryProject',
+        method: 'post',
+        data: params,
+    })
+}

common/js/config.js

@@ -1,7 +1,7 @@
 const debug = true // true 是连地服务端本地，false 是连接线上
 
 const development = {
-    domain: 'http://pqmcc.com:8040',
+    domain: 'http://192.168.1.114:10210',
     devCode: "2aaecd0b124df819eda75e639a1f91fd",
     key: "f81804778c89c779"
 }

common/js/list.js

@@ -23,17 +23,18 @@ export default {
                 status: "more",
                 empty: false,
                 total: 0,
-                header: {},
+                header: {
+                    "Content-Type": "application/json;charset=UTF-8",
+                },
                 params: {
-                    pages: 1,
+                    currentPage: 1,
-                    step: 20,
+                    pageSize: 20,
-                    entity: {},
                 },
                 reload () {
                     this.data = [];
                     this.status = "loading";
                     this.empty = false;
-                    this.params.pages = 1;
+                    this.params.currentPage = 1;
                     this.next();
                 },
                 callBack: null,
@@ -42,47 +43,33 @@ export default {
                 next () {
                     me.$request({
                         url: url,
-                        data: Object.assign(
+                        data: this.params,
-                            {
-                                // page: {
-                                //     current: this.params.pages,
-                                //     orders: [],
-                                //     size: this.params.step,
-                                //     total: 0,
-                                // },
-                                offset: this.params.pages,
-                                limit: this.params.step,
-                                current: this.params.pages,
-                                pageSize: this.params.step,
-                            },
-                            this.params
-                        ),
                         header: this.header,
                         method: "POST",
                     }).then((res) => {
                         console.warn(res);
-                        let resultData = res.rows || res.data?.list || res.data?.result?.records || [];
+                        let resultData = res.rows || res.data?.list || res.data?.records || [];
-                        if (this.params.pages == 1) {
+                        if (this.params.currentPage == 1) {
                             this.data = resultData;
                             if (resultData.length == 0 || resultData == 0) {
                                 this.empty = true;
-                            } else if (resultData.length < this.params.step) {
+                            } else if (resultData.length < this.params.pageSize) {
                                 this.status = "noMore";
                             } else if (res.total == resultData.length) {
                                 this.status = "noMore";
                             }
                         } else {
                             this.data.push(...resultData);
-                            if (resultData.length < this.params.step) {
+                            if (resultData.length < this.params.pageSize) {
                                 this.status = "noMore";
                             }
                         }
 
-                        if (this.params.pages == 1) {
+                        if (this.params.currentPage == 1) {
                             this.firstCallBack && this.firstCallBack();
                         }
                         this.loadedCallback && this.loadedCallback();
-                        this.params.pages++;
+                        this.params.currentPage++;
                         this.total = res.total;
                         this.loading = false;
                     });

common/js/mqtt.js

@@ -0,0 +1,11 @@
+export const MQTT_IP = '60.204.148.71:9001'//mqtt地址端口, 使用emqx时一定要加mqtt
+const MQTT_USERNAME = 'test'//mqtt用户名
+const MQTT_PASSWORD = 'test'//密码
+
+export const MQTT_OPTIONS = {
+    connectTimeout: 5000,
+    clientId: '',
+    username: MQTT_USERNAME,
+    password: MQTT_PASSWORD,
+    clean: false
+}

common/js/request.js

@@ -24,14 +24,16 @@ export default (options = {}) => {
             },
             header: {
                 "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+                "Authorization":"12",
                 ...options.header
             },
             method: options.method || 'GET',
             success: async (res) => {
+                console.log(res);
                 if (arr.indexOf(options.url) > -1) {
                     arr.splice(arr.indexOf(options.url), 1)
                 }
-                if (res.data.resultCode !== 10000) {
+                if (res.data.resultCode !== 10000 && res.data.code !== 'A0000' ) {
                     errHandler(res.data)
                     reject(res.data)
                 } else {

components/Cn-empty/Cn-empty.vue

@@ -0,0 +1,52 @@
+<template>
+    <view class="empty" :style="{ paddingTop: paddingTop + 'rpx' }">
+        <image :src="img" mode="aspectFill" class="empty-img"></image>
+        <view class="empty-text">{{ msg }}</view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        msg: {
+            type: String,
+            default: '暂无数据',
+        },
+        img: {
+            type: String,
+            default: '/static/empty.png',
+        },
+        paddingTop: {
+            type: Number,
+            default: 70,
+        },
+    },
+    data() {
+        return {}
+    },
+}
+</script>
+
+<style>
+.empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.empty-text {
+    margin-top: 30rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666;
+    line-height: 32rpx;
+}
+.empty-img {
+    width: 244rpx;
+    height: 320rpx;
+}
+</style>

manifest.json

@@ -132,7 +132,7 @@
                 "/api" : {
                     "https" : true,
                     // "target" : "https://china.indpecker.com",
-                    "target" : "http://pqmcc.com:8040",
+                    "target" : "http://192.168.1.114:10210",
                     "changOrigin" : true,
                     "pathRewrite" : {
                         "/api" : ""

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "html2canvas": "^1.4.1"
+    "html2canvas": "^1.4.1",
+    "mqtt": "3.0.0"
   }
 }

pages.json

@@ -421,7 +421,7 @@
     "list": [
       {
         "name": "login", //模式名称
-        "path": "pages/device/APF/detail", //启动页面，必选
+        "path": "pages/project/new", //启动页面，必选
         "query": "" //启动参数，在页面的onLoad函数里面得到。
       }
     ]

pages/project/detail.vue

@@ -35,6 +35,10 @@
                             </uni-list-item>
                         </uni-list>
                     </view>
+                    <view style="padding: 0 20rpx" v-show="navMenuActive == 2">
+                        <image class="gplot gplot-box" mode="aspectFill" src="/static/test2.pic.png"
+                            v-for="(item, key) in 3" :key="key" />
+                    </view>
                     <uni-load-more status="nomore"></uni-load-more>
                 </view>
                 <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
@@ -53,9 +57,11 @@ export default {
             loading: false,
             project: '',
             navMenuList: [{
-                text: '设备列表'
+                text: '设备'
             }, {
-                text: '子用户列表'
+                text: '子用户'
+            }, {
+                text: '拓扑图'
             }],
             content: [],
             navHeight: 0,
@@ -168,4 +174,10 @@ export default {
         border-radius: 10rpx;
     }
 }
+
+.gplot {
+    position: relative;
+    width: 100%;
+    border: 8rpx solid #ccc;
+}
 </style>

pages/project/list.vue

@@ -4,7 +4,8 @@
         <uni-nav-bar dark :fixed="true" status-bar left-icon="left" :rightIcon="userInfo.role == '2' ? '' : 'plusempty'"
             background-color="#fff" color="#111" title="项目管理" @clickLeft="back" @clickRight="add" />
         <view class="message">
-            <uni-card title="XXX项目1" extra="用能" @click="jump('XXX项目1')">
+            <uni-card :title="item.name" :extra="item.projectType" @click="jump('XXX项目1')"
+                v-for="(item, index) in store.data" :key="index">
                 <view class="term-list-bottom">
                     <view class="term-list-bottom-item">
                         <view>设备个数</view>
@@ -16,25 +17,16 @@
                     </view>
                 </view>
             </uni-card>
-            <uni-card title="XXX项目2" extra="监测" @click="jump('XXX项目2')">
+            <Cn-empty v-if="store.empty"></Cn-empty>
-                <view class="term-list-bottom">
+            <uni-load-more v-if="store.data && store.data.length > 0" :status="store.status"></uni-load-more>
-                    <view class="term-list-bottom-item">
-                        <view>设备个数</view>
-                        <view>3</view>
-                    </view>
-                    <view class="term-list-bottom-item">
-                        <view>用户个数</view>
-                        <view>1</view>
-                    </view>
-                </view>
-            </uni-card>
-            <uni-load-more status="nomore"></uni-load-more>
         </view>
     </view>
 </template>
 
 <script>
+import list from '../../common/js/list'
 export default {
+    mixins: [list],
     data () {
         return {
             loading: false,
@@ -43,7 +35,8 @@ export default {
     },
     methods: {
         init () {
-            this.userInfo = uni.getStorageSync('userInfo')
+            this.store = this.DataSource('/project/queryProject')
+            this.store.reload()
         },
         back () {
             uni.navigateBack()

pages/project/new.vue

@@ -8,20 +8,22 @@
                             <uni-easyinput type="number" v-model="formData.name" placeholder="请输入项目名称" />
                         </uni-forms-item>
                         <uni-forms-item label="项目类别">
-                            <uni-data-select v-model="formData.type" :localdata="TypeRange"></uni-data-select>
+                            <uni-data-select v-model="formData.projectType" :localdata="TypeRange"></uni-data-select>
                         </uni-forms-item>
                         <uni-forms-item label="区域">
                             <view style="display:flex;">
-                                <uni-easyinput :clearable="false" type="textarea" autoHeight v-model="formData.address"
+                                <uni-easyinput :clearable="false" type="textarea" autoHeight v-model="formData.area"
                                     placeholder="请输入区域信息" />
                                 <uni-icons type="location" color="#007aff" size="26" class="ml20"
                                     @click="chooseLocation"></uni-icons>
                             </view>
                         </uni-forms-item>
                         <uni-forms-item label="描述">
-                            <uni-easyinput type="textarea" autoHeight v-model="formData.name" placeholder="请输入项目描述" />
+                            <uni-easyinput type="textarea" autoHeight v-model="formData.description"
+                                placeholder="请输入项目描述" />
                         </uni-forms-item>
-                        <uni-file-picker title="请上传拓扑图" :sourceType="['album']"></uni-file-picker>
+                        <uni-file-picker v-model="formData.files" title="请上传拓扑图" :sourceType="['album']"
+                            @select="select"></uni-file-picker>
                     </uni-forms>
                 </view>
                 <view class="btn-wrap">
@@ -32,14 +34,20 @@
     </Cn-page>
 </template>
 <script>
+import { addAppProject } from '../../common/api/project'
 export default {
     data () {
         return {
             loading: false,
             formData: {
+                area: "",
+                files: [],
+                description: '',
+                projectType: '1',
                 name: '',
-                gplot: '',
+                userId: '123456',
-                type:''
+                lat: '2',
+                lng: '3'
             },
             TypeRange: [
                 {
@@ -53,8 +61,22 @@ export default {
             ]
         }
     },
+    onLoad () {
+        uni.getLocation({
+            type: 'wgs84',
+            success: function (res) {
+                console.log(res);
+                console.log('当前位置的经度：' + res.longitude);
+                console.log('当前位置的纬度：' + res.latitude);
+            }
+        });
+    },
     methods: {
+        select (e) {
+            console.log(e);
+        },
         chooseLocation () {
+
             uni.chooseLocation({
                 success: function (res) {
                     this.address = res.name
@@ -65,11 +87,44 @@ export default {
                 }
             });
         },
-        submit () {
+        async submit () {
-            this.$util.toast('项目创建成功')
+            if (!this.formData.name) {
-            setTimeout(() => {
+                this.$util.toast('请输入项目名称')
-                uni.navigateBack({ delta: 1 })
+                return
-            }, 1500);
+            }
+            if (!this.formData.projectType) {
+                this.$util.toast('请选择项目类别')
+                return
+            }
+            if (!this.formData.area) {
+                this.$util.toast('请输入区域信息')
+                return
+            }
+            if (!this.formData.description) {
+                this.$util.toast('请输入项目描述')
+                return
+            }
+            if (!this.formData.files.length) {
+                this.$util.toast('请上传拓扑图')
+                return
+            }
+            let arr = []
+            for (let i = 0; i < this.formData.files.length; i++) {
+                let item = this.formData.files[i]
+                arr.push({
+                    name: 'files',
+                    url: item.url
+                })
+            }
+            let data = JSON.parse(JSON.stringify(this.formData))
+            delete data.files
+            addAppProject(data, arr).then(res => {
+                console.log(res)
+                this.$util.toast('项目创建成功')
+                // setTimeout(() => {
+                //     uni.navigateBack({ delta: 1 })
+                // }, 1500);
+            })
         }
     }
 }

pnpm-lock.yaml

@@ -2,7 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   html2canvas: ^1.4.1
-  mqtt: ^3.0.0
+  mqtt: 3.0.0
 
 dependencies:
   html2canvas: 1.4.1