From a035542706850414cf96590385019e029861b5c1 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 20 十月 2021 16:46:27 +0800
Subject: [PATCH] 暂存
---
src/pages/internetData/components/tabSingle.vue | 57 +++++++
src/pages/internetData/views/helmet.vue | 38 ++++
src/pages/internetData/index/main.ts | 12 +
src/pages/internetData/components/screening.vue | 118 ++++++++++++++
src/pages/internetData/index/index.vue | 86 ++++++++++
src/pages/internetData/views/helemtTable.vue | 105 +++++++++++++
public/apps.json | 23 ++
7 files changed, 439 insertions(+), 0 deletions(-)
diff --git a/public/apps.json b/public/apps.json
index 6d86fb1..4c34d51 100644
--- a/public/apps.json
+++ b/public/apps.json
@@ -622,6 +622,29 @@
"installed": true,
"isUpgrade": false,
"progressMsg": ""
+ },
+ {
+ "id": "fa5674ee-70cf-4e22-8a06-c17426fb777",
+ "name": "浜掕仈缃戞暟鎹鐞�",
+ "package": "internetData",
+ "type": "2",
+ "url": "/view/internetData/",
+ "title": "浜掕仈缃戞暟鎹鐞�",
+ "width": 1440,
+ "height": 860,
+ "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/src/pages/internetData/components/screening.vue b/src/pages/internetData/components/screening.vue
new file mode 100644
index 0000000..933f38e
--- /dev/null
+++ b/src/pages/internetData/components/screening.vue
@@ -0,0 +1,118 @@
+<template>
+<div class="screening">
+
+ <div class="title">璁惧缂栫爜 : </div>
+ <div class="input_code">
+ <el-input
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="code"
+ clearable>
+ </el-input>
+ </div>
+
+
+ <div class="title electric">鐢甸噺鍖洪棿 : </div>
+
+ <div class="input_elec">
+ <el-input
+ placeholder="璇疯緭鍏�"
+ v-model="lowerElec"
+ clearable>
+ </el-input>
+ </div>
+ <div class="font-weight: 700;font-size: 25px;">-</div>
+ <div class="input_elec">
+ <el-input
+ placeholder="璇疯緭鍏�"
+ v-model="UpperElec"
+ clearable>
+ </el-input>
+ </div>
+
+ <div class="save">鏌ヨ</div>
+ <div class="reset">娓呯┖</div>
+
+
+</div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ code:'',
+ lowerElec: '',
+ UpperElec: ''
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.screening {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ height: 70px;
+ border-radius: 15px;
+ background-color: #F2F2F7;
+
+ .title {
+ font-size: 14px;
+ color: #4F4F4F;
+ }
+
+ .input_code {
+ margin:0 20px 0 5px ;
+ width: 250px;
+ }
+
+ .input_elec {
+ margin:0 5px ;
+ width: 130px;
+ }
+
+ .save {
+ margin-left: 22%;
+ margin-right: 10px;
+ width: 90px;
+ height: 40px;
+ border-radius: 10px;
+ background: #fff;
+ color: #333333;
+ font-size: 14px;
+ line-height: 40px;
+ cursor: pointer;
+
+ &:hover {
+ background: #11AA66;
+ color: #fff;
+ }
+ }
+
+ .reset {
+ width: 90px;
+ height: 40px;
+ background: #fff;
+ border-radius: 10px;
+ color: #333333;
+ font-size: 14px;
+ line-height: 40px;
+ cursor: pointer;
+
+ &:hover {
+ background: #11AA66;
+ color: #fff;
+ }
+ }
+
+ .el-input ::v-deep input {
+ border-radius: 10px;
+
+ &:focus {
+ border: 1px solid #11AA66;
+ }
+ }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetData/components/tabSingle.vue b/src/pages/internetData/components/tabSingle.vue
new file mode 100644
index 0000000..5f8a951
--- /dev/null
+++ b/src/pages/internetData/components/tabSingle.vue
@@ -0,0 +1,57 @@
+<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 {
+ font-size: 16px;
+ }
+
+ &.active {
+ background-color: #11AA66;
+ color: #fff;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetData/index/index.vue b/src/pages/internetData/index/index.vue
new file mode 100644
index 0000000..660d91a
--- /dev/null
+++ b/src/pages/internetData/index/index.vue
@@ -0,0 +1,86 @@
+<template>
+ <div class="internet_data">
+
+ <!-- 宸︿晶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">
+
+ <!-- 鏅鸿兘瀹夊叏甯� -->
+ <helmet
+ v-if="activeTab === 0"
+ />
+
+ </div>
+ </div>
+</template>
+
+<script>
+import tabSingle from "../components/tabSingle.vue";
+import helmet from '../views/helmet.vue'
+export default {
+ data (){
+ return {
+ // 宸︿晶tab鏁版嵁
+ tabArr: [
+ {icon: "\ue77f", title: "鏅鸿兘瀹夊叏甯�"},
+ {icon: "\ue764", title: "娓╁害浼犳劅鍣�"},
+ {icon: "\ue769", title: "鍏朵粬浼犳劅鍣�"}
+ ],
+ activeTab: 0
+
+ //
+ }
+ },
+
+ components: {
+ tabSingle,
+ helmet
+ },
+
+ methods: {
+ toggleActive(index) {
+ this.activeTab = index
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+* {
+box-sizing: border-box;
+}
+
+.internet_data {
+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 {
+ height: 100%;
+ flex: 1;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetData/index/main.ts b/src/pages/internetData/index/main.ts
new file mode 100644
index 0000000..3afd407
--- /dev/null
+++ b/src/pages/internetData/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/internetData/views/helemtTable.vue b/src/pages/internetData/views/helemtTable.vue
new file mode 100644
index 0000000..11cb89c
--- /dev/null
+++ b/src/pages/internetData/views/helemtTable.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="helemtTable">
+<el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ label="搴忓彿"
+ 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">
+ <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>
+ </div>
+ </div>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="ip"
+ label="IP鍦板潃">
+ </el-table-column>
+
+ <el-table-column
+ prop="mac"
+ label="mac鍦板潃"
+ width="150">
+ </el-table-column>
+
+ <el-table-column
+ prop="longitude"
+ label="缁忓害">
+ </el-table-column>
+
+ <el-table-column
+ prop="latitude"
+ label="绾害">
+ </el-table-column>
+
+ <el-table-column
+ prop="latitude"
+ label="鍦板潃">
+ </el-table-column>
+
+ <el-table-column
+ prop="height"
+ label="楂樺害">
+ </el-table-column>
+
+ <el-table-column
+ prop="positon"
+ label="瀹氫綅鐘舵��">
+ </el-table-column>
+
+ <el-table-column
+ prop="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>
+</div>
+
+</template>
+
+<script>
+export default {
+ data (){
+ return {
+ 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:"鍗曞悜瀹氫綅" },
+ ]
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.helemtTable {
+ ::v-deep .el-table {
+ font-size: 12px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/internetData/views/helmet.vue b/src/pages/internetData/views/helmet.vue
new file mode 100644
index 0000000..19bfac3
--- /dev/null
+++ b/src/pages/internetData/views/helmet.vue
@@ -0,0 +1,38 @@
+<template>
+ <div class="data_helmet">
+ <!-- 绛涢�夋 -->
+ <screening />
+
+ <!-- 琛ㄦ牸 -->
+ <helemtTable />
+
+</div>
+</template>
+
+<script>
+import screening from '@/pages/internetData/components/screening'
+import helemtTable from '@/pages/internetData/views/helemtTable'
+export default {
+ data (){
+ return {
+
+ }
+ },
+ components: {
+ screening,
+ helemtTable
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.data_helmet {
+ padding: 15px 20px 20px 20px;
+ height: 100%;
+ background-color: rgb(251, 252, 254);
+
+ .helemtTable {
+ height: 710px;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0