提交右侧往左

src/components/icss/NoiseTemplate.vue

@@ -38,6 +38,7 @@ export default {
       dataPub: {},      //公用组件传的值都在这
     }
   },
+  
   methods: {
     back() { this.$router.go(-1) },
     changeVal(val) {    //子组件数据改变传递到父组件

src/components/icss/PubTagGroup.vue

@@ -175,8 +175,8 @@ export default {
         { name: '血压类型', key: '15' },
       ],
       form: {
-        region1: '',    //归属
-        region2: '',     //填写单类型
+        region1: '3',    //归属
+        region2: '2',     //填写单类型
         region3: '',      //系统名称
         region4: '',      //界面名称
         region5: '',      //选项之间的链接
@@ -244,6 +244,9 @@ export default {
   mounted() {
     this.$emit('submitForm', 'groups', false);
     this.getDropList();
+    //方便调试
+    this.searchTagList()
+    this.$emit('changeVal', this.form, false)
   },
   watch: {
     newSex(nextVal, prevVal) {
@@ -273,7 +276,7 @@ export default {
       let region1 = this.form.region1,region2 = this.form.region2;
       let param = {
         "type": region1,
-        "tagType": region2 == 2?[1]:[],
+        // "tagType": region2 == 2?[1]:[],
         "controlType":region2 == 2?[1,2]:[],
       }
       api.searchTagList(param).then((res) => {
@@ -284,7 +287,10 @@ export default {
     },
     validateSystomName(name,callback) {
       if(this.form.region3.trim() == ''){ return }
-      let param = {"existName": this.form.region3,"type": this.form.region1}
+      let param = {
+        "existName": this.form.region3,
+        "type": this.form.region1
+      }
       api.validateSystomName(param).then((res) => {
         if (res.data.code === '0') {
           if(res.data.data && res.data.data.length != 0){

src/components/icss/PubTagPartDetail.vue

@@ -34,27 +34,43 @@
           class="onlyTop pubLiStyle"
           :class="selectArr[0]?'activeBgc':null"
           @click="selectPart(0)"
+          v-if="choose == 'single'"
         >
           <template v-for="item in poolDetailList[0]">
-            <span class="hzx" v-for="part in item.questionDetailList" :key="part.id">{{part.name}}</span>
+            <span class="hzx ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">{{part.name}}</span>
           </template>
         </div>
+        <div
+          class="onlyTop pubLiStyle"
+          :class="selectArr[0]?'activeBgc':null"
+          @click="selectPart(0)"
+          v-else
+        >
+          <span class="hzx ellipsis" v-for="item in poolDetailList[0]" :title="'[ '+item.name+' ]'" v-show="choose == 'multiple'" :key="item.id">{{item.name}}</span>
+        </div>
         <div class="onlyBottom pubList">
           <ul class="clearfix">
             <li v-for="n in 5"
               :key="n + 'part'"
-              class="onlyBottomPart"
+              class="onlyBottomPart "
               :class="selectArr[n]?'activeBgc':null"
               :style="{borderRight:n==5?'0':''}"
               @click="selectPart(n)"
             >
-              <ul>
+              <ul v-if="choose == 'single'">
                 <template v-for="item in poolDetailList[n]">
-                  <li class="partDetail" v-for="part in item.questionDetailList" :key="part.id">
+                  <li class="partDetail ellipsis" v-for="part in item.questionDetailList" :title="'[ '+item.name+' ]'" :key="part.id">
                     {{part.name}}
                   </li>
                 </template>
               </ul>
+              <ul v-else>
+                <template>
+                  <li class="partDetail ellipsis" v-for="item in poolDetailList[n]" :style="getStyleR(item.id)?styleR:null" :title="'[ '+item.name+' ]'" :key="item.id" @click="selectTagOne($event,item.id,n)">
+                    [ {{item.name}} ]
+                  </li>
+                </template>
+              </ul>
             </li>
           </ul>
         </div>
@@ -71,7 +87,6 @@
               </p>
             </template>
           </li>
-         
         </ul>
       </div>
     </div>
@@ -97,28 +112,27 @@ export default {
       type: String
     },
     choose: {
-      default: 'single',      //multiple多��
+      default: 'multiple',      //multiple 多选 single 单��
       type: String
     },
   },
   data() {
     return {
-      currentDetail: {},     //当前点击的标签对应的展开数据
-      poolDetailList: [     //默认6个部分
-        [], [], [], [], [], []
-      ],
+      currentDetail: [],     //当前点击的标签对应的展开数据
+      poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
+      poolDetailListTips: [[],[],[],[],[],[]],     //6个部分对应的提示
       poolDetailListAll:[],    //默认6个部分转化为一维数组
-      activePart: '-1',     //选中part第几个
+      activePart: '-1',        //选中part第几个
+      activePartSon:'-1',      //选中第几个part中的元素了
       selectArr: [false, false, false, false, false, false],   //右侧选中part状态
-      select: '',              //右侧选中的项
       
-      styles:{
-        background:'#eae7e7'
-      },                       //选中单条样式
+      styles:{background:'#eae7e7'},                       //选中单条样式
+      styleR:{color:'red !important'},
       searchVal: '',           //搜索值
       currentPool: [],         //标签池数据
       currentLis:[],           //选中单条ID组合（多选）
       notIds:[],               //去重IDs
+      multipleItem:[],         //右侧选中的单条标签
     }
   },
   watch: {
@@ -129,28 +143,113 @@ export default {
     },
     searchVal(newVal, preVal){
       if(newVal.trim() == ''){
-        this.searchTagList()
+        this.searchTagList();
       }else if(newVal.trim() != preVal.trim()){
-        this.searchTagList()
+        this.searchTagList();
       }
     }
   },
   methods: {
+    showTips(n){
+      let arr = this.poolDetailList[n],tmpControlType=[];
+      arr.map((item)=>{
+        if(utils.filterArr(this.tmpControlType,item.controlType,2)){
+          return
+        }else{
+          tmpControlType.push(item.controlType)
+        }
+      })
+      console.log(tmpControlType)
+      return tmpControlType;
+    },
+    selectTagOne(e,id,n){
+      e.stopPropagation()
+      this.activePartSon = n
+      this.selectArr = [false, false, false, false, false, false]
+      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+      if(utils.filterArr(this.multipleItem,id,2)){
+        let tmpArr = utils.filterArr(this.multipleItem,id,1);
+        this.multipleItem = tmpArr;
+      }else{
+        let tmpArr = this.multipleItem;
+        tmpArr.push(id)
+        this.multipleItem = tmpArr
+      }
+    },
     toRightPool(){
-
+      if(this.currentLis.length == 0){
+        this.$message({
+          showClose: true,
+          message: '请选择标签池标签',
+          type: 'warning'
+        });
+        return;
+      }
+      if(this.choose == 'multiple'){
+        this.getRightListDes();
+      }
+    },
+    toLeftPool(){      //往左返回数据
+      if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0){
+        let tmparr = this.poolDetailList;
+        tmparr[this.activePart] = []
+        this.poolDetailList = tmparr;
+        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+        this.searchTagList();
+        this.currentLis = [];
+      }else if((this.choose == 'multiple') && (utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.activePart].length > 0) || (this.multipleItem.length > 0)){
+        if(this.activePart != -1){
+          let tmparr = this.poolDetailList;
+          tmparr[this.activePart] = []
+          this.poolDetailList = tmparr;
+          this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+          this.searchTagList();
+          this.currentLis = [];
+        }else{
+          let tmparr = [],tmpArr = this.poolDetailList[this.activePartSon],tmpArrR = [];
+          console.log(tmpArr)
+          this.multipleItem.map((id)=>{
+            this.poolDetailListAll = utils.filterArr(this.poolDetailListAll,id,1,1)
+            this.multipleItem = []
+            tmpArr = utils.filterArr(tmpArr,id,1,1)
+          })
+          this.poolDetailList[this.activePartSon] = tmpArr
+          this.searchTagList();
+          this.currentLis = [];
+        }
+      }
     },
-    toLeftPool(){
+    getPoolDetailListTips(list){
+      let poolDetailListTips = this.poolDetailListTips;
+      // list.map((item,index)=>{
+      //   (item.length > 0) && item.map((part,idx)=>{
+      //     if(utils.filterArr(poolDetailListTips[index],part.id,2)){
+
+      //     }
+      //   })
+      // })
+      for(let i = 0;i < list.length;i++){
+        if(item.length > 0){
+          for(let j = 0;j < list[i].length;j++){
+            if(utils.filterArr(poolDetailListTips[index],part.id,2)){
 
+            }
+          }
+        }
+      }
     },
     getStyle(id){       //左侧选中状态
       return utils.filterArr(this.currentLis,id,2)
     },
+    getStyleR(id){       //右侧选中状态
+      return utils.filterArr(this.multipleItem,id,2)
+    },
     searchTagList() {
       let ids = [];
       this.poolDetailListAll.map((value)=>{
         ids.push(value.id)
-        this.notIds = ids;
       })
+      this.notIds = ids;
       let param = {
         "tagName": this.searchVal || '',
         "type": this.type,
@@ -165,6 +264,7 @@ export default {
       })
     },
     selectPart(idx) {
+      this.multipleItem = []   
       let tmpFst1 = this.selectArr[0],
         tmpFst2 = this.selectArr[1],
         tmpFst3 = this.selectArr[2],
@@ -217,42 +317,68 @@ export default {
         let tmpIds = [];
         tmpIds.push(id);
         this.currentLis = tmpIds;
+        this.getRightListDes();
       }else{                                //多选
-        // let tmpIds = this.currentLis;
-        // if(utils.filterArr(tmpIds,id,2)){
-        //   return;
-        // }else{
-        //   tmpIds.push(id);
-        // }
-        // this.currentLis = tmpIds;
+        let tmpIds = this.currentLis;
+        if(utils.filterArr(tmpIds,id,2)){
+          tmpIds = utils.filterArr(tmpIds,id,1)
+        }else{
+          tmpIds.push(id);
+        }
+        this.currentLis = tmpIds;
       }
-
+    },
+    getRightListDes(){
+      let idStr = this.currentLis.join(',');
       let param = {
         // "age": 0,
-        "ids": id,
+        "ids": idStr,
         // "sexType": 3
       }
       api.detailsTagList(param).then((res) => {        //右侧展开内容
         if (res.data.code === '0') {
-          const currentDetail = res.data.data[id];
-          this.currentDetail = currentDetail;
-          let num = 0;
           if(this.choose == 'single'){              //判断是单选
+            let num = 0,tmpArr = [];
+            tmpArr.push(res.data.data[idStr]);
             this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
               if(flg){    //有选中
-                let tmp = [],ids = [];
-                tmp.push(currentDetail);
-                this.poolDetailList[idx] = tmp;
+                let ids = [];
+                this.poolDetailList[idx] = tmpArr;
                 this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
                 this.searchTagList();
               }else{      //没选中,按順序第二个开始添加
                 ++num;
                 if(num == 6){
                   for(let i = 1;i < this.poolDetailList.length;i++){
-                    let tmp = [],ids = [];
+                    let ids = [];
+                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
+                      this.poolDetailList[i] = tmpArr;
+                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
+                      this.searchTagList();
+                      return;
+                    }
+                  }
+                }
+              }
+              this.currentLis = [];       //左侧选中数据清空
+            })
+          }else{           //判断是多选
+            let num = 0,tmpArr = [];
+            this.currentLis.map((id)=>{
+              tmpArr.push(res.data.data[id]);
+            })
+            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
+              if(flg){    //有选中
+                this.poolDetailList[idx] = tmpArr;
+                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+                this.searchTagList();
+              }else{
+                ++num;
+                if(num == 6){
+                  for(let i = 1;i < this.poolDetailList.length;i++){
+                    let ids = [];
                     if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
-                      tmp.push(currentDetail);
-                      this.poolDetailList[i] = tmp;
+                      this.poolDetailList[i] = tmpArr;
                       this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
                       this.searchTagList();
                       return;
@@ -260,11 +386,12 @@ export default {
                   }
                 }
               }
+              this.currentLis = []
             })
           }
         }
       })
-    },
+    }
   }
 }
 </script>
@@ -375,6 +502,7 @@ export default {
         width: 20%;
         height: @icssHeight;
         overflow: auto;
+        cursor: pointer;
         .partDetail {
           padding: 3px 5px;
         }

src/components/icss/PubTagPartDetails.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="bottomPart clearfix">
+    <div class="bottomPartLeft fl">
+      <p class="desTitle">标签池：</p>
+      <div class="pool">
+        <el-input
+          placeholder="请输入搜索内容"
+          v-model="searchVal"
+        >
+          <i
+            slot="prefix"
+            class="el-input__icon el-icon-search"
+          ></i>
+        </el-input>
+        <ul class="pubList searchList">
+          <li class="pubLiStyle pubLiStyleWrap ellipsis"
+            v-for="val in currentPool"
+            :title="'[ '+val.tagName+' ]'"
+            :key="val.id"
+            :style="getStyle(val.id)?styles:null"
+            @click="detailsTagList(val.id)" 
+          >{{val.tagName}}</li>
+        </ul>
+      </div>
+    </div>
+    <div class="bottomPartMid fl">
+      <p><span class="el-icon-arrow-right" @click="toRightPool"></span></p>
+      <p><span class="el-icon-arrow-left" @click="toLeftPool"></span></p>
+    </div>
+    <div class="bottomPartRight fl">
+      <p class="desTitle">操作界面：</p>
+      <div class="rightPool">
+        <div
+          class="onlyTop pubLiStyle"
+          :class="selectArr[0]?'activeBgc':null"
+          @click="selectPart(0)"
+        >
+          <template v-for="item in poolDetailList[0]">
+            <span class="hzx" v-for="part in item.questionDetailList" :key="part.id">{{part.name}}</span>
+          </template>
+        </div>
+        <div class="onlyBottom pubList">
+          <ul class="clearfix">
+            <li v-for="n in 5"
+              :key="n + 'part'"
+              class="onlyBottomPart"
+              :class="selectArr[n]?'activeBgc':null"
+              :style="{borderRight:n==5?'0':''}"
+              @click="selectPart(n)"
+            >
+              <ul>
+                <template v-for="item in poolDetailList[n]">
+                  <li class="partDetail" v-for="part in item.questionDetailList" :key="part.id">
+                    {{part.name}}
+                  </li>
+                </template>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="partWaring">
+        <ul>
+          <li v-for="i in 5" :key="i">
+            <template v-for="item in poolDetailList[i]">
+              <p class="partDetail" v-show="item.controlType != 1" :key="item.id + '1'">
+                {{1}}
+              </p>
+              <p class="partDetail" v-show="item.controlType != 2" :key="item.id + '2'">
+                {{2}}
+              </p>
+            </template>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <span class="mutex">互斥项</span>
+  </div>
+</template>
+<script>
+import api from '@api/icss.js';
+import utils from '@api/utils.js';
+
+export default {
+  props: {
+    pool: {
+      default: () => [],
+      type: Array
+    },
+    type: {
+      default: '',
+      type: String
+    },
+    sign: {
+      default: '',
+      type: String
+    },
+    choose: {
+      default: 'single',      //multiple多选
+      type: String
+    },
+  },
+  data() {
+    return {
+      currentDetail: {},     //当前点击的标签对应的展开数据
+      poolDetailList: [[],[],[],[],[],[]],     //默认6个部分
+      poolDetailListAll:[],    //默认6个部分转化为一维数组
+      activePart: '-1',     //选中part第几个
+      selectArr: [false, false, false, false, false, false],   //右侧选中part状态
+      select: [],              //右侧选中的项
+      currentIdx:'',            //右侧选中的第几个
+      
+      styles:{
+        background:'#eae7e7'
+      },                       //选中单条样式
+      searchVal: '',           //搜索值
+      currentPool: [],         //标签池数据
+      currentLis:[],           //选中单条ID组合（多选）
+      notIds:[],               //去重IDs
+    }
+  },
+  watch: {
+    pool(newVal, preVal) {
+      if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+        this.currentPool = newVal
+      }
+    },
+    searchVal(newVal, preVal){
+      if(newVal.trim() == ''){
+        this.searchTagList()
+      }else if(newVal.trim() != preVal.trim()){
+        this.searchTagList()
+      }
+    }
+  },
+  methods: {
+    toRightPool(){
+      if(this.currentLis.length == 0){
+        this.$message({
+          showClose: true,
+          message: '请选择标签池标签',
+          type: 'warning'
+        });
+        return;
+      }
+      this.detailsTagList(this.currentLis[0])
+    },
+    toLeftPool(){      //往左返回数据
+      if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.currentIdx].length > 0){
+        console.log(this.currentIdx)
+        let tmparr = this.poolDetailList;
+        tmparr[this.currentIdx] = []
+        this.poolDetailList = tmparr;
+        this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+        this.searchTagList();
+        this.currentLis = [];
+      }
+    },
+    getStyle(id){       //左侧选中状态
+      return utils.filterArr(this.currentLis,id,2)
+    },
+    searchTagList() {
+      let ids = [];
+      this.poolDetailListAll.map((value)=>{
+        ids.push(value.id)
+      })
+      this.notIds = ids;
+      let param = {
+        "tagName": this.searchVal || '',
+        "type": this.type,
+        "notIds": this.notIds,
+        "tagType": this.sign == 2?[1]:[],
+        "controlType":this.sign == 2?[1,2]:[],
+      }
+      api.searchTagList(param).then((res) => {
+        if (res.data.code === '0') {
+          this.currentPool = res.data.data
+        }
+      })
+    },
+    selectPart(idx) {
+      // this.select = this.poolDetailList[idx]  
+      this.currentIdx = idx 
+      let tmpFst1 = this.selectArr[0],
+        tmpFst2 = this.selectArr[1],
+        tmpFst3 = this.selectArr[2],
+        tmpFst4 = this.selectArr[3],
+        tmpFst5 = this.selectArr[4],
+        tmpFst6 = this.selectArr[5];
+      if (idx == 0) {
+        this.selectArr = [!tmpFst1, false, false, false, false, false];
+      } else if (idx == 1) {
+        this.selectArr = [false, !tmpFst2, false, false, false, false];
+      } else if (idx == 2) {
+        this.selectArr = [false, false, !tmpFst3, false, false, false];
+      } else if (idx == 3) {
+        this.selectArr = [false, false, false, !tmpFst4, false, false];
+      } else if (idx == 4) {
+        this.selectArr = [false, false, false, false, !tmpFst5, false];
+      } else if (idx == 5) {
+        this.selectArr = [false, false, false, false, false, !tmpFst6];
+      }
+      let tmpArr = this.selectArr;
+      let num = 0;
+      tmpArr.map((val, idx) => {
+        if (val) {
+          this.activePart = idx;
+        } else {
+          num = ++num
+          if (num == 6) { this.activePart = '-1' }
+        }
+      })
+    },
+    detailsTagList(id) {
+      let plus1 = 0,plus2 = 0;
+      for(let j = 0;j < this.selectArr.length;j++){        //判断右侧有没有选中
+        if(!this.selectArr[j]){
+          ++plus1;
+          if(plus1 == 6){       //右侧未选中
+            for(let k = 1;k < this.poolDetailList.length;k++){
+              if(JSON.stringify(this.poolDetailList[k]) != '[]'){
+                ++plus2
+                if(plus2 == 5){     //右侧数据填满了
+                  alert('请选择需要修改的模块')
+                  return;
+                }
+              }
+            }
+          }
+        }
+      }
+      if(this.choose == 'single'){           //单选
+        let tmpIds = [];
+        tmpIds.push(id);
+        this.currentLis = tmpIds;
+      }else{                                //多选
+        let tmpIds = this.currentLis;
+        if(utils.filterArr(tmpIds,id,2)){
+          return;
+        }else{
+          tmpIds.push(id);
+        }
+        this.currentLis = tmpIds;
+      }
+
+      let param = {
+        // "age": 0,
+        "ids": this.currentLis.join(','),
+        // "sexType": 3
+      }
+      api.detailsTagList(param).then((res) => {        //右侧展开内容
+        if (res.data.code === '0') {
+          const currentDetail = res.data.data[id];
+          this.currentDetail = currentDetail;
+          let num = 0;
+          if(this.choose == 'single'){              //判断是单选
+            this.selectArr.map((flg,idx)=>{         //判断右侧有没有选中
+              if(flg){    //有选中
+                let tmp = [],ids = [];
+                tmp.push(currentDetail);
+                this.poolDetailList[idx] = tmp;
+                this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);     //二维转一维
+                this.searchTagList();
+              }else{      //没选中,按順序第二个开始添加
+                ++num;
+                if(num == 6){
+                  for(let i = 1;i < this.poolDetailList.length;i++){
+                    let tmp = [],ids = [];
+                    if(this.poolDetailList[i].length == 0){      //判断part里面是不是有数据，没有直接添加
+                      tmp.push(currentDetail);
+                      this.poolDetailList[i] = tmp;
+                      this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
+                      this.searchTagList();
+                      return;
+                    }
+                  }
+                }
+              }
+              this.currentLis = [];       //左侧选中数据清空
+            })
+          }
+        }
+      })
+    },
+  }
+}
+</script>
+<style lang="less">
+@import "../../less/common.less";
+.bottomPart {
+  box-sizing: border-box;
+  padding-right: 100px;
+  position: relative;
+  padding-bottom: 500px;
+  .desTitle {
+    padding-bottom: 10px;
+  }
+  .pubList {
+    height: @icssHeight;
+    overflow: auto;
+  }
+  .pubLiStyle {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+  }
+  .pubLiStyleWrap:hover {
+    background-color: #f5f5f5;
+  }
+  .pubLiStyleWrap:before {
+    content: "[ ";
+  }
+  .pubLiStyleWrap:after {
+    content: " ]";
+  }
+  .mutex {
+    position: absolute;
+    right: 36px;
+    top: 36px;
+  }
+  .bottomPartLeft {
+    width: 30%;
+    .pool {
+      border: 1px solid @icssBorder;
+      .el-input__prefix {
+        left: 5px;
+        right: auto;
+      }
+      .el-input__inner {
+        height: 31px;
+        line-height: 31px;
+      }
+      .el-input__icon {
+        line-height: 31px;
+      }
+      .el-input--prefix .el-input__inner {
+        border: 0 none;
+        border-bottom: 1px solid @icssBorder;
+        border-radius: 0;
+      }
+      .search {
+        border-bottom: 1px solid @icssBorder;
+      }
+      .searchList {
+        li {
+        }
+      }
+    }
+  }
+  .bottomPartMid {
+    width: 10%;
+    margin-top: 60px;
+    p {
+      width: 100%;
+      text-align: center;
+      span {
+        display: inline-block;
+        width: 30px;
+        height: 40px;
+        line-height: 40px;
+        margin: 0 auto;
+        border: 1px solid @icssBorder;
+        margin-bottom: 15px;
+        font-size: 18px;
+      }
+    }
+  }
+  .bottomPartRight {
+    width: 60%;
+    .partWaring {
+      li {
+        float: left;
+        width: 20%;
+        padding: 5px;
+        box-sizing: border-box;
+      }
+    }
+    .rightPool {
+      border: 1px solid @icssBorder;
+    }
+    .onlyTop {
+      border-bottom: 1px solid @icssBorder;
+      .hzx{
+        padding: 0 30px 0 0;
+      }
+    }
+    .onlyBottom {
+      .onlyBottomPart {
+        float: left;
+        border-right: 1px solid @icssBorder;
+        box-sizing: border-box;
+        width: 20%;
+        height: @icssHeight;
+        overflow: auto;
+        .partDetail {
+          padding: 3px 5px;
+        }
+      }
+    }
+  }
+}
+</style>
+
+

src/less/common.less

@@ -17,7 +17,7 @@
 /*朗通后台基本颜色*/
 @adminBase: #22ccc8;
 @icssBorder: #c0c4cc;
-@icssHeight:150px;
+@icssHeight:240px;
 
 /*用户后台基本颜色*/
 @userBase: #1774f0;