css

src/pages/modules/device.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="page_container">
-    <div class="t_box">
-      <el-tabs tab-position="left" v-model="activeName" @tab-click="tabClick">
-        <el-tab-pane label="自定义" name="zdy">
-          <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="(e, i) in dataList" :key="'zdy' + i">
-              <el-popover
-                placement="bottom"
-                trigger="manual"
-                :ref="`popover-${i}`">
-                <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: .1rem">
-                  <el-col :span="18"><el-input placeholder="修改名称" v-model="stationName" @focus="show" data-layout="normal"></el-input></el-col>
-                  <el-button type="success" icon="el-icon-check" size="mini" style="height: .3rem" :disabled="disabled" @click="_updateStation(e, i)"></el-button>
-                </el-row>
-                <el-row type="flex" justify="space-between">
-                  <el-button class="task_button" :class="{'task_checked': e.action_type === el.value}" v-for="el in radioOption" :key="el.value" @click="radioInput(e, i, el.value)">{{ el.label }}</el-button>
-                </el-row>
-                <div slot="reference" class="zbox point_item_i" @click="openPopover(i)"><p>{{ e.station_name }}</p></div>
-              </el-popover>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-        <el-tab-pane label="任务链" name="rwl">
-          <el-row type="flex" class="r_box">
-            <el-col class="point_item" v-for="(e, i) in linkData" :key="'rwl' + i">
-              <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.chain_name }}</p></div>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <el-row type="flex" class="result_w" justify="space-between" align="middle">
-      <el-col :span="15" class="result_items_w">
-        <el-row type="flex" class="result_items" justify="start" align="top">
+    <el-row type="flex" class="t_box" justify="space-between">
+      <el-col :span="20">
+        <div style="height: calc(100% - 1rem);overflow: hidden;">
+          <el-tabs v-model="activeName" @tab-click="tabClick" style="height: 100%;">
+            <el-tab-pane label="自定义" name="zdy">
+              <el-row type="flex" class="r_box">
+                <el-col class="point_item" v-for="(e, i) in dataList" :key="'zdy' + i">
+                  <el-popover
+                    placement="bottom"
+                    trigger="manual"
+                    :ref="`popover-${i}`">
+                    <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: .1rem">
+                      <el-col :span="18"><el-input placeholder="修改名称" v-model="stationName" @focus="show" data-layout="normal"></el-input></el-col>
+                      <el-button type="success" icon="el-icon-check" size="mini" style="height: .3rem" :disabled="disabled" @click="_updateStation(e, i)"></el-button>
+                    </el-row>
+                    <el-row type="flex" justify="space-between">
+                      <el-button class="task_button" :class="{'task_checked': e.action_type === el.value}" v-for="el in radioOption" :key="el.value" @click="radioInput(e, i, el.value)">{{ el.label }}</el-button>
+                    </el-row>
+                    <div slot="reference" class="zbox point_item_i" @click="openPopover(i)"><p>{{ e.station_name }}</p></div>
+                  </el-popover>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="任务链" name="rwl">
+              <el-row type="flex" class="r_box">
+                <el-col class="point_item" v-for="(e, i) in linkData" :key="'rwl' + i">
+                  <div class="zbox point_item_i" @click="handleLinkCheck(e)"><p>{{ e.chain_name }}</p></div>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <el-row type="flex" class="result_w" justify="start" align="top">
           <el-col class="pp_item" v-for="(e, i) in newData" :key="'new' + i">
             <el-row type="flex" align="middle">
               <div class="point_item point_checked">
@@ -48,13 +48,13 @@
           </el-col>
         </el-row>
       </el-col>
-      <el-col :span="8">
-        <el-row type="flex" justify="space-between" style="flex-wrap: wrap" >
-          <el-col v-if="activeName === 'rwl'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !chainId}" :disabled="disabled" @click="_deleteTaskChain"><p>删除任务链</p></button></el-col>
-          <el-col v-if="activeName === 'zdy'" :span="11" style="margin-bottom: .08rem"><button class="button_control" :class="{'button_control_disabled': !newData.length}" @click="newData = []"><p>清空</p></button></el-col>
-          <el-col :span="11" style="margin-bottom: .08rem"><button class="button_control" :disabled="disabled" @click="_cancelTask"><p>取消任务</p></button></el-col>
-          <el-col v-if="activeName === 'zdy'" :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_saveTask"><p>保存任务</p></button></el-col>
-          <el-col :span="11"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_sendTask"><p>发送任务</p></button></el-col>
+      <el-col :span="4" style="padding: 0 .1rem;">
+        <el-row type="flex" justify="center" style="flex-wrap: wrap;height: 100%;align-content: flex-end;">
+          <el-col v-if="activeName === 'rwl'" :span="24" class="button_box"><button class="button_control" :class="{'button_control_disabled': !chainId}" :disabled="disabled" @click="_deleteTaskChain"><p style="font-size: .28rem">删除任务链</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="24" class="button_box"><button class="button_control" :class="{'button_control_disabled': !newData.length}" @click="newData = []"><p>清空</p></button></el-col>
+          <el-col :span="24" class="button_box"><button class="button_control" :disabled="disabled" @click="_cancelTask"><p>取消任务</p></button></el-col>
+          <el-col v-if="activeName === 'zdy'" :span="24" class="button_box"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_saveTask"><p>保存任务</p></button></el-col>
+          <el-col :span="24" class="button_box"><button class="button_control" :class="{'button_control_disabled': !newData.length}" :disabled="disabled" @click="_sendTask"><p>发送任务</p></button></el-col>
         </el-row>
       </el-col>
     </el-row>
@@ -65,6 +65,7 @@
 
 <script>
 import SaveChain from './save-chain.vue'
+// import { queryStation, queryTaskChain } from '../../config/mork.js'
 import { queryStation, queryTaskChain, queryTaskChainDtl, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '../../config/getData.js'
 export default {
   name: 'ModuleDevice',
@@ -395,8 +396,7 @@ export default {
 
 <style lang="stylus" scoped>
 .t_box
-  height calc(100% - 1.1rem)
-  margin-bottom 0.1rem
+  height 100%
   background-color rgba(0, 19, 48, 70%)
   box-shadow inset 1px 1px 7px 2px #4d9bcd
   padding .1rem
@@ -446,9 +446,6 @@ export default {
   font-size .2rem
   color #fff
   line-height .4rem
-.result_items_w
-  height .8rem
-  overflow hidden
 .result_items
   flex-wrap wrap
   align-content flex-start
@@ -482,4 +479,14 @@ export default {
   border-color #409EFF
   &:first-child
     border-left-color #409EFF
+.button_box
+  height 20%
+  margin-bottom .16rem
+  text-align center
+  &:last-child
+    margin-bottom 0
+  .button_control
+    height 100%
+    p
+      font-size .3rem
 </style>