Merge pull request '邓洁: 分流器设备管理样式' (#181) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/181

src/views/device-manage/index.vue

@@ -26,6 +26,9 @@
             <el-menu-item index="3">
               <span>其他传感器</span>
             </el-menu-item>
+            <el-menu-item index="4">
+              <span>分流器</span>
+            </el-menu-item>
           </el-menu>
         </div>
         <div class="box-right" v-if="changeIndex==1">
@@ -208,6 +211,61 @@
             </div>
           </div>
         </div>
+        <div class="box-right" v-if="changeIndex==4">
+          <div class="device-title">
+            <span>分流器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <span class="units">
+              <input
+                  type="number"
+                  min="0"
+                  v-model="collectionFrequency"
+              />
+              </span>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenliuData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = true"
+                    >
+                      启动
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = false"
+                    >
+                      停止
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="isVisited=false">
+              取消
+            </div>
+            <div class="sure-btn" @click="router.back(-1)">
+              确定
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -381,6 +439,24 @@ const otherData = [
     state: false,
   }
 ]
+const fenliuData = [
+   {
+    name: '1号分流器',
+    offset: '2342',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '2号分流器',
+    offset: '2342',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '3号分流器',
+    offset: '2342',
+    thresholdValue: '2342',
+    state: false,
+  }
+]
 const handleChangeMenu = (e) => {
   console.log('切换', e)
   changeIndex.value = e
@@ -476,6 +552,9 @@ const handleChangeMenu = (e) => {
             &:nth-child(2) {
               letter-spacing: 120px;
             }
+            &:last-child{
+              letter-spacing: 40px;
+            }
           }
         }
       }

src/views/tunnel-manage/index.vue

@@ -30,11 +30,11 @@
           <div>
             <div class="left-img"></div>
             <div>
-              <div class="edit-btn" @click="handleEdit">
+              <div class="edit-btn" @click.stop="handleEdit">
                 <div class="edit-icon"></div>
                 <div>隧道编辑</div>
               </div>
-              <div class="edit-btn" @click="handleEditDevice">
+              <div class="edit-btn" @click.stop="handleEditDevice">
                 <div class="edit-icon-two"></div>
                 <div>设备管理</div>
               </div>