标定添加关联摄像机tab,绘制区域组件参数更新

hanbaoshan

2020-12-20 ecb6cadc3f016cf9968f48e0cc77479a1e56365b

 src/pages/labelMark/components/RightSide.vue

@@ -3,116 +3,166 @@
    <div class="figure s-system-manage">
      <el-tabs
        id="e-basic-setting"
        @tab-click="changeTab"
        v-model="actPage"
        v-loading="loading"
        element-loading-text="加载中"
        type="border-card"
      >
        <el-tab-pane label="摄像机标注" name="1">
          <div class>
            <div class="action-bar">
              <div class="tool-bar">
                <div>
                  <!-- <input type="color" ref="colorPicker" v-model="color"> -->
                  <label for>拾色器:</label>
                  <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
                </div>
                <div style="width:250px;">
                  <label for>笔触:</label>
                  <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
                </div>
                <div>
                  <el-button
                    v-if="!isEdit"
                    class="drawboard-trigger"
                    size="small"
                    @click="editCameraData"
                    icon="el-icon-edit"
                  >编辑</el-button>
        <el-tab-pane label="位置标注" name="1">
          <el-tabs type="border-card">
            <el-tab-pane label="摄像机标注" name="11">
              <div class>
                <div class="action-bar">
                  <div class="tool-bar">
                    <div>
                      <!-- <input type="color" ref="colorPicker" v-model="color"> -->
                      <label for>拾色器:</label>
                      <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
                    </div>
                    <div style="width:250px;">
                      <label for>笔触:</label>
                      <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
                    </div>
                    <div>
                      <el-button
                        v-if="!isEdit"
                        class="drawboard-trigger"
                        size="small"
                        @click="editCameraData"
                        icon="el-icon-edit"
                      >编辑</el-button>

                  <el-button
                    v-if="isEdit"
                    class="drawboard-trigger save"
                    size="small"
                    @click="submitInfo"
                    icon="el-icon-lock"
                  >保存</el-button>
                      <el-button
                        v-if="isEdit"
                        class="drawboard-trigger save"
                        size="small"
                        @click="submitInfo"
                        icon="el-icon-lock"
                      >保存</el-button>
                    </div>
                  </div>
                </div>
                <div class="drawboard shadow-box">
                  <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
                    <div
                      class="label"
                      @click="editLabel(item)"
                      v-for="(item,index) in curCameraData.coords"
                      :key="index"
                      :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                    ></div>
                  </div>
                  <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
                  <div
                    class="popBox"
                    v-show="isShowPop"
                    :style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
                  >
                    <div class="title">标注信息</div>
                    <div class="details">
                      <el-form :model="curLabel" :rules="rules" ref="labelForm">
                        <div class="detail-item">
                          <div class="left">
                            <el-form-item prop="x0">
                              <label for>平面坐标X:</label>
                              <span class="fix-width">{{curLabel.x0}}</span>
                              <i>px</i>
                            </el-form-item>
                          </div>
                          <span class="devide"></span>
                          <div class="right">
                            <el-form-item prop="x1">
                              <label for>实际坐标X:</label>
                              <el-input
                                type="text"
                                size="mini"
                                style="width:90px"
                                v-model.number="curLabel.x1"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </div>
                        <div class="detail-item">
                          <div class="left">
                            <el-form-item prop="y0">
                              <label for>平面坐标Y:</label>
                              <span class="fix-width">{{curLabel.y0}}</span>
                              <i>px</i>
                            </el-form-item>
                          </div>
                          <span class="devide"></span>
                          <div class="right">
                            <el-form-item prop="y1">
                              <label for>实际坐标Y:</label>
                              <el-input
                                type="text"
                                size="mini"
                                style="width:90px"
                                v-model.number="curLabel.y1"
                              ></el-input>
                            </el-form-item>
                          </div>
                        </div>
                        <div class="btns">
                          <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                          <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                          <el-button size="mini" type="success" @click="sure">确定</el-button>
                        </div>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="drawboard shadow-box">
              <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
                <div
                  class="label"
                  @click="editLabel(item)"
                  v-for="(item,index) in curCameraData.coords"
                  :key="index"
                  :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                ></div>
              </div>
              <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
              <div
                class="popBox"
                v-show="isShowPop"
                :style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
              >
                <div class="title">标注信息</div>
                <div class="details">
                  <el-form :model="curLabel" :rules="rules" ref="labelForm">
                    <div class="detail-item">
                      <div class="left">
                        <el-form-item prop="x0">
                          <label for>平面坐标X:</label>
                          <span class="fix-width">{{curLabel.x0}}</span>
                          <i>px</i>
                        </el-form-item>
                      </div>
                      <span class="devide"></span>
                      <div class="right">
                        <el-form-item prop="x1">
                          <label for>实际坐标X:</label>
                          <el-input
                            type="text"
                            size="mini"
                            style="width:90px"
                            v-model.number="curLabel.x1"
                          ></el-input>
                        </el-form-item>
                      </div>
            </el-tab-pane>
            <el-tab-pane label="实景坐标" name="12">
              <div class="user-upload">
                <div class="img-card">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :http-request="definedUpload"
                    :on-change="onChange"
                    :show-file-list="false"
                  >
                    <el-image
                      class="preview"
                      v-if="userImg"
                      :src="userImg"
                      fit="contain"
                      @mousemove="showCurPos"
                      @mouseout="isShowCurPos=false"
                    ></el-image>
                    <div class="el-upload__text">
                      将文件拖到此处，或
                      <em>点击上传</em>
                    </div>
                    <div class="detail-item">
                      <div class="left">
                        <el-form-item prop="y0">
                          <label for>平面坐标Y:</label>
                          <span class="fix-width">{{curLabel.y0}}</span>
                          <i>px</i>
                        </el-form-item>
                      </div>
                      <span class="devide"></span>
                      <div class="right">
                        <el-form-item prop="y1">
                          <label for>实际坐标Y:</label>
                          <el-input
                            type="text"
                            size="mini"
                            style="width:90px"
                            v-model.number="curLabel.y1"
                          ></el-input>
                        </el-form-item>
                      </div>
                  </el-upload>
                </div>
                <div class="info">
                  <div class="input-area">
                    <div>
                      <label for>空间宽:</label>
                      <el-input v-model="spaceWidth" placeholder="请输入实际空间宽" size="small"></el-input>
                    </div>
                    <div class="btns">
                      <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                      <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                      <el-button size="mini" type="success" @click="sure">确定</el-button>
                    <div>
                      <label for>空间高:</label>
                      <el-input v-model="spaceHeight" placeholder="请输入实际空间高" size="small"></el-input>
                    </div>
                  </el-form>
                  </div>
                  <div class="pos" v-show="isShowCurPos">
                    当前位置:
                    <b>{{traceX}}</b>,
                    <b>{{traceY}}</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="追踪实景坐标" name="2">
        <el-tab-pane label="轨迹图" name="2"></el-tab-pane>
        <!-- <el-tab-pane label="追踪实景坐标" name="2">
          <div class="user-upload">
            <div class="img-card">
              <el-upload
@@ -155,51 +205,155 @@
              </div>
            </div>
          </div>
        </el-tab-pane>-->
        <el-tab-pane label="关联摄像机" name="3">
          <div class="tab-relation">
            <div class="part">
              <div class="title">
                <span>关联设备分组</span>
                <el-button @click="newGroup" icon="el-icon-plus" size="mini" type="primary">新建分组</el-button>
              </div>
              <el-alert
                type="info"
                title="提示:请点击上方'新建分组'按钮建立分组"
                show-icon
                v-if="groupList.length==0"
              ></el-alert>
              <div class="flex-box">
                <div
                  class="group-card"
                  :class="{'checked':group.checked}"
                  v-for="(group,index) in groupList"
                  :key="index"
                  @click="checkCurrentGroup(group)"
                >
                  <div class="top">
                    <div class="left">
                      <span class="icon el-icon-video-camera"></span>
                    </div>
                    <div class="right">
                      <div class="name">{{group.groupName}}</div>
                      <div class="details">
                        <label>摄像机:</label>
                        <span
                          class="sub"
                          v-for="(camera,index) in group.cameras"
                          :key="camera.id"
                        >{{camera.name}} {{index!==group.cameras.length-1?'/':''}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <span @click.stop="editGroup(group)">编辑分组</span>
                    <el-popconfirm title="确定删除改分组吗?" @onConfirm="removeGroup(group)">
                      <el-button slot="reference" type="text">删除分组</el-button>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="part" v-if="groupList.length"> -->
            <div class="part" v-if="Object.keys(curGroup)">
              <div class="title">绘制区域(用于算法分析)</div>
              <div class="relative-partment" v-if="curGroup.cameras&&curGroup.cameras.length">
                <div class="area-wrap" v-for="i in 2" :key="'sc'+i">
                  <slide-canvas :cameras="curGroup.cameras" @polygonDataUpdate="polygonUpdate"></slide-canvas>
                </div>
              </div>
            </div>
            <div class="part relative-config" v-if="Object.keys(curGroup)">
              <div class="title">
                <div class="left">
                  <span>关联区域配置</span>
                </div>
                <div class="right" v-if="curGroup.id">
                  <el-button
                    icon="el-icon-plus"
                    size="mini"
                    type="primary"
                    @click="addRelation"
                  >添加关联</el-button>
                </div>
              </div>
              <div class="relative-list">
                <div class="relative-item" v-for="(item,index) in relativeList" :key="index">
                  <div class="left">
                    <el-select v-model="item.sourceObj" value-key="polygonId" size="small">
                      <el-option
                        v-for="area in cameraAreas"
                        :key="area.polygonId"
                        :label="area.name"
                        :value="area"
                      ></el-option>
                    </el-select>
                    <i class="el-icon-connection"></i>
                    <el-select v-model="item.targetObj" value-key="polygonId" size="small">
                      <el-option
                        v-for="area in cameraAreas"
                        :key="area.polygonId"
                        :label="area.name"
                        :value="area"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="right">
                    <el-button type="text" @click="saveRelativePolygon(item)">保存</el-button>
                    <div class="btn-del" @click="delRelation(item)">
                      <i class="el-icon-delete"></i>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="btns">
                <el-button size="small" >取消</el-button>
                <el-button size="small" type="primary" @click="saveRelativeList">保存</el-button>
              </div>-->
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-collapse v-model="actPage" @change="chnageActPage">
        <el-collapse-item title="摄像机标注" name="1">
          
        </el-collapse-item>
        <el-collapse-item title="追踪实景坐标" name="2">
          <div class="user-upload">
            <div class="img-card">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                :http-request="definedUpload"
                :on-change="onChange"
                :show-file-list="false"
              >
                <el-image
                  class="preview"
                  v-if="userImg"
                  :src="userImg"
                  fit="contain"
                  @mousemove="showCurPos"
                  @mouseout="isShowCurPos=false"
                ></el-image>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
      <el-dialog class="dialog-group" title="新建分组" :visible.sync="groupModelVisible">
        <el-form :model="groupForm" ref="groupForm">
          <el-form-item>
            <label>分组名称</label>
            <div>
              <el-input v-model="groupForm.groupName"></el-input>
            </div>
            <div class="info" v-show="isShowCurPos">当前位置:{{traceX}},{{traceY}}</div>
          </el-form-item>
          <el-form-item>
            <label>选择摄像机</label>
            <div>
              <el-select v-model="groupForm.cameras" value-key="id" multiple>
                <el-option
                  :label="camera.name"
                  :value="camera"
                  v-for="camera in cameraData"
                  :key="camera.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <div class="btns">
            <el-button @click="groupModelVisible=false;">取消</el-button>
            <el-button type="primary" @click="confirmGroupDialog">确定</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>-->
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCamerasByServer } from '@/api/pollConfig';
import { getCameraMarks, updateCameraMarks } from '@/api/camera';
import { getCameraMarks, updateCameraMarks, findCameraGroups, saveCameraGroupInfo, delCameraGroup } from '@/api/camera';
import { getSearchList } from '@/api/search';
import TreeDataPool from "@/Pool/TreeData";
import { isNonnegativeInteger } from '@/scripts/validate';
import { getAllPolygon, saveRelationPolygon, findByCamGroup, findByGroup, delRelation } from '@/api/polygon';
import SlideCanvas from './SlideCanvas';

export default {
  components: { SlideCanvas },
  data () {
    return {
      labels: [],
@@ -244,7 +398,22 @@
      curCameraData: {
        cameraId: '',
        coords: []
      }
      },
      relativeCameras: [],
      relativeList: [],
      cameraAreas: [],
      groupModelVisible: false,
      groupList: [],
      curGroup: {},
      groupForm: {
        groupName: '',
        cameras: []
      },
      groupCameras: [],
      groupCamera: {

      },
      cameraAndPolygonData: []
    }
  },
  computed: {
@@ -268,6 +437,12 @@
      },
      deep: true
    },
    'TreeDataPool.selectedNodes': {
      handler (n, o) {

      },
      deep: true
    },
    isEdit (n, o) {
      if (n) {
        this.$refs['editBoard'].addEventListener('click', this.bindListen);
@@ -277,18 +452,248 @@
    }
  },
  methods: {
    polygonUpdate(){
      debugger
      this.getAllGroups();
    },
    delRelation (item) {
      let _this = this;
      delRelation(item.id).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.data
          });
          _this.findRelationByGroup();
        }
      })
    },
    findRelationByGroup () {
      let _this = this;
      findByGroup({ groupId: this.curGroup.id }).then(res => {

        _this.relativeList = res.data.map(relation => {
          let obj = { sourceObj: {}, targetObj: {} };
          obj.sourceObj.cameraId = relation.source_camera_id;
          obj.sourceObj.polygonId = relation.source_polygon_id;
          obj.targetObj.cameraId = relation.target_camera_id;
          obj.targetObj.polygonId = relation.target_polygon_id;
          obj.sourceObj.name = relation.source_polygon.name;
          obj.targetObj.name = relation.target_polygon.name;
          obj.id = relation.id;
          return obj;
        })
      })
    },
    saveRelativePolygon (item) {
      let _this = this;
      let params = {
        groupId: this.curGroup.id,
        source_camera_id: item.sourceObj.cameraId,
        target_camera_id: item.targetObj.cameraId,
        source_polygon_id: item.sourceObj.polygonId,
        target_polygon_id: item.targetObj.polygonId,
        id: item.id || ''
      }

      saveRelationPolygon(params).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '保存成功',
          });
          _this.findRelationByGroup()
        }
      })
    },
    saveRelativeList () {
      let params = {
        groupId: this.curGroup.id,

      }
      //saveRelationPolygon().then()
    },
    async findPolygonByIds (cameras) {
      for (var i = 0; i < cameras.length; i++) {
        let res = await getAllPolygon({ cameraId: cameras[i].id });
        cameras[i].canvasData = res.data;
      }
      return cameras
    },

    async getAllGroupInfo () {
      let _this = this;
      let res = await findCameraGroups();
      let groupArr = res.data.map(item => {
        let obj = {}; //group
        obj.groupName = item.groupName;
        obj.id = item.id;
        let cameras = []; //cameras
        item.cameraIds.forEach(id => {
          let camera = {};
          _this.cameraData.find(one => {
            if (one.id == id) {
              camera.name = one.name;
              camera.id = id;
            }
          });
          cameras.push(camera)
        });
        //cameras [{id,name}]
        obj.cameras = cameras;
        return obj;

      });
      return groupArr;
    },
    // async getAllGroups () {
    //   let _this = this;
    //   let groups = await this.getAllGroupInfo();
    //   let promiseArr = [];
    //   for (var i = 0; i < groups.length; i++) {
    //     let pro = new Promise(resolve => {
    //       resolve(_this.findPolygonByIds(groups[i].cameras))
    //     });
    //     promiseArr.push(pro)
    //   }
    //   Promise.allSettled(promiseArr).then(camerasArr => {

    //     for (var i = 0; i < camerasArr.length; i++) {
    //       groups[i].cameras = camerasArr[i].value
    //     }
    //     _this.groupList = groups;
    //     //选中第一个
    //     _this.checkCurrentGroup(_this.groupList[0]);
    //   })
    // },
    async getAllGroups(){
      let _this = this;
      let groups = await this.getAllGroupInfo();
      for(var i = 0; i< groups.length; i++){
        groups[i].cameras = await _this.findPolygonByIds(groups[i].cameras)
      }
      this.groupList = groups
      //选中第一个
      this.checkCurrentGroup(_this.groupList[0]);
    },

    addRelation () {
      let obj = { cameraArea1: '', cameraArea2: '' };
      this.relativeList.push(obj)
    },

    editGroup (group) {
      this.groupModelVisible = true;
      //this.$refs['groupForm'].resetFields();
      this.groupForm = group;
    },
    removeGroup (group) {
      let _this = this;
      delCameraGroup(group.id).then(res => {
        _this.getAllGroups()
      })
    },
    checkCurrentGroup (group) {
      this.groupList.forEach(group => {
        group.checked = false;
      })
      this.curGroup = group;
      this.curGroup.checked = true;
      this.findRelationByGroup();
      //查询第一个分组下摄像机区域
      findByCamGroup({ groupId: group.id }).then(res => {
        let tempArr = [];
        res.data.forEach(camera => {
          let cameraArea = [];
          camera.polygon.forEach(item => {
            let area = {};
            area.name = camera.camera_name + '' + item.name;
            area.cameraId = camera.camera_id;
            area.polygonId = item.id;
            cameraArea.push(area);
          });
          camera.rect.forEach(item => {
            let area = {};
            area.name = camera.camera_name + '' + item.name;
            area.cameraId = camera.camera_id;
            area.polygonId = item.id;
            cameraArea.push(area);
          });
          tempArr = tempArr.concat(cameraArea)
        });
        this.cameraAreas = tempArr;
        console.log(this.cameraAreas)
      })
    },
    confirmGroupDialog () {
      //请求保存新建或编辑分组
      let _this = this;
      let params = {
        cameraIds: [],
        groupName: '',
        id: ''
      };
      if (!this.groupForm.groupName.trim()) {
        this.$notify({
          type: 'warning',
          message: '请输入分组名称'
        });
        return
      }
      if (this.groupForm.cameras.length < 2) {
        this.$notify({
          type: 'warning',
          message: '请选择至少两个摄像机'
        });
        return
      }
      params.groupName = this.groupForm.groupName;
      params.id = this.groupForm.id || '';
      this.groupForm.cameras.forEach(camera => {
        params.cameraIds.push(camera.id);
        //根据分组内摄像机id查各自区域
        getAllPolygon({ cameraId: camera.id }).then(res => {
          _this.groupCameras.push(res.data);
        }).catch(e => {
          console.log(e)
        });
      })
      //this.groupList.push(this.groupForm);
      saveCameraGroupInfo(params).then(res => {
        _this.getAllGroups();
      })
      this.groupModelVisible = false;

    },
    newGroup () {
      this.groupModelVisible = true;
      this.$nextTick(() => {
        this.$refs['groupForm'].resetFields();
      })
      this.groupForm = {
        groupName: '',
        cameras: []
      }

    },
    changeTab () {
      if (this.actPage == '1') {
        this.$parent.$children[0].$el.parentNode.parentElement.style.display = 'block';
      } else {
        this.$parent.$children[0].$el.parentNode.parentElement.style.display = 'none';
      }
    },
    sure () {
      let _this = this;
      this.$refs['labelForm'].validate(valid => {
        console.log(valid)
        if (valid) {
          _this.isShowPop = false;
          debugger
          //编辑确定
          if (_this.curLabel.id) {
            let editedIndex = _this.curCameraData.coords.findIndex(one => one.id == _this.curLabel.id);
            _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
            

          }
          console.log(_this.curCameraData.coords)
          this.$refs['labelForm'].clearValidate();
@@ -350,14 +755,28 @@
      }
    },
    getAllCameraData () {
      let _this = this;
      getCamerasByServer().then(res => {
        if (res.success) {
          this.cameraData = res.data;
          _this.cameraData = res.data;
          _this.getAllGroups();
        }
      }).catch(e => {
        console.log(e)
      })
    },
    // async getAllCameraData () {
    //   let res = await getCamerasByServer();
    //   this.cameraData = res.data;
    //   let tempArr = [];
    //   this.cameraData.forEach(camera=>{
    //     getAllPolygon({ cameraId: camera.id }).then(res=>{
    //       tempArr.push(res.data);
    //     })
    //   });
    //   this.cameraAndPolygonData = tempArr;
    //   console.log(this.cameraAndPolygonData)
    // },
    bindListen (e) {
      this.newLabel(e);
    },
@@ -374,7 +793,7 @@
        x1: '',
        y1: ''
      };
      target.id = 'n'+(this.curCameraData.coords.length-1);
      target.id = 'n' + (this.curCameraData.coords.length - 1);
      //this.labels.push(target);
      this.curCameraData.coords.push(target);
      this.curLabel = target;
@@ -393,7 +812,7 @@
    cancle () {
      this.isShowPop = false;
      //如果是未保存过的label直接删除(未保存的就是labels数组中最后一个)
      if (!this.curLabel.id) {
      if (this.curLabel.id.startsWith('n')) {
        //this.labels.pop();
        this.curCameraData.coords.pop();
      }
@@ -420,6 +839,7 @@
    .el-tabs__content {
      background: #d2dcea;
      height: calc(100vh - 85px);
      overflow-y: auto;
    }
  }
  .tool-bar {
@@ -633,6 +1053,149 @@
      // height: 100%;
    }
  }
  .tab-relation {
    .el-alert--info {
      background: rgba(230, 247, 255, 1);
      border-color: rgba(145, 213, 255, 1);
      color: #666;
      .el-alert__icon.el-icon-info {
        color: #1890ff;
      }
    }
    .title {
      text-align: left;
      font-size: 15px;
      line-height: 40px;
      .el-button {
        margin-left: 14px;
      }
    }
    .group-card {
      background: #fff;
      width: 293px;
      height: 153px;
      margin-right: 10px;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
      border: 1px solid transparent;
      &.checked {
        border-color: #1890ff;
      }
      .top {
        height: 104px;
        display: flex;
        padding-left: 20px;
        padding-top: 20px;
        box-sizing: border-box;
        //align-items: center;
        .right {
          text-align: left;
          padding-left: 14px;
        }
        .icon {
          font-size: 40px;
        }
        .name {
          font-size: 16px;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .details {
          display: flex;
          flex-wrap: wrap;
          label {
            width: 46px;
          }
          .sub {
          }
        }
      }
      .bottom {
        border-top: 1px solid #e9e9e9;
        height: 48px;
        line-height: 48px;
        background: #f7f9fa;
        position: relative;
        display: flex;
        &:after {
          content: '';
          position: absolute;
          font-size: 0;
          width: 1px;
          height: 14px;
          background: #0000006d;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        span {
          cursor: pointer;
          width: 50%;
          font-size: 14px;
          color: #0000006d;
        }
      }
    }
    .part {
      margin-bottom: 20px;
      .relative-partment {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .area-wrap {
          width: 576px;
        }
      }
    }
    .relative-config {
      width: 700px;
      .title {
        display: flex;
        justify-content: space-between;
      }
      .relative-list {
        .relative-item {
          width: 680px;
          height: 48px;
          padding-left: 20px;
          background: #ecf2f5;
          margin-bottom: 6px;
          display: flex;
          align-items: center;
          .left {
            width: 650px;
            text-align: left;
          }
          .right {
            display: flex;
            align-items: center;
          }
          i {
            font-size: 20px;
            padding: 0 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .dialog-group {
    .el-form {
      .el-form-item__content {
        display: flex;
        label {
          width: 80px;
          text-align: left;
        }
        & > div {
          flex: 1;
          .el-select {
            width: 100%;
          }
        }
      }
    }
  }
}
.el-input__inner:focus {
  outline: none;