暂存

ZZJ

2021-10-20 a035542706850414cf96590385019e029861b5c1

暂存

 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": "请求处理成功",

 src/pages/internetData/components/screening.vue

New file
@@ -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>

 src/pages/internetData/components/tabSingle.vue

New file
@@ -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>

 src/pages/internetData/index/index.vue

New file
@@ -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>

 src/pages/internetData/index/main.ts

New file
@@ -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)
})

 src/pages/internetData/views/helemtTable.vue

New file
@@ -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">&#xe8a0;</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>

 src/pages/internetData/views/helmet.vue

New file
@@ -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>