From 38f098f7d4ca5831a513a8d50e2efee08d452e03 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 22 十月 2021 18:55:59 +0800
Subject: [PATCH] 暂存
---
src/pages/internetEquipment/module/historyModule.vue | 38 +
public/images/InternetData/视频_点击.png | 0
public/images/InternetData/语音_点击.png | 0
src/pages/internetEquipment/views/helemetEquipment.vue | 146 ++++++
public/images/InternetData/安全帽-线-1 1.png | 0
src/pages/internetEquipment/components/tabSingle.vue | 59 ++
public/images/InternetData/语音.png | 0
public/apps.json | 23 +
src/pages/internetEquipment/index/index.vue | 81 +++
public/images/InternetData/Mask Group-2.png | 0
public/images/InternetData/Mask Group.png | 0
src/pages/internetEquipment/index/main.ts | 12
src/pages/internetData/components/telephoneBox.vue | 124 +++++
public/images/InternetData/安全帽-线 1.png | 0
public/images/InternetData/Mask Group-1.png | 0
src/pages/internetEquipment/components/warnDescription.vue | 37 +
src/pages/internetEquipment/module/realTimeModule.vue | 62 ++
src/pages/internetEquipment/components/headCard.vue | 74 +++
src/pages/internetData/views/helemtTable.vue | 415 +++++++++++++++++
public/images/InternetData/Group 488.png | 0
src/pages/internetEquipment/module/mapIndex.vue | 21
src/pages/internetEquipment/components/helemetEchart.vue | 122 +++++
src/pages/internetEquipment/components/helemetHead.vue | 54 ++
src/pages/internetEquipment/components/realTimeItem.vue | 29 +
public/images/InternetData/视频.png | 0
src/pages/internetEquipment/module/elecModule.vue | 40 +
26 files changed, 1,323 insertions(+), 14 deletions(-)
diff --git a/public/apps.json b/public/apps.json
index 4c34d51..cc63f42 100644
--- a/public/apps.json
+++ b/public/apps.json
@@ -645,6 +645,29 @@
"installed": true,
"isUpgrade": false,
"progressMsg": ""
+ },
+ {
+ "id": "fa5674ee-70cf-4e22-8a06-c17426fb737",
+ "name": "浜掕仈缃戣澶囩鐞�",
+ "package": "internetEquipment",
+ "type": "2",
+ "url": "/view/internetEquipment/",
+ "title": "浜掕仈缃戣澶囩鐞�",
+ "width": 1440,
+ "height": 900,
+ "iconBlob": "",
+ "icon": "../../images/app-mid/visual.png",
+ "version": "1.0.0",
+ "create_time": "2020-10-09 14:00:08",
+ "create_by": "",
+ "update_time": "",
+ "update_by": "",
+ "isDelete": 0,
+ "isDefault": false,
+ "remoteVersion": "",
+ "installed": true,
+ "isUpgrade": false,
+ "progressMsg": ""
}
],
"msg": "璇锋眰澶勭悊鎴愬姛",
diff --git a/public/images/InternetData/Group 488.png b/public/images/InternetData/Group 488.png
new file mode 100644
index 0000000..284a871
--- /dev/null
+++ b/public/images/InternetData/Group 488.png
Binary files differ
diff --git a/public/images/InternetData/Mask Group-1.png b/public/images/InternetData/Mask Group-1.png
new file mode 100644
index 0000000..d0c72a2
--- /dev/null
+++ b/public/images/InternetData/Mask Group-1.png
Binary files differ
diff --git a/public/images/InternetData/Mask Group-2.png b/public/images/InternetData/Mask Group-2.png
new file mode 100644
index 0000000..c3c584c
--- /dev/null
+++ b/public/images/InternetData/Mask Group-2.png
Binary files differ
diff --git a/public/images/InternetData/Mask Group.png b/public/images/InternetData/Mask Group.png
new file mode 100644
index 0000000..3c6ffcb
--- /dev/null
+++ b/public/images/InternetData/Mask Group.png
Binary files differ
diff --git "a/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277 1.png" "b/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277 1.png"
new file mode 100644
index 0000000..6ca58e5
--- /dev/null
+++ "b/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277 1.png"
Binary files differ
diff --git "a/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277-1 1.png" "b/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277-1 1.png"
new file mode 100644
index 0000000..55897a1
--- /dev/null
+++ "b/public/images/InternetData/\345\256\211\345\205\250\345\270\275-\347\272\277-1 1.png"
Binary files differ
diff --git "a/public/images/InternetData/\350\247\206\351\242\221.png" "b/public/images/InternetData/\350\247\206\351\242\221.png"
new file mode 100644
index 0000000..f323e19
--- /dev/null
+++ "b/public/images/InternetData/\350\247\206\351\242\221.png"
Binary files differ
diff --git "a/public/images/InternetData/\350\247\206\351\242\221_\347\202\271\345\207\273.png" "b/public/images/InternetData/\350\247\206\351\242\221_\347\202\271\345\207\273.png"
new file mode 100644
index 0000000..f53b3ee
--- /dev/null
+++ "b/public/images/InternetData/\350\247\206\351\242\221_\347\202\271\345\207\273.png"
Binary files differ
diff --git "a/public/images/InternetData/\350\257\255\351\237\263.png" "b/public/images/InternetData/\350\257\255\351\237\263.png"
new file mode 100644
index 0000000..a275bac
--- /dev/null
+++ "b/public/images/InternetData/\350\257\255\351\237\263.png"
Binary files differ
diff --git "a/public/images/InternetData/\350\257\255\351\237\263_\347\202\271\345\207\273.png" "b/public/images/InternetData/\350\257\255\351\237\263_\347\202\271\345\207\273.png"
new file mode 100644
index 0000000..1c0de69
--- /dev/null
+++ "b/public/images/InternetData/\350\257\255\351\237\263_\347\202\271\345\207\273.png"
Binary files differ
diff --git a/src/pages/internetData/components/telephoneBox.vue b/src/pages/internetData/components/telephoneBox.vue
new file mode 100644
index 0000000..228229c
--- /dev/null
+++ b/src/pages/internetData/components/telephoneBox.vue
@@ -0,0 +1,124 @@
+<template>
+ <div class="telephone-box">
+ <div class="title">
+ <span class="icon iconfont"></span>
+ <span>鍘荤數</span>
+ </div>
+ <div class="info">
+ <div class="id">1139</div>
+ <div class="sip">sip:1139@47.112.193.0</div>
+ </div>
+
+ <div class="video">1</div>
+
+ <div class="control">
+ <span class="icon iconfont"></span>
+ <span class="icon iconfont mid"></span>
+ <span class="icon iconfont"></span>
+ </div>
+
+ <div class="close el-icon-close" @click="close"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ props:{
+ tele:{
+ type:Object
+ }
+ },
+ data (){
+ return {
+
+ }
+ },
+
+ methods:{
+ close (){
+ this.$emit("close",this.tele)
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.telephone-box {
+ box-sizing: border-box;
+ position: fixed;
+ z-index: 2;
+ padding: 32px 28px 28px 55px;
+
+ width: 420px;
+ height: 382px;
+ left: 50%;
+ top: 50%;
+ margin-top: -15%;
+ margin-left: -15%;
+
+ background: #FFFFFF;
+ border-radius: 8px;
+ color: #4F4F4F;
+
+ .title {
+ text-align: left;
+ font-size: 16px;
+ font-weight: 700;
+
+ .icon {
+ margin-right: 2px;
+ font-size: 18px;
+ font-weight: normal;
+ }
+ }
+
+ .info {
+ margin-top: 18px;
+ font-weight: bold;
+ font-size: 16px;
+
+ .sip {
+ margin-top: 2px;
+ font-size: 12px;
+ font-weight: normal;
+ }
+ }
+
+ .video {
+ margin: 0 auto;
+ margin-top: 20px;
+ box-sizing: border-box;
+ width: 104px;
+ height: 104px;
+ background: #454141;
+ border: 5px solid #FFAA44;
+ border-radius: 50%;
+
+ font-size: 36px;
+ color: #fff;
+ line-height: 94px;
+ }
+
+ .control {
+ margin-top: 50px;
+
+ .icon {
+ font-size: 37px;
+ }
+
+ .mid {
+ margin: 0 37px;
+ }
+ }
+
+ .close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
index 11cb89c..6cdce5a 100644
--- a/src/pages/internetData/views/helemtTable.vue
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -2,76 +2,117 @@
<div class="helemtTable">
<el-table
:data="tableData"
- style="width: 100%">
+ 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="璁惧"
- width="230">
+ width="260">
<template slot-scope="scope">
<div class="index-container">
- <div class="index">{{scope.$index}}</div>
- <div class="info">
<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.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>
- </div>
</div>
</template>
</el-table-column>
<el-table-column
+ header-align="center"
+ align="center"
prop="ip"
label="IP鍦板潃">
</el-table-column>
<el-table-column
+ header-align="center"
+ align="center"
prop="mac"
label="mac鍦板潃"
- width="150">
+ 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
+ header-align="center"
+ align="center"
prop="height"
label="楂樺害">
</el-table-column>
<el-table-column
+ header-align="center"
+ align="center"
prop="positon"
label="瀹氫綅鐘舵��">
</el-table-column>
<el-table-column
+ align="center"
+ header-align="center"
prop="time"
label="璁块棶鏃堕棿">
</el-table-column>
<el-table-column
+ align="center"
+ header-align="center"
label="鎿嶄綔">
- <template slot-scope="scope">
+ <template slot-scope="scope">
<div class="action-container">
- <div class="icon iconfont"></div>
- <div class="icon iconfont"></div>
+ <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>
@@ -79,27 +120,373 @@
</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>
</template>
<script>
+import telephoneBox from '@/pages/internetData/components/telephoneBox'
export default {
data (){
return {
+ currentPage:1,
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:"鍗曞悜瀹氫綅" },
- ]
+ longitude:120.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,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.1231231, latitude:120.1231231,height:"11.21",time:"0.23.45",positon:"鍗曞悜瀹氫綅",
+ isSend:false,istele:false
+ },
+ ],
+ commentContent:'',
+ telephoneObj:null
}
+ },
+ methods :{
+ 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 => {
+ target.isSend = false
+
+ });
+
+
+
+ },
+ telephone (target){
+ target.istele = true
+ this.telephoneObj = target
+ },
+ handleCurrentChange (){
+
+ },
+ handleSizeChange (){
+
+ },
+ 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
}
}
</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;
+ justify-content: space-around;
+ height: 56px;
+
+ .icon {
+ font-size: 46px;
+ color: #FFAA44;
+ }
+ }
+
+ ::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: .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
diff --git a/src/pages/internetEquipment/components/headCard.vue b/src/pages/internetEquipment/components/headCard.vue
new file mode 100644
index 0000000..9159c44
--- /dev/null
+++ b/src/pages/internetEquipment/components/headCard.vue
@@ -0,0 +1,74 @@
+<template>
+ <div class="head-card">
+ <div class="card-left">
+ <div class="number" :style="colorStyle">{{number}}</div>
+ <div class="info">{{info}}</div>
+ </div>
+ <div class="card-right icon iconfont"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ number: {
+ require: true
+ },
+ info: {
+ require: true
+ },
+ icon: {
+ require: true
+ },
+ color: {
+ require: true
+ }
+ },
+ data (){
+ return {
+
+ }
+ },
+ computed: {
+ colorStyle (){
+ return {
+ "--color":this.color
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.head-card {
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px;
+ width: 187px;
+ height: 90px;
+ background: #FFFFFF;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+
+ .card-left {
+ .number {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--color);
+ }
+ .info {
+ font-size: 12px;
+ color: #4F4F4F;
+;
+ }
+ }
+
+ .card-right {
+ font-size: 58px;
+ color: var(--color);
+
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/helemetEchart.vue b/src/pages/internetEquipment/components/helemetEchart.vue
new file mode 100644
index 0000000..9f8a2cf
--- /dev/null
+++ b/src/pages/internetEquipment/components/helemetEchart.vue
@@ -0,0 +1,122 @@
+<template>
+ <div class="helemet-echart">
+ <div id="echart-cotainer" ></div>
+ </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+ data (){
+ return {
+ option : {
+ grid: {
+ show :false,
+ bottom: 20,
+ top: 20,
+ left: 40,
+ right: 20
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1', '2021-09-02 00:00', '1'],
+ axisLine: {
+ show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎
+ },
+ axisTick: {
+ show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害
+ },
+ spiltLine:{
+ show: false //鎯宠涓嶆樉绀虹綉鏍肩嚎锛屾敼涓篺alse
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine : {
+ show: false
+ },
+ axisLine: {
+ show: false //涓嶆樉绀哄潗鏍囪酱杞寸嚎
+ },
+ axisTick: {
+ show: false //涓嶆樉绀哄潗鏍囪酱鍒诲害
+ },
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ areaStyle: {},
+ areaStyle: {
+ normal: {
+ color: '#FFF8EB' //鏀瑰彉鍖哄煙棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ color: '#FFAA44'
+ }
+ }
+ }
+
+
+/* itemStyle: {
+ normal: {
+ color: '#f7ba0e',
+ label: {
+ show: true,
+ position: 'top',
+ formatter:this.format,
+ rich: {
+ color1: {
+ color: '#f7ba0e'
+ },
+ color2: {
+ color: '#42a1fe'
+ }
+ },
+ textStyle: {
+ color: '#333'
+ }
+ }
+ }
+} */
+ }
+ ],
+
+ }
+ }
+ },
+ mounted (){
+ let myChart = echarts.init(document.getElementById('echart-cotainer'))
+ myChart.setOption(this.option);
+ },
+ methods :{
+ /* format (params) {
+ console.log(params);
+ for (var i = 0,
+ l = this.option.xAxis.data.length; i < l; i++) {
+ if (this.option.xAxis.data[i] == params.name) {
+
+ var val1 = params.value || 0;
+ console.log(this);
+ var val2 = this.option.series[0].data[i] || 0;
+
+ return '{color1|' + val1 + '}/{color2|' + val2 + '}';
+ }
+ }
+ } */
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.helemet-echart {
+ #echart-cotainer {
+ height: 100%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/helemetHead.vue b/src/pages/internetEquipment/components/helemetHead.vue
new file mode 100644
index 0000000..ee54200
--- /dev/null
+++ b/src/pages/internetEquipment/components/helemetHead.vue
@@ -0,0 +1,54 @@
+<template>
+ <div class="helemetHead">
+ <headCard v-for="(item,index) in cardData"
+ :key="index"
+ :number="item.number"
+ :info="item.info"
+ :icon="item.icon"
+ :color="item.color"
+ />
+
+ <helemetEchart />
+
+ </div>
+</template>
+
+<script>
+import headCard from '@/pages/internetEquipment/components/headCard'
+import helemetEchart from '@/pages/internetEquipment/components/helemetEchart'
+
+export default {
+ data (){
+ return {
+ cardData: [
+ {number:233,info:"璁惧鎬婚噺",icon:"\ue743",color:"#4E94FF"},
+ {number:34,info:"鏈湀鏂板",icon:"\ue743",color:"#FFAA44"},
+ {number:45,info:"浠婃棩棰勮",icon:"\ue743",color:"#FF6464"},
+ ]
+ }
+ },
+ components :{
+ headCard,
+ helemetEchart
+ }
+
+}
+</script>
+
+<style scoped lang="scss">
+.helemetHead {
+ display: flex;
+
+ .head-card {
+ margin-right: 10px;
+ }
+
+ .helemet-echart {
+ margin-left: 10px;
+ width: 570px;
+ height: 90px;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/realTimeItem.vue b/src/pages/internetEquipment/components/realTimeItem.vue
new file mode 100644
index 0000000..791da22
--- /dev/null
+++ b/src/pages/internetEquipment/components/realTimeItem.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="realTimeItem">
+ <warnDescription/>
+ </div>
+</template>
+
+<script>
+import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+
+export default {
+ props :{
+ warnObj:{
+ type:Object
+ },
+ },
+ components :{
+ warnDescription
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.realTimeItem {
+ display: flex;
+ flex-direction: column;
+ width: 167px;
+ height: 134px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/tabSingle.vue b/src/pages/internetEquipment/components/tabSingle.vue
new file mode 100644
index 0000000..6f72438
--- /dev/null
+++ b/src/pages/internetEquipment/components/tabSingle.vue
@@ -0,0 +1,59 @@
+<template>
+ <div class="tab_single" :class="{'active' : id ===activeTab}">
+ <div class="icon iconfont">{{icon}}</div>
+ <div class="title">{{title}}</div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ icon: {
+ type : String,
+ require :true
+ },
+ title: {
+ type : String,
+ require :true
+ },
+ id: {
+ type : Number,
+ require :true
+ },
+ activeTab: {
+ type : Number,
+ require :true
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.tab_single {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 30px;
+ height: 50px;
+ width: 190px;
+ border-radius: 15px;
+ background-color: #fff;
+ color: #4F4F4F;
+ cursor: pointer;
+
+ .icon {
+ font-size: 25px;
+ }
+
+ .title {
+ width: 82px;
+ text-align: left;
+ font-size: 16px;
+ }
+
+ &.active {
+ background-color: #11AA66;
+ color: #fff;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/components/warnDescription.vue b/src/pages/internetEquipment/components/warnDescription.vue
new file mode 100644
index 0000000..6c933d3
--- /dev/null
+++ b/src/pages/internetEquipment/components/warnDescription.vue
@@ -0,0 +1,37 @@
+<template>
+ <div class="warn-description">
+ <div class="code"><span>璁惧缂栫爜: </span>{{warnDes.code}}</div>
+ <div class="location" v-if="warnDes.location">{{warnDes.location}}</div>
+ <div class="time"><span>鏃堕棿: </span>{{warnDes.time}}</div>
+ <div class="position" v-if="warnDes.longitude"><span>缁忓害: </span>{{warnDes.longitude}} <span>绾害: </span>{{warnDes.latitude}}</div>
+ <div class="warnIcon" v-if="warnDes.warn"><span class="icon iconfont"></span> {{warnDes.warn}}</div>
+ </div>
+</template>
+
+<script>
+export default {
+ props :{
+ warnDes : {
+ type: Object
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.warn-description {
+ .code, .location, .time, .position, .warnIcon {
+ text-align: left;
+ margin-bottom: 5px;
+ }
+
+ span {
+ font-weight: 700;
+ }
+
+ .warnIcon {
+ color: #FF6464;
+ }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/index/index.vue b/src/pages/internetEquipment/index/index.vue
new file mode 100644
index 0000000..b8b1994
--- /dev/null
+++ b/src/pages/internetEquipment/index/index.vue
@@ -0,0 +1,81 @@
+<template>
+ <div class="internert-equipment">
+ <!-- 宸︿晶tab鏍� -->
+ <div class="left_tab">
+ <tab-single
+ v-for="(item,index) in tabArr"
+ :id="index"
+ :key="index"
+ :icon="item.icon"
+ :title="item.title"
+ :activeTab="activeTab"
+ @click.native="toggleActive(index)"
+ />
+ </div>
+
+ <!-- 鍙充晶鍐呭 -->
+ <div class="right_content">
+ <!-- 瀹夊叏甯借澶� -->
+ <helemetEquipment v-if="activeTab === 0"/>
+
+ </div>
+ </div>
+</template>
+
+<script>
+import tabSingle from "../components/tabSingle.vue";
+import helemetEquipment from '@/pages/internetEquipment/views/helemetEquipment'
+
+export default {
+ data (){
+ return {
+ // 宸︿晶tab鏁版嵁
+ tabArr: [
+ {icon: "\ue77f", title: "瀹夊叏甯借澶�"},
+ {icon: "\ue767", title: "渚涢厤鐢佃澶�"},
+ {icon: "\ue763", title: "娑堥槻璁惧"},
+ {icon: "\ue765", title: "鑳芥簮璁惧"},
+ {icon: "\ue7c0", title: "缁欐帓姘磋澶�"},
+ ],
+ activeTab: 0
+ }
+ },
+ components: {
+ tabSingle,
+ helemetEquipment
+ },
+ methods :{
+ toggleActive (index){
+ this.activeTab = index
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+ box-sizing: border-box;
+}
+
+.internert-equipment {
+ display: flex;
+ height: 100%;
+ background-color: #fff;
+ border-top: 1px solid #E0E0E0;
+
+ .left_tab {
+ padding: 20px;
+ width: 230px;
+ height: 100%;
+
+ .tab_single {
+ margin-bottom: 10px;
+ }
+ }
+
+ .right_content {
+ height: 100%;
+ width: 100%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/index/main.ts b/src/pages/internetEquipment/index/main.ts
new file mode 100644
index 0000000..3afd407
--- /dev/null
+++ b/src/pages/internetEquipment/index/main.ts
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import App from './index.vue';
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+// import "@/assets/css/element-variables.scss";
+Vue.use(ElementUI)
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+})
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
new file mode 100644
index 0000000..c157c30
--- /dev/null
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -0,0 +1,40 @@
+<template>
+ <div class="elec-module">
+ <div class="title"></div>
+
+ <div class="elec-item"
+ v-for="(item,index) in warnArr"
+ :key="index">
+ <warnDescription
+ :warnDes="{code:item.code,
+ time:item.time,
+ location:item.location}"/>
+ </div>
+
+ </div>
+</template>
+
+<script>
+import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+export default {
+ props :{
+ warnArr:{
+ type: Array
+ }
+ },
+ components :{
+ warnDescription
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.elec-module {
+ width: 280px;
+ height: 292px;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ overflow-y: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/historyModule.vue b/src/pages/internetEquipment/module/historyModule.vue
new file mode 100644
index 0000000..73d05a5
--- /dev/null
+++ b/src/pages/internetEquipment/module/historyModule.vue
@@ -0,0 +1,38 @@
+<template>
+ <div class="history-module">
+ <div class="title"></div>
+ <div class="history-item"
+ v-for="(item,index) in warnArr"
+ :key="index">
+ <warnDescription
+ :warnDes="{code:item.code,
+ time:item.time,
+ warn:item.warn}"/>
+ </div>
+ </div>
+</template>
+
+<script>
+import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+export default {
+ props :{
+ warnArr : {
+ type: Array
+ }
+ },
+ components :{
+ warnDescription
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.history-module {
+ width: 280px;
+ height: 292px;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ overflow-y: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/mapIndex.vue b/src/pages/internetEquipment/module/mapIndex.vue
new file mode 100644
index 0000000..c00944a
--- /dev/null
+++ b/src/pages/internetEquipment/module/mapIndex.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="map-index">
+
+ </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+.map-index {
+ width: 1170px;
+ height: 396px;
+ border-radius: 15px;
+ background-color: skyblue
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
new file mode 100644
index 0000000..f0d8f92
--- /dev/null
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -0,0 +1,62 @@
+<template>
+ <div class="real-time-module">
+ <div class="title">瀹炴椂鎶撴媿棰勮</div>
+ <div class="real-time-item"
+ v-for="(item,index) in warnArr"
+ :key="index">
+ <img :src="item.image" alt="" class="warnArea">
+ <warnDescription
+ :warnDes="{code:item.code,
+ time:item.time,
+ longitude:item.longitude,
+ latitude:item.latitude,
+ warn:item.warn}"/>
+ </div>
+ </div>
+</template>
+
+<script>
+import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+export default {
+ props :{
+ warnArr:{
+ type: Array
+ }
+ },
+ components :{
+ warnDescription
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.real-time-module {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20px;
+ padding-right: 0px;
+ width: 570px;
+ height: 292px;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ overflow-y: scroll;
+
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ width: 530px;
+ text-align: left;
+ }
+
+ .real-time-item {
+ margin-right: 14px;
+ }
+ .warnArea {
+ width: 167px;
+ height: 104px;
+ border-radius: 5px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetEquipment/views/helemetEquipment.vue b/src/pages/internetEquipment/views/helemetEquipment.vue
new file mode 100644
index 0000000..31a83f4
--- /dev/null
+++ b/src/pages/internetEquipment/views/helemetEquipment.vue
@@ -0,0 +1,146 @@
+<template>
+ <div class="helmet-equipment">
+ <helemetHead />
+ <mapIndex />
+ <div class="footer">
+ <realTimeModule :warnArr="warnArr"/>
+ <elecModule :warnArr="warnArr"/>
+ <historyModule :warnArr="warnArr"/>
+ </div>
+ </div>
+</template>
+
+<script>
+import helemetHead from '@/pages/internetEquipment/components/helemetHead'
+import mapIndex from '@/pages/internetEquipment/module/mapIndex'
+import realTimeModule from '@/pages/internetEquipment/module/realTimeModule'
+import elecModule from '@/pages/internetEquipment/module/elecModule'
+import historyModule from '@/pages/internetEquipment/module/historyModule'
+export default {
+ data (){
+ return {
+ warnArr:[{
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },{
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ },
+ {
+ code:"A100640819DA3B",
+ image:"/images/settings/background.png",
+ location:"鏈濋槼绉戞妧鍥�",
+ time:"2021-09-21 12:23",
+ longitude:"23.2344",
+ latitude:"45.4455",
+ warn:"鏈湪鐢靛瓙鍥存爮鍖哄煙"
+ }]
+ }
+ },
+ components: {
+ helemetHead,
+ mapIndex,
+ realTimeModule,
+ elecModule,
+ historyModule
+ }
+
+}
+</script>
+
+<style scoped lang="scss">
+* {
+ box-sizing: border-box;
+}
+
+.helmet-equipment {
+ padding: 20px;
+ width: 100%;
+ height: 100%;
+ background: #FBFCFE;
+
+ .map-index {
+ margin: 20px 0;
+ }
+
+ .footer {
+ height: 292px;
+ display: flex;
+ justify-content: space-between;
+ color: #4F4F4F;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0