From 4ff29e301de38488db0ff04f0209c99e37cf30b4 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 07 十二月 2021 18:56:34 +0800
Subject: [PATCH] 对比库管理
---
src/pages/internetData/views/helemtTable.vue | 678 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 608 insertions(+), 70 deletions(-)
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index 11cb89c..ee8972e 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -1,105 +1,643 @@
<template>
-<div class="helemtTable">
-<el-table
- :data="tableData"
- style="width: 100%">
- <el-table-column
- label="搴忓彿"
- type="index">
- </el-table-column>
+ <div class="helemtTable">
+ <el-table
+ :data="helemtArr"
+ style="width: 100%"
+ header-align="center"
+ :highlight-current-row="true"
+ >
+ <el-table-column
+ header-align="center"
+ label="搴忓彿"
+ align="center"
+ width="60"
+ type="index"
+ >
+ </el-table-column>
- <el-table-column
- label="璁惧"
- width="230">
- <template slot-scope="scope">
- <div class="index-container">
- <div class="index">{{scope.$index}}</div>
- <div class="info">
+ <el-table-column header-align="center" label="璁惧" width="280">
+ <template slot-scope="scope">
+ <div class="index-container">
<div class="icon iconfont"></div>
<div class="right">
- <div class="code">{{scope.row.code}}</div>
- <div class="elec">鐢甸噺 : <span class="elec-number">{{scope.row.elec}}</span></div>
+ <div class="code">璁惧缂栫爜 : {{ scope.row.device_sn }}</div>
+ <div class="elec">
+ 鐢甸噺 :
+ <span
+ :class="{
+ 'elec-high': scope.row.battery >= 40,
+ 'elec-middle':
+ scope.row.battery < 40 && scope.row.battery > 0,
+ 'elec-low': scope.row.battery === 0,
+ }"
+ >{{ scope.row.battery }}</span
+ >
+ </div>
</div>
</div>
- </div>
- </template>
- </el-table-column>
+ </template>
+ </el-table-column>
- <el-table-column
+ <el-table-column
+ header-align="center"
+ align="center"
prop="ip"
- label="IP鍦板潃">
- </el-table-column>
+ label="IP鍦板潃"
+ >
+ </el-table-column>
- <el-table-column
+ <el-table-column
+ header-align="center"
+ align="center"
prop="mac"
label="mac鍦板潃"
- width="150">
- </el-table-column>
+ width="140"
+ >
+ </el-table-column>
- <el-table-column
- prop="longitude"
- label="缁忓害">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="lng"
+ label="缁忓害"
+ >
+ </el-table-column>
- <el-table-column
- prop="latitude"
- label="绾害">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="lat"
+ label="绾害"
+ >
+ </el-table-column>
- <el-table-column
- prop="latitude"
- label="鍦板潃">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="locate_state"
+ label="鍦板潃"
+ >
+ </el-table-column>
- <el-table-column
- prop="height"
- label="楂樺害">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="high"
+ label="楂樺害"
+ >
+ </el-table-column>
- <el-table-column
- prop="positon"
- label="瀹氫綅鐘舵��">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="gps_type"
+ label="瀹氫綅鐘舵��"
+ >
+ </el-table-column>
- <el-table-column
- prop="time"
- label="璁块棶鏃堕棿">
- </el-table-column>
+ <el-table-column
+ align="center"
+ header-align="center"
+ prop="visit_time"
+ label="璁块棶鏃堕棿"
+ >
+ </el-table-column>
- <el-table-column
- label="鎿嶄綔">
- <template slot-scope="scope">
- <div class="action-container">
- <div class="icon iconfont"></div>
- <div class="icon iconfont"></div>
- </div>
- </template>
- </el-table-column>
+ <el-table-column align="center" header-align="center" label="鎿嶄綔">
+ <template slot-scope="scope">
+ <div class="action-container">
+ <img
+ src="/images/InternetData/瑙嗛.png"
+ alt=""
+ v-if="!scope.row.isSend"
+ @click="sendVoice(scope.row)"
+ />
+ <img
+ src="/images/InternetData/瑙嗛_鐐瑰嚮.png"
+ alt=""
+ v-else
+ @click="sendVoice(scope.row)"
+ />
+ <img
+ src="/images/InternetData/璇煶.png"
+ alt=""
+ v-if="!scope.row.istele"
+ @click="telephone(scope.row)"
+ />
+ <img
+ src="/images/InternetData/璇煶_鐐瑰嚮.png"
+ alt=""
+ v-else
+ @click="telephone(scope.row)"
+ />
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-pagination
+ background
+ :total="total"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page.sync="currentPage"
+ :page-sizes="[2, 10, 15, 20]"
+ :page-size="page_size"
+ popper-class="page_helemt"
+ layout="prev, pager, next,sizes,jumper"
+ >
+ </el-pagination>
+ <telephoneBox :tele="telephoneObj" v-if="telephoneObj" @close="closeTele" />
- </el-table>
-</div>
-
+ <div class="mask" v-if="telephoneObj"></div>
+ </div>
</template>
<script>
+import telephoneBox from "@/pages/internetData/components/telephoneBox";
+import { getHelemtData, sendAudio } from "@/api/helemt";
+
+let voiceText = "";
export default {
- data (){
+ name: "helemtTable",
+ data() {
return {
+ currentPage: 1,
+ page_size: 10,
+ total: 10,
tableData: [
- {code: "A123123123123", elec:79.1, ip:"192.168.1.2", mac:"ec:da:da:da:ed:98",
- longitude:120.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅" },
- ]
- }
- }
-}
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 29.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 0,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ {
+ code: "A123123123123",
+ elec: 79.1,
+ ip: "192.168.1.2",
+ mac: "ec:da:da:da:ed:98",
+ longitude: 120.123123,
+ latitude: 120.123123,
+ height: "11.21",
+ time: "0.23.45",
+ positon: "鍗曞悜瀹氫綅",
+ isSend: false,
+ istele: false,
+ },
+ ],
+ helemtArr: [],
+ commentContent: "",
+ telephoneObj: null,
+ };
+ },
+ created() {
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
+ });
+ },
+ methods: {
+ async getHelemtArr(data) {
+ const res = await getHelemtData(data);
+ console.log(res);
+ this.helemtArr = res.data.items;
+ this.total = res.data.total;
+ },
+ sendVoice(target) {
+ target.isSend = true;
+
+ const h = this.$createElement;
+ this.$msgbox({
+ message: h(
+ "div",
+ {
+ attrs: {
+ class: "el-textarea",
+ },
+ },
+ [
+ h(
+ "div",
+ {
+ attrs: {
+ class: "el-title",
+ },
+ },
+ [
+ h(
+ "span",
+ {
+ attrs: {
+ class: "icon iconfont",
+ },
+ },
+ "\ue7cc"
+ ),
+ h("span", null, "鍙戦�佽闊�"),
+ ]
+ ),
+ h("textarea", {
+ attrs: {
+ placeholder: "璇疯緭鍏ヨ闊冲懡浠�",
+ maxlength: "20",
+ class: "el-textarea__inner",
+ autocomplete: "off",
+ rows: 3,
+ id: "commentContent",
+ },
+ value: this.commentContent,
+ on: { input: this.onCommentInputChange },
+ }),
+ h(
+ "div",
+ { attrs: { class: "info", id: "comment_info" } },
+ "杩樺彲杈撳叆20涓瓧绗�"
+ ),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ confirmButtonClass: "hele_btn_save",
+ cancelButtonClass: "hele_btn_cancel",
+ cancelButtonText: "鍙栨秷",
+ beforeClose: (action, instance, done) => {
+ document.querySelector("#commentContent").value = "";
+ document.querySelector(
+ "#comment_info"
+ ).innerHTML = `杩樺彲杈撳叆20涓瓧绗;
+ target.isSend = false;
+ done();
+ },
+ }).then((action) => {
+ if (action == "confirm") {
+ if (!voiceText) {
+ this.$message({
+ message: "鎸囦护涓嶈兘涓虹┖",
+ type: "warning",
+ });
+ return;
+ }
+ console.log(voiceText);
+ sendAudio(target.device_sn, voiceText).then((res) => {
+ this.$message({
+ message: "鎸囦护鍙戦�佹垚鍔�",
+ type: "success",
+ });
+ });
+ target.isSend = false;
+ } else {
+ target.isSend = false;
+ }
+ });
+ },
+ telephone(target) {
+ target.istele = true;
+ this.telephoneObj = target;
+ },
+ handleCurrentChange(val) {
+ this.currentPage = val;
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
+ });
+ },
+ handleSizeChange(val) {
+ this.page_size = val;
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
+ });
+ },
+ onCommentInputChange() {
+ let value = document.querySelector("#commentContent").value;
+ voiceText = value;
+ let cont = 20 - value.length;
+ document.querySelector(
+ "#comment_info"
+ ).innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗;
+ },
+ closeTele(e) {
+ e.istele = false;
+ this.telephoneObj = null;
+ },
+ },
+ components: {
+ telephoneBox,
+ },
+};
</script>
<style scoped lang="scss">
.helemtTable {
- ::v-deep .el-table {
+ position: relative;
+ .el-table {
+ overflow-y: scroll;
+ height: 660px;
font-size: 12px;
+ font-weight: 700;
+
+ img {
+ width: 22px;
+ height: 22px;
+
+ &:first-child {
+ margin-right: 10px;
+ }
+ }
+
+ .index-container {
+ display: flex;
+ align-items: center;
+ height: 56px;
+
+ .icon {
+ font-size: 46px;
+ color: #ffaa44;
+ margin-right: 10px;
+ }
+ }
+
+ ::v-deep .el-table__row {
+ td {
+ border-bottom: 2px solid #fff;
+ border-top: 2px solid #fff;
+
+ &:first-child {
+ border-radius: 20px 0 0 20px;
+ border-left: 2px solid #fff;
+ border-bottom: 2px solid #fff;
+ }
+
+ &:last-child {
+ border-radius: 0 20px 20px 0;
+ border-right: 2px solid #fff;
+ border-bottom: 2px solid #fff;
+ }
+ }
+
+ &:hover {
+ background-color: rgb(242, 242, 247);
+
+ td {
+ border-bottom: 2px solid rgb(242, 242, 247);
+ border-top: 2px solid rgb(242, 242, 247);
+
+ &:first-child {
+ border-radius: 20px 0 0 20px;
+ border-left: 2px solid rgb(242, 242, 247);
+ border-bottom: 2px solid rgb(242, 242, 247);
+ }
+
+ &:last-child {
+ border-radius: 0 20px 20px 0;
+ border-right: 2px solid rgb(242, 242, 247);
+ border-bottom: 2px solid rgb(242, 242, 247);
+ }
+ }
+ }
+
+ &.current-row {
+ td {
+ background-color: #fff;
+ border-top: 2px solid rgb(17, 170, 102);
+ border-bottom: 2px solid rgb(17, 170, 102);
+
+ &:first-child {
+ border-radius: 20px 0 0 20px;
+ border-left: 2px solid rgb(17, 170, 102);
+ border-bottom: 2px solid rgb(17, 170, 102);
+ }
+
+ &:last-child {
+ border-radius: 0 20px 20px 0;
+ border-right: 2px solid rgb(17, 170, 102);
+ border-bottom: 2px solid rgb(17, 170, 102);
+ }
+ }
+ }
+ }
+
+ .elec-high {
+ color: rgb(17, 170, 102);
+ }
+ .elec-middle {
+ color: rgb(255, 170, 68);
+ }
+ .elec-low {
+ color: rgb(255, 100, 100);
+ }
}
+
+ ::v-deep .el-pagination {
+ margin-top: 20px;
+ .el-pager li:not(.disabled):not(.active):hover {
+ color: #11aa66;
+ }
+ .el-pager li:not(.disabled).active {
+ background-color: #11aa66;
+ }
+
+ input:focus,
+ input:hover {
+ border: 1px solid #11aa66 !important;
+ }
+
+ .el-input.is-focus input {
+ border: 1px solid #11aa66 !important;
+ }
+ }
+
+ ::v-deep .has-gutter {
+ height: 70px;
+ }
+
+ .mask {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 1;
+ background-color: black;
+ opacity: 0.5;
+ }
+}
+
+.el-textarea {
+ height: 150px;
+ padding: 0 15px;
+
+ .el-title {
+ margin-top: 20px;
+ margin-bottom: 15px;
+ color: #4f4f4f;
+ font-size: 16px;
+ font-weight: 700;
+
+ .icon {
+ font-weight: normal;
+ font-size: 19px;
+ }
+ }
+
+ .el-textarea__inner {
+ width: 357px;
+
+ &:focus {
+ border: 1px solid #11aa66;
+ }
+ }
+
+ .info {
+ font-size: 12px;
+ color: #828282;
+ text-align: right;
+ padding-right: 38px;
+ }
+}
+</style>
+
+<style lang="scss">
+.page_helemt {
+ .el-select-dropdown__item.selected span {
+ color: #11aa66;
+ }
+}
+.hele_btn_save {
+ width: 175px;
+ height: 40px;
+
+ background: #11aa66 !important;
+ border: 1px solid #11aa66 !important;
+ border-radius: 25px !important;
+ margin: 10px 17px 12px 10px !important;
+
+ &:hover {
+ background: #11aa66 !important;
+ border: 1px solid #11aa66 !important;
+ }
+}
+
+.hele_btn_cancel {
+ width: 175px;
+ height: 40px;
+
+ border: 1px solid #e0e0e0;
+ box-sizing: border-box;
+ border-radius: 25px !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0