From 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 12 四月 2022 17:50:21 +0800 Subject: [PATCH] 摄像机管理 --- src/views/personalCenter/components/OrderMng.vue | 588 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 329 insertions(+), 259 deletions(-) diff --git a/src/views/personalCenter/components/OrderMng.vue b/src/views/personalCenter/components/OrderMng.vue index a803d5d..9e9f084 100644 --- a/src/views/personalCenter/components/OrderMng.vue +++ b/src/views/personalCenter/components/OrderMng.vue @@ -13,7 +13,7 @@ <el-date-picker size="small" v-model="searchTime" - @change="save" + @change="searchingBtn" type="datetimerange" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" @@ -23,8 +23,8 @@ </div> <div class="right"> - <div class="button searchBtn" @click="save">鎼滅储</div> - <div class="button resetBtn" @click="save">閲嶇疆</div> + <div class="button searchBtn" @click="searchingBtn">鎼滅储</div> + <div class="button resetBtn" @click="clearSearch">閲嶇疆</div> </div> <div class="to-excel"> <span class="iconfont"></span> <span>瀵煎嚭</span> @@ -47,25 +47,29 @@ }}</template> </el-table-column> <el-table-column - prop="name" - label="濮撳悕" + prop="sn" + label="璁㈠崟缂栧彿" show-overflow-tooltip ></el-table-column> - <el-table-column - prop="phone" - label="鎵嬫満鍙�" - show-overflow-tooltip - ></el-table-column> - <el-table-column prop="userType" label="鐢ㄦ埛绫诲瀷"></el-table-column> - <el-table-column prop="duration" label="鎺堟潈鏃堕暱"></el-table-column> - <el-table-column prop="authList" label="鏉冮檺"></el-table-column> - - <el-table-column label="鐘舵��"> + <el-table-column label="浜у搧鍚嶇О" show-overflow-tooltip> <template slot-scope="scope"> - <div v-if="scope.row.isBind == 1" class="status green">宸茬粦瀹�</div> - <div v-else class="status">鏈粦瀹�</div> + {{ scope.row.products[0].productName }} </template> </el-table-column> + <el-table-column + prop="createTime" + label="鍒涘缓鏃堕棿" + show-overflow-tooltip + ></el-table-column> + <el-table-column prop="orderMoney" label="璁㈠崟閲戦"></el-table-column> + <el-table-column label="鏀粯鏂瑰紡"> + <template slot-scope="scope"> + <div v-if="scope.row.payMethod == 0">绾夸笅姹囨</div> + <div v-if="scope.row.payMethod == 1">鏀粯瀹�</div> + <div v-if="scope.row.payMethod == 2">寰俊</div> + </template> + </el-table-column> + <el-table-column prop="status" label="璁㈠崟鐘舵��"></el-table-column> <el-table-column label="鎿嶄綔"> <template slot-scope="scope"> @@ -87,15 +91,16 @@ </div> </div> </div> + <div class="order-detail" v-else> <div class="banner"> - <span class="iconfont"></span> <span class="t">璁㈠崟璇︽儏</span> + <span class="iconfont" @click="back"></span> + <span class="t">璁㈠崟璇︽儏</span> </div> <div class="block"> <div class="head-name">璁㈠崟淇℃伅</div> <div class="order-general-view"> - <div class="detail-list"> <div class="item"> <label>璁㈠崟缂栧彿锛�</label> @@ -117,7 +122,7 @@ <label>璁㈠崟鐘舵�侊細</label> <span>{{ form.status }}</span> </div> - + <div class="item"> <label>璁㈠崟閲戦锛�</label> <span>{{ @@ -129,157 +134,117 @@ </div> <div class="block"> <div class="head-name">璁㈠崟璇︽儏</div> - <el-table - id="multipleTable" - ref="multipleTable" - tooltip-effect="dark" - :data="form.products" - style="width: 100%" - :fit="true" - :max-height="tableHeight" - :default-sort="{ prop: 'createTime', order: 'descending' }" - @selection-change="handleSelectionChange" - > - <el-table-column prop="productName" label="浜у搧鍚嶇О" width="220"></el-table-column> - <el-table-column prop="productTypeName" label="浜у搧绫诲瀷" width="140"></el-table-column> - <el-table-column prop="productVersion" label="鐗堟湰鍙�" width="140"></el-table-column> - <el-table-column label="閰嶇疆璇︽儏" min-width="180"> - <template slot-scope="scope"> - <div style="text-align: left"> - <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.modules.length"> - 妯″潡锛� - <span v-for="item in scope.row.modules" :key="item">{{ item + " " }}</span> - </p> - <p v-if="scope.row.productBaseDetail.hasChUnitPrice"> - 閫氶亾鏁伴噺锛� - <span>{{ scope.row.ChCount }}</span> - </p> - <p v-if="scope.row.productBaseDetail.hasAuthPrice"> - 鎺堟潈鏁伴噺锛� - <span>{{ scope.row.authCount }}</span> - </p> - <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.sdks.length"> - 绠楁硶锛� - <span v-for="item in scope.row.sdks" :key="item">{{ item + " " }}</span> - </p> - <p> - 鏈嶅姟鏃堕暱锛� - <span>{{ scope.row.serveYear + "骞�" }}</span> - </p> - </div> - </template> - </el-table-column> - <el-table-column prop="devCount" label="鏁伴噺" width="110"></el-table-column> - <el-table-column label="鏈嶅姟璧锋鏃堕棿" min-width="180"> - <template slot-scope="scope"> - <p>{{ scope.row.startTime }}</p> - <p>{{ scope.row.endTime }}</p> - </template> - </el-table-column> - <el-table-column label="閲戦" prop="price" width="130"> - <template slot-scope="scope">{{ form.source == 0 ? "--" : "锟� " + scope.row.price + " 鍏�" }}</template> - </el-table-column> - <el-table-column label="鎿嶄綔" min-width="200"> - <template slot-scope="scope"> - <div class="operation"> - <span style="cursor: pointer" @click="downLoadEnclosure(scope.row)" v-if="scope.row.appendix.length" - >涓嬭浇闄勪欢</span - > - <span - style="cursor: pointer" - v-if="scope.row.orderStatus == 2 && (scope.row.productType == 3 || scope.row.productType == 4)" - @click="downLoadSoftware(scope.row)" - >涓嬭浇杞欢</span - > - <span - style="cursor: pointer" - v-if="scope.row.orderStatus == 2 && (scope.row.productType == 2 || scope.row.productType == 1)" - @click="downLoadSoftware(scope.row)" - >涓嬭浇瀹夎鍖�</span - > - <span - style="cursor: pointer" - v-if="scope.row.orderStatus == 2 && scope.row.productType == 5" - @click="downLoadAuth(scope.row)" - >涓嬭浇浜у搧瀵嗛挜</span - > - <span style="cursor: pointer" v-if="scope.row.productType != 2" @click="toDevice(scope.row)" - >鏌ョ湅璁惧</span - > - </div> - </template> - </el-table-column> - </el-table> + <el-table + id="multipleTable" + ref="multipleTable" + tooltip-effect="dark" + :data="form.products" + style="width: 100%" + :fit="true" + :default-sort="{ prop: 'createTime', order: 'descending' }" + v-if="showTable" + > + <el-table-column prop="productName" label="浜у搧鍚嶇О"></el-table-column> + + <el-table-column label="閰嶇疆璇︽儏"> + <template slot-scope="scope"> + <div style="text-align: left"> + <p + v-if=" + scope.row.productType != 3 && + scope.row.productType != 4 && + scope.row.modules.length + " + > + 妯″潡锛� + <span v-for="item in scope.row.modules" :key="item">{{ + item + " " + }}</span> + </p> + <p v-if="scope.row.productBaseDetail.hasChUnitPrice"> + 閫氶亾鏁伴噺锛� + <span>{{ scope.row.ChCount }}</span> + </p> + <p v-if="scope.row.productBaseDetail.hasAuthPrice"> + 鎺堟潈鏁伴噺锛� + <span>{{ scope.row.authCount }}</span> + </p> + <p + v-if=" + scope.row.productType != 3 && + scope.row.productType != 4 && + scope.row.sdks.length + " + > + 绠楁硶锛� + <span v-for="item in scope.row.sdks" :key="item">{{ + item + " " + }}</span> + </p> + <p> + 鏈嶅姟鏃堕暱锛� + <span>{{ scope.row.serveYear + "骞�" }}</span> + </p> + </div> + </template> + </el-table-column> + <el-table-column prop="devCount" label="鏁伴噺"></el-table-column> + <el-table-column label="鏈嶅姟璧锋鏃堕棿"> + <template slot-scope="scope"> + <p>{{ scope.row.startTime }}</p> + <p>{{ scope.row.endTime }}</p> + </template> + </el-table-column> + <el-table-column label="閲戦"> + <template slot-scope="scope">{{ + form.source == 0 ? "--" : "锟� " + scope.row.price + " 鍏�" + }}</template> + </el-table-column> + </el-table> </div> <div class="block"> <div class="head-name">鏀粯淇℃伅</div> - <el-table - tooltip-effect="dark" - :data="form.payInfo" - :fit="true" - :max-height="tableHeight" - :default-sort="{ prop: 'createTime', order: 'descending' }" - :span-method="tableSpanMethod" - > - <el-table-column prop="payMethod" label="鏀粯娓犻亾" width="150"> - <template slot-scope="scope"> - <div v-if="scope.row.payMethod == 1">绾夸笅姹囨</div> - <div v-if="scope.row.payMethod == 2">鏀粯瀹�</div> - <div v-if="scope.row.payMethod == 3">寰俊</div> - </template> - </el-table-column> - <!-- <el-table-column prop="payTime" label="浠樻鏃堕棿" align="center" min-width="150" ></el-table-column> --> - <el-table-column prop="updateTime" label="浠樻鏃堕棿" width="180"></el-table-column> - <el-table-column prop="payMoney" label="浠樻閲戦" width="150"></el-table-column> - <el-table-column - prop="tradeNo" - label="闄勪欢鍑瘉鍙�/娴佹按鍙�" - v-if="form.payMethod == 2" - width="200" - ></el-table-column> - <el-table-column prop="payAccount" label="浠樻璐﹀彿" width="190"></el-table-column> - <el-table-column label="浠樻鍗曚綅/濮撳悕" prop="payUser" width="220"></el-table-column> - <el-table-column label="鏌ョ湅浠樻鍑瘉" width="200"> - <template slot-scope="scope"> - <div> - <el-image - style="width: 100px" - :fit="imageFit" - :src="`/httpImage/${scope.row.appendix}`" - :preview-src-list="[`/httpImage/${scope.row.appendix}`]" - ></el-image> - </div> - </template> - </el-table-column> - <el-table-column label="瀹℃牳鐘舵��" width="180"> - <template slot-scope="scope"> - <div> - <span v-if="scope.row.orderStatus == 11">瀹℃牳涓�</span> - <span v-if="scope.row.orderStatus == 12">宸查┏鍥�</span> - <span v-if="scope.row.orderStatus == 2">瀹℃牳閫氳繃</span> - </div> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" min-width="170"> - <template slot-scope="scope"> - <div v-if="scope.row.orderStatus !== 2"> - <span class="cursor-pointer" @click="checkOrder(1)">瀹℃牳閫氳繃</span> - <span class="cursor-pointer" @click="checkOrder(2)">椹冲洖</span> - </div> - <span v-else>-</span> - </template> - </el-table-column> - </el-table> + <el-table + tooltip-effect="dark" + :data="form.payInfo" + :fit="true" + :default-sort="{ prop: 'createTime', order: 'descending' }" + v-if="showTable" + > + <el-table-column prop="payMethod" label="鏀粯娓犻亾" min-width="80"> + <template slot-scope="scope"> + <div v-if="scope.row.payMethod == 1">绾夸笅姹囨</div> + <div v-if="scope.row.payMethod == 2">鏀粯瀹�</div> + <div v-if="scope.row.payMethod == 3">寰俊</div> + </template> + </el-table-column> + <!-- <el-table-column prop="payTime" label="浠樻鏃堕棿" align="center" min-width="150" ></el-table-column> --> + <el-table-column prop="updateTime" label="浠樻鏃堕棿"></el-table-column> + <el-table-column prop="payMoney" label="浠樻閲戦"></el-table-column> + + <el-table-column prop="payAccount" label="浠樻璐﹀彿"></el-table-column> + <el-table-column label="浠樻鍗曚綅/濮撳悕" prop="payUser"></el-table-column> + <el-table-column label="鏌ョ湅浠樻鍑瘉"> + <template slot-scope="scope"> + <div class="link" @click="openImg(scope.row.appendix)"> + 鏌ョ湅浠樻鍑瘉 + </div> + </template> + </el-table-column> + </el-table> </div> </div> </template> <script> -// import Steps from "./Steps"; -// import StepsCard from "./StepCard"; -// import TreeBox from "./TreeBox"; +import { getOrders } from "@/api/order"; +import { getOrderById } from "@/api/product"; + export default { components: {}, + created() { + this.searchingBtn(); + }, data() { return { searchTime: [ @@ -292,16 +257,7 @@ activeStep: 0, activeIndex: 0, total: 0, //鎬绘暟 - dataList: [ - { - name: "basic", - phone: "1121313232", - userType: "涓汉", - duration: "姘镐箙", - authList: "闆嗙兢1锛岄泦缇�2", - isBind: 1, - }, - ], + dataList: [], isShowAdd: false, //鏄惁灞曠ず鏂板寮圭獥 isShowUnbind: false, //鏄惁灞曠ず瑙g粦寮圭獥 unbindId: "", @@ -318,76 +274,103 @@ cluster: null, //閫変腑鐨勯泦缇ょ被鍨� showQuit: false, //灞曠ず閫�鍑洪泦缇ょ殑寮圭獥 showJoin: false, //灞曠ず鍔犲叆闆嗙兢鐨勫脊绐� - activeEquipment: null, //澶勭悊涓殑璁惧 + form: {}, //澶勭悊涓殑璁惧 isShowDetail: false, - form: { - id: "", - createTime: "", - createUserName: "", - payTime: "", - payMethod: "", - payAble: 0, - orderMoney: 0, - price: "", - serveYear: 1, - source: 0, - status: "", - products: [], - activeCodes: [], - payInfo: [], - }, + showTable: false, }; }, methods: { - goback() { - this.isShowAdd = false; - this.activeIndex = 0; - }, - goto(i) { - this.activeIndex = i; - }, - // 璺冲埌璁惧璇︽儏 - checkDetail(row) { - this.$router.push({ - path: "/equipmentDetail", - query: { - id: row.devId, - ip: row.devIp, - port: row.serverPort, - ndid: row.id, - }, - }); - }, - - // 璺冲埌绠楁硶璇︽儏 - algorithmDetail(row) { - this.$router.push({ - path: "/algorithmDetail", - query: { - id: row.devId, - ip: row.devIp, - port: row.serverPort, - }, - }); - }, - // 鏌ヨ鍒楄〃 - - save() {}, + searchingBtn() { + let param = { + page: this.page, + size: this.size, + startTime: this.searchTime[0], + endTime: this.searchTime[1], + inputText: this.inputText, + productBaseId: "0", + orderName: "", + orderType: "", + status: 0, + }; + getOrders(param).then((res) => { + this.dataList = res.data.list.map((item, indez) => { + let status = ""; + switch (item.orderStatus) { + case -1: + status = "宸插彇娑�"; + break; + case 0: + status = "鏈笅鍗�"; + break; + case 1: + status = "寰呮敮浠�"; + break; + case 2: + status = "宸叉敮浠�"; + break; + case 11: + status = "瀹℃牳涓�"; + break; + case 12: + status = "宸查┏鍥�"; + break; + default: + status = ""; + } + let name = ""; + let downFlag = false; + let products = []; + item.products.forEach((every, index) => { + // 鍒ゆ柇鏈鍗曟槸鍚﹀瓨鍦ㄥ彲涓嬭浇鐨勫唴瀹癸紙杞欢锛宻dk锛� + if (every.productType == 1 || every.productType == 3) { + downFlag = true; + } + // 褰掔被浜у搧鍜屾縺娲荤爜浠ヤ緵涓嬭浇 + products.push({ + productId: every.productId, + productName: every.productName, + activateCode: every.activateCode, + productTypeName: every.productTypeName, + }); + if (index == 0) { + name += every.productName + "(" + every.productTypeName + ")"; + } else { + name += + " / " + every.productName + "(" + every.productTypeName + ")"; + } + }); + return { + id: item.id, + sn: item.sn, + name: name, + source: item.source == 0 ? "婵�娲荤爜涓嬭浇" : "绾夸笂璐拱", + createTime: item.createTime, + status: status, + orderStatus: item.orderStatus, + orderMoney: item.orderMoney, + payMethod: item.payMethod, + code: + item.products.length > 1 ? "-" : item.products[0].activateCode, + canDownLoad: downFlag, + products: products, + }; + }); + this.total = res.data.total; + if (res.data.total <= this.size) { + this.page = 1; + } + }); + }, //鍒嗛〉鍔熻兘 handleSizeChange(size) { this.size = size; + this.searchingBtn(); }, //鍒嗛〉鍔熻兘 refrash(page) { this.page = page; - }, - - //瑙g粦鎸夐挳 - Untying(row) { - console.log(row); - this.unbindId = row.id; - this.isShowUnbind = true; + this.searchingBtn(); }, //鑾峰緱榛樿鏃堕棿 @@ -408,35 +391,119 @@ ]; }, - //鍏抽棴鏂板寮圭獥 - closeAddBox() { - this.isShowAdd = false; - }, - // 鍏抽棴瑙g粦寮圭獥 - closeUnbindBox() { - this.isShowUnbind = false; - }, - - //瑙g粦鎴愬姛鍥炶皟 - reflash() { - this.isShowUnbind = false; - }, - clearSearch() { this.searchTime = this.getDateInit(); this.inputText = ""; + this.searchingBtn(); }, - //閫�鍑洪泦缇� - quitCluster(equipment) { - this.activeEquipment = equipment; - this.showQuit = true; + showDetail(order) { + getOrderById(order.id).then((res) => { + if (res.success) { + let status = ""; + switch (res.data.orderInfo.orderStatus) { + case -1: + status = "宸插彇娑�"; + break; + case 0: + status = "鏈笅鍗�"; + break; + case 1: + status = "宸蹭笅鍗�,寰呮敮浠�"; + break; + case 2: + status = "宸叉敮浠�"; + break; + default: + status = ""; + } + + let prod = res.data.orderInfo.products.map((item) => { + // 绠楀嚭璧峰鏈嶅姟鏃堕棿 + let year = res.data.orderInfo.createTime.split("-")[0]; + let endTime = + parseInt(year) + + item.serveYear + + res.data.orderInfo.createTime.slice(4); + return { + productId: item.productId, + productName: item.productName, + productType: item.productType, + orderStatus: res.data.orderInfo.orderStatus, + productTypeName: item.productTypeName, + productVersion: item.productVersion, + modules: item.moduleNames, + sdks: item.sdkNames, + appendix: item.appendix, + serveYear: item.serveYear, + ChCount: item.ChCount, + authCount: item.authCount, + devCount: item.devCount, + price: res.data.orderInfo.orderMoney, + startTime: res.data.orderInfo.createTime, + endTime: endTime, + deviceIds: item.devIdList, + code: item.activateCode, + productBaseDetail: item.productBaseDetail, + }; + }); + let codes = res.data.orderInfo.products.map((item) => { + return { + productId: item.productId, + productName: item.productName, + code: item.activateCode, + deviceIds: item.deviceIds, + status: item.codeStatus == 0 ? "鏈縺娲�" : "宸叉縺娲�", + activeTime: item.activeTime, + devCount: item.devCount, + usedCount: item.usedCount, + }; + }); + let payInfo = res.data.orderInfo.payCerts.map((item) => { + return { + appendix: item.appendix, + payMethod: res.data.orderInfo.payMethod, + payTime: res.data.orderInfo.payTime, + updateTime: item.updateTime, + payAccount: item.payAccount, + payMoney: item.payMoney, + payUser: item.payUser, + tradeNo: res.data.orderInfo.tradeNo, + orderStatus: res.data.orderInfo.orderStatus, + }; + }); + this.form = { + id: res.data.orderInfo.id, + createTime: res.data.orderInfo.createTime, + createUserName: res.data.orderInfo.createUserName, + orderMoney: res.data.orderInfo.orderMoney, + orderStatus: res.data.orderInfo.orderStatus, + status: status, + sn: res.data.orderInfo.sn, + source: res.data.orderInfo.source, + payMethod: "鏀粯瀹�", + price: "-", + payAble: "-", + payTime: "-", + products: prod, + activeCodes: codes, + payInfo: payInfo, + }; + this.isShowDetail = true; + this.$nextTick(() => { + this.showTable = true; + }); + } + }); }, - //鍔犲叆闆嗙兢 - showDetail(equipment) { - this.activeEquipment = equipment; - this.isShowDetail = true; + back() { + this.isShowDetail = false; + this.searchingBtn(); + }, + + openImg(url) { + window.open("http://" + url); }, }, mounted() {}, @@ -465,9 +532,6 @@ margin-right: 10px; } } - .steps { - } - .searchBtn { width: 60px; height: 32px; @@ -779,6 +843,7 @@ .iconfont { margin-right: 10px; font-size: 18px; + cursor: pointer; } .t { font-size: 16px; @@ -789,7 +854,7 @@ } .block { box-sizing: border-box; - padding: 20px ; + padding: 20px; padding-bottom: 30px; margin-bottom: 24px; background: #ffffff; @@ -818,20 +883,21 @@ text-align: left; .item { width: 25%; - // margin: 15px 0 0; - margin-top: 30px; + // margin: 15px 0 0; + margin-top: 30px; label { height: 20px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; - line-height: 20px;color: #666666; + line-height: 20px; + color: #666666; } span { height: 20px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 700; - color: #3D3D3D; + color: #3d3d3d; line-height: 20px; } } @@ -860,4 +926,8 @@ border-color: #0065ff; } +.link { + color: #0065ff; + cursor: pointer; +} </style> \ No newline at end of file -- Gitblit v1.8.0