From 0f47dfaefc53d4e5e9322a83f0967159be9abbb2 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 27 一月 2022 14:33:16 +0800
Subject: [PATCH] 性化设置：图标主题
---
src/pages/internetData/views/helemtTable.vue | 686 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 360 insertions(+), 326 deletions(-)
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index 5c80651..f12a8ff 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -1,202 +1,192 @@
<template>
-<div class="helemtTable">
-<el-table
- :data="tableData"
- style="width: 100%"
- header-align="center"
- :highlight-current-row="true"
+ <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="80"
- type="index">
- </el-table-column>
+ <el-table-column
+ header-align="center"
+ label="搴忓彿"
+ align="center"
+ width="60"
+ type="index"
+ >
+ </el-table-column>
- <el-table-column
- header-align="center"
- label="璁惧"
- width="260">
- <template slot-scope="scope">
- <div class="index-container">
+ <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-high': scope.row.elec >= 40,
- 'elec-middle': scope.row.elec < 40 && scope.row.elec > 0,
- 'elec-low': scope.row.elec === 0}"
- >{{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>
- </template>
- </el-table-column>
+ </div>
+ </template>
+ </el-table-column>
- <el-table-column
- header-align="center"
- align="center"
+ <el-table-column
+ header-align="center"
+ align="center"
prop="ip"
- label="IP鍦板潃">
- </el-table-column>
+ label="IP鍦板潃"
+ >
+ </el-table-column>
- <el-table-column
- header-align="center"
- align="center"
+ <el-table-column
+ header-align="center"
+ align="center"
prop="mac"
label="mac鍦板潃"
- width="140">
- </el-table-column>
+ width="140"
+ >
+ </el-table-column>
- <el-table-column
- header-align="center"
- align="center"
- prop="longitude"
- label="缁忓害">
- </el-table-column>
-
- <el-table-column
- header-align="center"
- align="center"
- prop="latitude"
- label="绾害">
- </el-table-column>
-
- <el-table-column
- header-align="center"
- align="center"
- prop="latitude"
- label="鍦板潃">
- </el-table-column>
-
- <el-table-column
+ <el-table-column
header-align="center"
align="center"
- prop="height"
- label="楂樺害">
- </el-table-column>
+ prop="lng"
+ label="缁忓害"
+ >
+ </el-table-column>
- <el-table-column
+ <el-table-column
header-align="center"
align="center"
- prop="positon"
- label="瀹氫綅鐘舵��">
- </el-table-column>
+ prop="lat"
+ label="绾害"
+ >
+ </el-table-column>
- <el-table-column
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="locate_state"
+ label="鍦板潃"
+ >
+ </el-table-column>
+
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="high"
+ label="楂樺害"
+ >
+ </el-table-column>
+
+ <el-table-column
+ header-align="center"
+ align="center"
+ prop="gps_type"
+ label="瀹氫綅鐘舵��"
+ >
+ </el-table-column>
+
+ <el-table-column
align="center"
header-align="center"
- prop="time"
- label="璁块棶鏃堕棿">
- </el-table-column>
+ prop="visit_time"
+ label="璁块棶鏃堕棿"
+ >
+ </el-table-column>
- <el-table-column
- align="center"
- header-align="center"
- label="鎿嶄綔">
+ <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>
+ <div class="action-container">
+ <img
+ src="/images/InternetData/瑙嗛.png"
+ alt=""
+ v-if="!scope.row.isSend"
+ @click="sendVoice(scope.row, scope.$index)"
+ />
+ <img
+ src="/images/InternetData/瑙嗛_鐐瑰嚮.png"
+ alt=""
+ v-else
+ @click="sendVoice(scope.row, scope.$index)"
+ />
+ <img
+ src="/images/InternetData/璇煶.png"
+ alt=""
+ v-if="!scope.row.istele"
+ @click="telephone(scope.row, scope.$index)"
+ />
+ <img
+ src="/images/InternetData/璇煶_鐐瑰嚮.png"
+ alt=""
+ v-else
+ @click="telephone(scope.row, scope.$index)"
+ />
+ </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>
-
- <el-pagination
- background
- :total="100"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page.sync="currentPage"
- :page-sizes="[5, 10, 15, 20]"
- :page-size="10"
- popper-class="page_helemt"
- layout="prev, pager, next,sizes,jumper"
- >
- </el-pagination>
-
- <telephoneBox :tele="telephoneObj" v-if="telephoneObj" @close="closeTele"/>
-
- <div class="mask" v-if="telephoneObj"></div>
-
-</div>
-
+ <div class="mask" v-if="telephoneObj"></div>
+ </div>
</template>
<script>
-import telephoneBox from '@/pages/internetData/components/telephoneBox'
+import telephoneBox from "@/pages/internetData/components/telephoneBox";
+import { getHelemtData, sendAudio } from "@/api/helemt";
+
+let voiceText = "";
export default {
- data (){
+ name: "helemtTable",
+ data() {
return {
- currentPage:1,
- tableData: [
- {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
- },
- ],
- commentContent:'',
- telephoneObj:null
- }
+ currentPage: 1,
+ page_size: 10,
+ total: 10,
+ helemtArr: [],
+ commentContent: "",
+ telephoneObj: null,
+ targetIndex: null,
+ };
},
- methods :{
- sendVoice (target){
- target.isSend = true
+ created() {
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
+ });
+ },
+ methods: {
+ async getHelemtArr(data) {
+ const res = await getHelemtData(data);
+ this.helemtArr = res.data.items;
+ this.total = res.data.total;
+ },
+ sendVoice(target, index) {
+ const _this = this;
+ target.isSend = true;
const h = this.$createElement;
this.$msgbox({
@@ -204,86 +194,139 @@
"div",
{
attrs: {
- class: "el-textarea"
- }
+ class: "el-textarea",
+ },
},
- [ h(
- "div",
- {
- attrs: {
- class: "el-title"
- }
- },[h("span",{
- attrs: {
- class: "icon iconfont"
- }
- },"\ue7cc"),h("span",null,"鍙戦�佽闊�")]),
+ [
+ h(
+ "div",
+ {
+ attrs: {
+ class: "el-title",
+ },
+ },
+ [
+ h(
+ "span",
+ {
+ attrs: {
+ class: "icon iconfont",
+ },
+ },
+ "\ue7cc"
+ ),
+ h("span", null, "鍙戦�佽闊�"),
+ ]
+ ),
h("textarea", {
attrs: {
placeholder: "璇疯緭鍏ヨ闊冲懡浠�",
- maxlength:"20",
+ maxlength: "20",
class: "el-textarea__inner",
autocomplete: "off",
rows: 3,
id: "commentContent",
-
},
value: this.commentContent,
- on: { input: this.onCommentInputChange }
+ on: { input: this.onCommentInputChange },
}),
- h("div",{attrs:{class:"info",id: "comment_info"}},"杩樺彲杈撳叆20涓瓧绗�")
+ h(
+ "div",
+ { attrs: { class: "info", id: "comment_info" } },
+ "杩樺彲杈撳叆20涓瓧绗�"
+ ),
]
),
showCancelButton: true,
confirmButtonText: "纭畾",
- confirmButtonClass:"hele_btn_save",
- cancelButtonClass:"hele_btn_cancel",
+ 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 => {
- target.isSend = false
-
+ 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",
+ });
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ return;
+ }
+ console.log(voiceText);
+ sendAudio(target.device_sn, voiceText).then((res) => {
+ this.$message({
+ message: "鎸囦护鍙戦�佹垚鍔�",
+ type: "success",
+ });
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ });
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ } else {
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ }
+ })
+ .catch(() => {
+ target.isSend = false;
+ _this.$set(_this.helemtArr, index, target);
+ });
+ },
+ telephone(target, index) {
+ this.targetIndex = index;
+ target.istele = true;
+ this.telephoneObj = target;
+ },
+ handleCurrentChange(val) {
+ this.currentPage = val;
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
});
-
-
-
},
- telephone (target){
- target.istele = true
- this.telephoneObj = target
+ handleSizeChange(val) {
+ this.page_size = val;
+ this.getHelemtArr({
+ page: this.currentPage,
+ pageSize: this.page_size,
+ });
},
- handleCurrentChange (){
-
+ onCommentInputChange() {
+ let value = document.querySelector("#commentContent").value;
+ voiceText = value;
+ let cont = 20 - value.length;
+ document.querySelector(
+ "#comment_info"
+ ).innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗;
},
- handleSizeChange (){
-
+ closeTele(e) {
+ e.istele = false;
+ this.$set(this.helemtArr, this.targetIndex, e);
+ this.telephoneObj = null;
+ this.targetIndex = null;
},
- onCommentInputChange(){
- let value = document.querySelector("#commentContent").value
- console.log(value);
- let cont = 20-value.length
- document.querySelector("#comment_info").innerHTML = `杩樺彲杈撳叆${cont}涓瓧绗
- },
- closeTele(e){
- e.istele = false
- this.telephoneObj = null
- }
},
- components :{
- telephoneBox
- }
-}
+ components: {
+ telephoneBox,
+ },
+};
</script>
<style scoped lang="scss">
.helemtTable {
position: relative;
- .el-table {
+ .el-table {
overflow-y: scroll;
height: 660px;
font-size: 12px;
@@ -301,75 +344,73 @@
.index-container {
display: flex;
align-items: center;
- justify-content: space-around;
height: 56px;
.icon {
font-size: 46px;
- color: #FFAA44;
+ color: #ffaa44;
+ margin-right: 10px;
}
}
- ::v-deep .el-table__row{
+ ::v-deep .el-table__row {
td {
- border-bottom: 2px solid #fff;
- border-top: 2px solid #fff;
+ 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;
- }
+ &: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;
- }
+ &: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) ;
+ background-color: rgb(242, 242, 247);
td {
- border-bottom: 2px solid rgb(242, 242, 247);
- border-top: 2px solid rgb(242, 242, 247);
+ 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);
- }
+ &: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);
- }
- }
+ 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);
+ 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);
- }
+ &: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);
- }
+ border-radius: 0 20px 20px 0;
+ border-right: 2px solid rgb(17, 170, 102);
+ border-bottom: 2px solid rgb(17, 170, 102);
+ }
+ }
}
- }
-
}
.elec-high {
@@ -386,29 +427,28 @@
::v-deep .el-pagination {
margin-top: 20px;
.el-pager li:not(.disabled):not(.active):hover {
- color: #11AA66;
+ color: #11aa66;
}
- .el-pager li:not(.disabled).active {
- background-color: #11AA66;
+ .el-pager li:not(.disabled).active {
+ background-color: #11aa66;
}
- input:focus, input:hover {
- border: 1px solid #11AA66 !important;
+ input:focus,
+ input:hover {
+ border: 1px solid #11aa66 !important;
}
- .el-input.is-focus input{
- border: 1px solid #11AA66 !important;
+ .el-input.is-focus input {
+ border: 1px solid #11aa66 !important;
}
-
-
}
::v-deep .has-gutter {
height: 70px;
}
- .mask {
- position: fixed;
+ .mask {
+ position: fixed;
top: 0;
bottom: 0;
left: 0;
@@ -416,77 +456,71 @@
text-align: center;
z-index: 1;
background-color: black;
- opacity: .5;
- }
-
-
+ opacity: 0.5;
+ }
}
- .el-textarea {
- height: 150px;
- padding: 0 15px;
+.el-textarea {
+ height: 150px;
+ padding: 0 15px;
- .el-title {
- margin-top: 20px;
- margin-bottom: 15px;
- color: #4F4F4F;
- font-size: 16px;
- font-weight: 700;
+ .el-title {
+ margin-top: 20px;
+ margin-bottom: 15px;
+ color: #4f4f4f;
+ font-size: 16px;
+ font-weight: 700;
- .icon {
- font-weight: normal;
- font-size: 19px;
- }
-
+ .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;
- }
-
-
}
+
+ .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;
- }
+ .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;
+ 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;
-}
+ &:hover {
+ background: #11aa66 !important;
+ border: 1px solid #11aa66 !important;
+ }
}
.hele_btn_cancel {
-width: 175px;
-height: 40px;
+ width: 175px;
+ height: 40px;
-border: 1px solid #E0E0E0;
-box-sizing: border-box;
-border-radius: 25px !important;
+ border: 1px solid #e0e0e0;
+ box-sizing: border-box;
+ border-radius: 25px !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0