提交： 项目详情页 布局调整 优化

public/index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
 
 
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_xttpv6d8dy.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_51mhr4b9ys6.css">
 
     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8"></script>
     <script src="<%= BASE_URL %>js/config.js"></script>

src/config/env.js

@@ -10,7 +10,7 @@ let prodApi = window.dasConfig.ip || '/prod-api';
 let wsProtocol = 'ws://';
 let iotWebSocketAlarmBaseUrl = ''
 let bigWebSocketUrl = ''
-let port = '8899'
+let port = '32024'
 let webSocketProjectGatewayUrl = ''
 let hrefHostUrl = '';
 
@@ -28,7 +28,7 @@ let httpProtocol = 'http';
 
 if (env.NODE_ENV == 'development') {
   flowIotUrl = 'http://127.0.0.1:1880/#flow/'
-  hrefHost = "192.168.10.241"
+  hrefHost = "power-tcore.histron.cn"
 } else if(env.NODE_ENV == 'production') {
   // if (hrefHost.indexOf('.gkiiot.com') >= 0) {
   //   iotHost = 'iot.gkiiot.com'

src/views/profile/DeviceDetailsView/deviceSelectNav.vue

@@ -1,29 +1,128 @@
 <template>
   <div class="device-select-nav">
     <div class="layout-select-wrap" v-if="childDeviceList.length > 0">
-      <el-button
-        plain
-        size="mini"
+      <!-- <div
+        class="but"
         :disabled="tSelectLabelList.length <= 0"
         @click="handleChildStatus('true')"
-        >合闸</el-button
       >
+        <i class="iconfont iconT icon-c"></i>
+
+        <span class="but-title">合闸</span>
+      </div>
+
+      <div
+        class="but"
+        :disabled="tSelectLabelList.length <= 0"
+        @click="handleChildStatus('true')"
+      >
+        <i class="iconfont iconF icon-c"></i>
+
+        <span class="but-title">分闸</span>
+      </div>
+
+      <div class="but" @click="handleAllStatus('true')">
+        <i class="iconfont iconhezha icon-c"></i>
+
+        <span class="but-title">一键合闸</span>
+      </div>
+
+      <div class="but" @click="handleAllStatus('false')">
+        <i class="iconfont iconfenzha icon-c"></i>
+
+        <span class="but-title">一键分闸</span>
+      </div>
+
+      <div class="but" @click="handleAllSelect('true')">
+        <i class="iconfont iconquanxuan icon-c"></i>
+        <span class="but-title">{{
+          childDeviceList.length > tSelectList.length ? "全选" : "取消"
+        }}</span>
+      </div> -->
+
       <el-button
         plain
         size="mini"
+        type="info"
+        :disabled="tSelectLabelList.length <= 0"
+        @click="handleChildStatus('true')"
+      >
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <icon class="iconfont iconT but-icon" />
+          合闸
+        </div>
+      </el-button>
+      <el-button
+        plain
+        size="mini"
+        type="info"
         :disabled="tSelectLabelList.length <= 0"
         @click="handleChildStatus('false')"
-        >分闸</el-button
       >
-      <el-button plain size="mini" @click="handleAllStatus('true')"
-        >一键合闸</el-button
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
         >
-      <el-button plain size="mini" @click="handleAllStatus('false')"
-        >一键分闸</el-button
+          <icon class="iconfont iconF but-icon" />
+          分闸
+        </div>
+      </el-button>
+      <el-button plain type="info" size="mini" @click="handleAllStatus('true')">
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
         >
-      <el-button plain size="mini" @click="handleAllSelect()"
-        >{{ childDeviceList.length > tSelectList.length ? '全选' : '取消' }}</el-button
+          <icon class="iconfont iconhezha but-icon" />
+          一键合闸
+        </div>
+      </el-button>
+      <el-button
+        plain
+        type="info"
+        size="mini"
+        @click="handleAllStatus('false')"
       >
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <icon class="iconfont iconfenzha but-icon" />
+          一键分闸
+        </div></el-button
+      >
+      <el-button plain size="mini" type="info" @click="handleAllSelect()">
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <icon class="iconfont iconquanxuan but-icon" />
+          {{ childDeviceList.length > tSelectList.length ? "全选" : "取消" }}
+        </div>
+      </el-button>
+
       <span class="title-span">已选择设备：</span>
       <span v-if="tSelectLabelList.length <= 0">当前未选择设备</span>
       <el-tag
@@ -41,7 +140,8 @@
     </div>
     <div class="layout-device-list">
       <el-card
-        :body-style="{ padding: '0px', width: '220px' }"
+        @click.native="viewDeviceChange(deviceInfo.deviceId)"
+        :body-style="{ padding: '0px', width: '220px' , 'boxShadow': '0 1px 5px 0 #2530341a' }"
         :style="
           deviceInfo.deviceId === checkobxDeviceId
             ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
@@ -55,25 +155,30 @@
               width: 100%;
               display: flex;
               justify-content: flex-end;
+              padding: 0 10px;
               padding-right: 10px;
               padding-top: 5px;
+              justify-content: space-between;
+              align-items: baseline;
             "
           >
-            <!-- <div
-              style="width: 60px; display: flex; justify-content: center"
-              v-if="deviceInfo.stype === 'LAN' || deviceInfo.stype === 'lan'"
+            <span
+              class="dev-info-title"
+              style="
+                font-weight: 400;
+                height: 30px;
+                font-size: 16px;
+                line-height: 30px;
+                white-space: nowrap;
+                display: inline-block;
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+              :title="deviceInfo.deviceName"
+              >{{ deviceInfo.deviceName }}</span
             >
-              <i
-                :class="`iconfont ${statusFormat(deviceInfo.stype)}`"
-                style="color: black; font-size: 20px"
-              ></i>
-            </div> -->
             <div style="width: 60px; display: flex; justify-content: center">
-              <!-- <i
-                :class="`iconfont ${statusFormat(deviceInfo.stype)}`"
-                style="color: black; font-size: 20px"
-                v-if="deviceInfo.stype === 'WIFI' || deviceInfo.stype === 'wifi'"
-              ></i> -->
               <i
                 :class="signalType(deviceInfo.stype)"
                 style="color: black; font-size: 20px"
@@ -83,41 +188,28 @@
                 :intensityNumber="deviceInfo.signal"
               ></signal-intensity>
             </div>
-            <i
+            <!-- <i
               v-if="deviceInfo.deviceId === checkobxDeviceId"
               class="el-icon-s-claim"
               style="font-size: 25px; color: #1890ff"
-            ></i>
+            ></i> -->
           </div>
           <div class="dev-info">
-            <span class="dev-info-title" :title="deviceInfo.deviceName">{{
-              deviceInfo.deviceName
+            <div
+              :class="
+                deviceInfo['deviceState'] == 'ONLINE'
+                  ? 'dev-info-state'
+                  : 'dev-info-state off-line'
+              "
+            >
+              <icon
+                v-if="deviceInfo['deviceState'] == 'ONLINE'"
+                class="iconfont iconSYS_STA_1"
+              />
+              <icon v-else class="iconfont iconlixian" />
+              <span style="margin-left: 1px">{{
+                deviceInfo["deviceState"] == "ONLINE" ? "在线" : "离线"
               }}</span>
-            <div class="dev-info-state">
-              <el-tag type="success" v-if="deviceInfo.deviceState === 'ONLINE'"
-                >在线</el-tag
-              >
-              <el-tag
-                type="danger"
-                v-else-if="deviceInfo.deviceState === 'OFFLINE'"
-                >离线</el-tag
-              >
-              <el-tag
-                type="danger"
-                v-else-if="deviceInfo.deviceState === 'OUTLINE'"
-                >脱线</el-tag
-              >
-              <el-tag
-                type="info"
-                v-else-if="deviceInfo.deviceState === 'UNACTIVE'"
-                >未激活</el-tag
-              >
-              <el-button
-                type="primary"
-                size="mini"
-                @click="viewDeviceChange(deviceInfo.deviceId)"
-                >查看</el-button
-              >
             </div>
           </div>
         </div>
@@ -125,10 +217,11 @@
 
       <el-card
         :body-style="{ padding: '0px', width: '220px' }"
+        @click.native="viewDeviceChange(item.deviceId)"
         :style="
           item.deviceId === checkobxDeviceId
-            ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
-            : ' margin: 5px; width: 220px; flex-shrink: 0;'
+            ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
+            : ' margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
         "
         v-for="item in childDeviceList"
         :key="item.deviceId"
@@ -139,14 +232,31 @@
               height: 25px;
               width: 100%;
               display: flex;
-              justify-content: flex-end;
+              justify-content: space-between;
+              padding: 0 10px;
               padding-right: 10px;
-              padding-top: 5px;
+              padding-top: 15px;
+              align-items: center;
             "
+          >
+            <span
+              class="dev-info-title"
+              style="
+                font-weight: 400;
+                height: 30px;
+                font-size: 16px;
+                line-height: 30px;
+                white-space: nowrap;
+                display: inline-block;
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+              :title="item.deviceName"
+              >{{ item.deviceName }}</span
             >
             <div
-              @click="handleCheckbox(item)"
-              :style="item.deviceId === checkobxDeviceId ? 'right: 159px;' : ''"
+              @click.stop="handleCheckbox(item)"
               :class="
                 tSelectList.indexOf(item.deviceId) >= 0
                   ? 'checkbox-i selected-c'
@@ -158,87 +268,48 @@
                 class="el-icon-check"
               ></i>
             </div>
-            <!-- <div style="
+          </div>
+          <div class="dev-info">
+            <div
+              :class="
+                deviceInfo['deviceState'] == 'ONLINE'
+                  ? 'dev-info-state'
+                  : 'dev-info-state off-line'
+              "
+              style="width: 60px"
+            >
+              <icon
+                v-if="deviceInfo['deviceState'] == 'ONLINE'"
+                class="iconfont iconSYS_STA_1"
+              />
+              <icon v-else class="iconfont iconlixian" />
+              <span style="margin-left: 1px; margin-top: 1px">{{
+                deviceInfo["deviceState"] == "ONLINE" ? "在线" : "离线"
+              }}</span>
+            </div>
+            <div
+              style="
                 width: 60px;
                 display: flex;
                 justify-content: center;
-          ">
-            <i :class="signalType(item.stype)" style="color: black; font-size: 20px;" ></i>
-            <signal-intensity :intensityNumber="item.signal" ></signal-intensity>
-          </div> -->
-            <i
-              v-if="item.deviceId === checkobxDeviceId"
-              class="el-icon-s-claim"
-              style="font-size: 25px; color: #1890ff"
-            ></i>
-          </div>
-          <div class="dev-info">
-            <span class="dev-info-title" :title="item.deviceName">{{
-              item.deviceName
-            }}</span>
-            <div
-              class="dev-info-state"
-              v-show="item.deviceId !== checkobxDeviceId"
+                align-items: center;
+                font-size: 14px;
+              "
             >
-              <el-tag type="success" v-if="item.deviceState === 'ONLINE'"
-                >在线</el-tag
-              >
-              <el-tag type="danger" v-else-if="item.deviceState === 'OFFLINE'"
-                >离线</el-tag
-              >
-              <el-tag type="danger" v-else-if="item.deviceState === 'OUTLINE'"
-                >脱线</el-tag
-              >
-              <el-tag type="info" v-else-if="item.deviceState === 'UNACTIVE'"
-                >未激活</el-tag
-              >
-              <el-button
-                type="primary"
-                size="mini"
-                @click="viewDeviceChange(item.deviceId)"
-                >查看</el-button
-              >
-            </div>
-            <div
-              class="dev-info-state"
-              v-show="item.deviceId === checkobxDeviceId"
-            >
-              <el-switch
-                size="mini"
-                v-model="item.switch"
-                active-text="开启"
-                disabled
-                inactive-text="关闭"
-                active-value="1"
-                inactive-value="0"
-                active-color="#13ce66"
-                inactive-color="#dcdfe6"
-                class="switch-wrap"
-              >
-              </el-switch>
-              <el-button
-                size="mini"
-                v-if="item.switch === '1'"
-                :disabled="item.deviceId !== checkobxDeviceId"
-                @click="submitChildStatus('false', item)"
-                type="success"
-                >关闭</el-button
-              >
-              <el-button
-                size="mini"
+              <icon
+                v-if="item['switch'] == '1'"
+                class="iconfont iconT"
+                style="color: #76bbff; font-size: 16px"
+              />
+              <icon
                 v-else
-                :disabled="item.deviceId !== checkobxDeviceId"
-                @click="submitChildStatus('true', item)"
-                type="danger"
-                >开启</el-button
-              >
+                class="iconfont iconF"
+                style="font-size: 16px; color: #878686"
+              />
 
-              <el-button
-                type="primary"
-                size="mini"
-                @click="viewDeviceChange(item.deviceId)"
-                >查看</el-button
-              >
+              <span style="margin-left: 1px; margin-top: 1px; color: #878686">{{
+                item["switch"] == "1" ? "合闸" : "分闸"
+              }}</span>
             </div>
           </div>
         </div>
@@ -261,7 +332,6 @@ import {
 } from "@/config/env";
 import SignalIntensity from "./signalIntensity";
 import EWebSocket from "@/components/EWebSocket/src/basic/index";
-import objectAssign from "object-assign";
 export default {
   name: "DeviceSelectNav",
   components: {
@@ -345,7 +415,7 @@ export default {
       },${str}`;
     },
     wsMessage(e) {
-      if (e['deviceState']) {
+      if (e["deviceState"] || (e["switch"] !== null && e["switch"] !== undefined)) {
         this.handleDeviceInfo(e);
       }
     },
@@ -395,6 +465,7 @@ export default {
 
     // 点击子设备 线路开关
     handleChildStatus(type) {
+      // if (this.tSelectLabelList.legnth > 0) {
       this.$prompt("请输入登录密码", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -429,6 +500,7 @@ export default {
           this.msgSuccess("修改成功");
         });
       });
+      // }
     },
     selectDevClose(e) {
       console.log(e);
@@ -631,11 +703,11 @@ export default {
 
 <style lang="scss">
 .device-select-nav {
-  min-height: 180px;
+  min-height: 130px;
   width: 100%;
   display: flex;
   overflow-y: auto;
-  background-color: #e4eaf3;
+  background-color: #e4eaf300;
   flex-wrap: wrap;
   align-items: flex-start;
   .layout-select-wrap {
@@ -645,19 +717,62 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     padding-left: 5px;
-    border: 1px solid #1890ff;
-    margin: 10px 5px;
+    // border: 1px solid #1890ff;
+    margin: 0 5px 5px 0;
     border-radius: 5px;
-    background-color: #1890ff17;
-    margin-bottom: 5px;
+    background-color: #1890ff00;
     .title-span {
       margin-left: 10px;
     }
+
+    .but {
+      width: 90px;
+      height: 30px;
+      background: #f4f5f7;
+      border-radius: 5px;
+      color: #6b778c;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      margin-right: 10px;
+      .icon-c {
+        font-size: 18px;
+        margin-top: 2px;
+      }
+      .but-title {
+        font-size: 12px;
+        font-family: "Source Han Sans CN";
+        font-weight: 600;
+        margin-left: 5px;
+        cursor: default;
+      }
+    }
+    .but:hover {
+      background: #1890ff;
+      color: #fff;
+    }
+    .el-button {
+      border: 0px;
+      color: #6b778c;
+      font-weight: 600;
+      background: #e6e6e6d9;
+    }
+    .el-button--info.is-plain.is-disabled {
+      color: #bcbec2;
+    }
+    .but-icon {
+      margin-right: 5px;
+      font-size: 16px;
+    }
+    .el-button:hover {
+      background: #1890ff !important;
+      color: #fff;
+    }
   }
   .layout-device-list {
     width: 100%;
     display: flex;
-    height: 130px;
+    height: 90px;
     overflow: auto;
   }
 
@@ -674,8 +789,8 @@ export default {
       padding: 10px;
       display: flex;
       flex-wrap: wrap;
-      justify-content: flex-end;
       width: 100%;
+      justify-content: space-between;
       .dev-info-title {
         display: block;
         width: 100%;
@@ -690,13 +805,18 @@ export default {
         text-overflow: ellipsis;
       }
       .dev-info-state {
-        width: 100%;
+        width: 60px;
         height: 50px;
         justify-content: center;
         display: flex;
         align-items: center;
-        font-size: 16px;
-        justify-content: space-between;
+        font-size: 14px;
+
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #00c805;
+        justify-content: start;
 
         /* switch按钮样式 */
         .switch-wrap .el-switch__label {
@@ -731,6 +851,9 @@ export default {
           margin: 0;
         }
       }
+      .off-line {
+        color: #da2710;
+      }
     }
   }
   .nav-c-dev {
@@ -749,7 +872,7 @@ export default {
       height: 20px;
       border-radius: 3px;
       position: relative;
-      right: 184px;
+      // right: 184px;
       font-size: 17px;
       display: flex;
       align-items: center;
@@ -764,8 +887,9 @@ export default {
       padding: 10px;
       display: flex;
       flex-wrap: wrap;
-      justify-content: flex-end;
+      justify-content: space-between;
       width: 100%;
+
       .dev-info-title {
         display: block;
         width: 100%;
@@ -780,13 +904,18 @@ export default {
         text-overflow: ellipsis;
       }
       .dev-info-state {
-        width: 100%;
+        width: 60px;
         height: 50px;
         justify-content: center;
         display: flex;
         align-items: center;
-        font-size: 16px;
-        justify-content: space-between;
+
+        justify-content: flex-start;
+
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #00c805;
 
         /* switch按钮样式 */
         .switch-wrap .el-switch__label {
@@ -821,6 +950,9 @@ export default {
           margin: 0;
         }
       }
+      .off-line {
+        color: #da2710;
+      }
     }
   }
 }

src/views/profile/DeviceDetailsView/index.vue

@@ -35,7 +35,6 @@
       <el-tabs
         v-model="activeName"
         :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
-        type="border-card"
       >
         <el-tab-pane label="运行状态" name="runingState">
           <div class="tabs-body protocol-wrap">
@@ -358,7 +357,7 @@ export default {
       width: 25px;
       height: 20px;
       padding: 0;
-      background: #f26a6a;
+      background: #0d8afd;
       color: #fff;
       font-size: 16px;
       border-radius: 5px;
@@ -376,7 +375,7 @@ export default {
     position: relative;
     box-sizing: border-box;
     .el-tabs__content {
-      height: calc(100vh - 381px);
+      height: calc(100vh - 321px);
       overflow: auto;
     }
     .el-tabs__header {
@@ -393,8 +392,8 @@ export default {
     .el-tabs__nav-scroll {
       height: 65px;
       padding-top: 25px;
-      padding-left: 15px;
-      background: #e4eaf3;
+      padding-left: 5px;
+      // background: #e4eaf3;
     }
     .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
       background: #fff;

src/views/profile/DeviceRunStarts/index.vue

@@ -348,6 +348,7 @@ export default {
       border: 1px solid #b7b4b4;
       margin-left: -1px;
       margin-top: -1px;
+      border-color:#e0e0e0;
       .title-top {
         height: 30px;
         display: flex;