FeatureMatchingAccuracy.vue

<template>
  <div class="containter">
    <el-row class="contentBox" v-loading="isLoading" v-show="isShow">
      <el-col :span="7" class="box boxLeft">
        <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
          <a-form-item label="集团：">
            <a-select v-model:value="queryForm.account_id" style="width: 150px" :options="accountList" @change="onAccountChange" optionFilterProp="label" show-search>
            </a-select>
          </a-form-item>
          <a-form-item label="广场：">
            <a-select v-model:value="queryForm.plaza_id" style="width: 150px" :options="plazaList" @change="onMallChange" optionFilterProp="label" show-search>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="btns">
          <a-button type="primary" @click="confirmSearch" class="btn">搜索</a-button>
          <a-button type="primary" @click="addPersonFun" class="btn">新增注册人员</a-button>
          <a-button type="primary" @click="selectReport" class="btn">查看报告</a-button>
        </div>
        <el-table :data="resultList" @row-click='clickRow' :highlight-current-row='true' :rowKey="id" :height="contentHeight" style="width: 100%" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="index" align="center" label="序号" width="80">
                        <template #default="scope">
                            <span v-text="getIndex(scope.$index)"> </span>
                        </template>
                    </el-table-column> -->
          <el-table-column type="selection" width="30">
          </el-table-column>
          <el-table-column prop="name" align="center" label="姓名">
          </el-table-column>
          <el-table-column prop="regCount" align="center" label="注册图片数量">
          </el-table-column>
          <el-table-column prop="hitCount" align="center" label="命中目标数量">
          </el-table-column>
          <el-table-column prop="content" align="center" label="操作" width="220">
            <template #default="scope">
              <el-button @click.stop @click="editRow(scope.row)" type="text" size="small" class="tab-btn">编辑</el-button>
              <el-button @click.stop @click="deleteRow(scope.row)" type="text" size="small" class="tab-btn">删除</el-button>
              <el-button @click.stop @click="addSamplePic(scope.row)" type="text" size="small" class="tab-btn">添加样本图</el-button>
              <el-button @click.stop @click="hitDetail(scope.row)" type="text" size="small" class="tab-btn">命中详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20', '50']" @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper style="text-align:center" />
      </el-col>
      <el-col :span="17" class="box boxRight">
        <div style="margin-bottom: 10px;min-height:350px">
          <a-tabs type="card" v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="注册样本" class="regBox">
              <div>注册样本图：{{regPictureList.length}}</div>
              <el-row :gutter="10">
                <el-col :span="3" v-for="item in regPictureList">
                  <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item,0)" :class="currentId==item.faceUnid?'active':''">
                    <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                    </el-image>
                    <span class="el-icon-delete  delHitPic" @click.stop @click="delSamplePic(item)"></span>
                  </div>
                </el-col>
              </el-row>
            </a-tab-pane>
            <a-tab-pane key="2" tab="命中目标" class="regBox">
              <p>命中目标图：{{hitPictureList.length}}</p>
              <el-row :gutter="10">
                <el-col :span="3" v-for="item in hitPictureList">
                  <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item,1)" :class="currentId==item.faceUnid?'active':''">
                    <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                    </el-image>
                    <span class="el-icon-delete  delHitPic" @click.stop @click="delHitPic(item)"></span>
                  </div>
                </el-col>
              </el-row>
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-form :model="hitSearchObj" layout="inline" :label-col="{ style: { width: 'auto' } }">
          <a-form-item label="监控点：" class="secondCondition">
            <a-select v-model:value="hitSearchObj.gate_id" style="width: 250px" mode="multiple" :maxTagCount="1" :options="gateList" optionFilterProp="label" show-search>
            </a-select>
          </a-form-item>
          <a-form-item label="方向：" class="secondCondition">
            <a-select v-model:value="hitSearchObj.direction" mode="multiple" :maxTagCount="1" style="width: 125px">
              <a-select-option :value="1">进</a-select-option>
              <a-select-option :value="-1">出</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="分数：" class="secondCondition">
            <a-input v-model:value="hitSearchObj.score" style="width: 50px;"></a-input>
          </a-form-item>
          <a-form-item label="选择日期：" class="secondCondition">
            <a-date-picker v-model:value="hitSearchObj.date" :format="'YYYY-MM-DD'" style="width: 110px" />
          </a-form-item>
          <a-form-item label="选择时间：" class="secondCondition">
            <a-time-picker v-model:value="hitSearchObj.startTime" style="width: 90px" />
            <a-time-picker v-model:value="hitSearchObj.endTime" style="width: 90px" />
          </a-form-item>
          <a-form-item class="secondCondition">
            <a-button type="primary" style="margin-right: 5px;" @click="searchPicture">查询</a-button>
            <!-- <a-button type="primary" @click="checkPicture">选中</a-button> -->
          </a-form-item>
        </a-form>
        <div class="identifyResult">
          <div>识别结果：{{identifyResultList.length}}</div>
          <el-row :gutter="10" class="identifyResultTable" :style="{height:contentHeight-340+'px'}">
            <el-col :span="3" v-for="item in identifyResultList">
              <div class="pictureBox">
                <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                </el-image>
                <span class="score">{{item.featureNum}}</span>
                <div class="btnPic">
                  <el-button type="primary" class="checkBox " :disabled="item.checked?true:false" @click="checkPicture(item)">选中</el-button>
                  <el-button type="primary" class="checkBox text" @click="clickPicture(item)">以图搜图</el-button>
                </div>

                <!-- <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox> -->
                <!-- <span class="text" @click="clickPicture(item)">
                                    <span class="el-icon-picture-outline iconPic"></span>
                                </span> -->
              </div>
            </el-col>
          </el-row>
          <!-- <a-pagination v-model:current="pageNum_identify" v-model:pageSize="pageSize_identify" :total="total_identify" :show-total="total => `共 ${total_identify} 条`" :pageSizeOptions="['16', '32', '64']" @change="onPageNumChange_identify" @showSizeChange="onPageSizeChange_identify"
            show-size-changer show-quick-jumper style="text-align:center" /> -->
        </div>
      </el-col>
    </el-row>
    <addPersonConfig ref="addPersonConfigRef" @refreshParentTable='confirmSearch'></addPersonConfig>
    <editPersonConfig ref="addSamplePicConfigRef" @refreshParentTable='confirmSearch'></editPersonConfig>
    <hitDetailDialog ref="hitDetailDialogRef" @refreshParentTable='confirmSearch'></hitDetailDialog>
    <div v-show="!isShow" style="padding: 0px 10px 10px">
      <div @click="returns" style="cursor: pointer;margin-bottom: 10px;color: blue;">返回</div>
      <div v-for="item in tableDataList" :key="item.id" style="margin-bottom: 10px;border-top: 1px solid #ccc;padding-top: 10px;">
        <div>
          <div style="margin-left: 55px;"><span style="font-weight: bolder;">姓名：</span>{{ item.name }}</div>
          <div style="display: flex;align-items: center;">
            <span><span style="font-weight: bolder;">注册图片数量：</span>{{ item.picList&& item.picList.length}}</span>
            <el-image v-for="(item1,index) in item.picList" :key="index" :src='formatUrl(item1)' alt="" style="width: 100px;height:100px;margin-left: 10px;" :preview-src-list="[formatUrl(item1)]"></el-image>
            <!-- <el-image v-for="(item1,index) in item.picList" :key="index" :src='formatUrl(item1)' alt="" style="width: 100px;height:100px;margin-left: 20px;"  :preview-src-list="formatUrlList"></el-image> -->
          </div>
          <div style="margin-top: 10px;margin-bottom: 10px;">
            <span><span style="font-weight: bolder;">命中目标数量：</span>{{ item.hitRecords&& item.hitRecords.length}}</span>
          </div>
        </div>
        <el-table :data="item.hitRecords" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="counttime" label="时间">
          </el-table-column>
          <el-table-column prop="gateName" label="监控点名称">
          </el-table-column>
          <el-table-column prop="direction" label="方向">
          </el-table-column>
          <el-table-column label="图片">
            <template #default="scope">
              <!-- <img :src='formatUrl1(scope.row.picture_path)' alt="" style="width: 100px;height:100px;margin-left: 10px;margin-top: 5px;"> -->
              <el-image :src='formatUrl1(scope.row.picture_path)' alt="" style="width: 100px;height:100px;margin-left: 10px;" :preview-src-list="[formatUrl1(scope.row.picture_path)]"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>
import { nextTick, reactive, ref, toRaw } from "vue";
import moment from "moment";
import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
import { isArray } from "@/PublicUtil/Judgment";
import {
  filterEmptyValueInObject,
  formatDate,
  formatTime,
} from "@/PublicUtil/PublicUtil";
import FeatureMatchingAccuracyApi from "@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi";
import { PlusOutlined } from "@ant-design/icons-vue";
import addPersonConfig from "./addPerson.vue";
import editPersonConfig from "./editPerson.vue";
import hitDetailDialog from "./hitDetailDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
export default {
  components: {
    addPersonConfig,
    editPersonConfig,
    hitDetailDialog,
  },
  setup() {
    const accountList = ref([]);
    const plazaList = ref([]);
    const tableDataList = ref([]);
    const selectList = ref([]);
    const router = useRouter();
    const isShow = ref(true);
    const queryForm = reactive({
      account_id: "",
      plaza_id: "",
    });
    const hitSearchObj = reactive({
      gate_id: [],
      score: 75,
      direction: [1, -1],
      date: moment(moment().format("YYYY-MM-DD"), "YYYY-MM-DD"),
      startTime: moment("00:00:00", "HH:mm:ss"),
      endTime: moment("23:59:59", "HH:mm:ss"),
    });
    const onAccountChange = function () {
      getPlazaList();
    };
    // 获取商场门店
    const getPlazaList = function () {
      queryForm.plaza_id = "";
      plazaList.value = [];
      snapshotRecordApi
        .getPlazaList({
          account_id: queryForm.account_id,
        })
        .then((r) => {
          if (isArray(r)) {
            for (const item of r) {
              plazaList.value.push({
                value: item.id,
                label: item.name,
              });
            }
            queryForm.plaza_id = r[0].id;
            getGateList();
            confirmSearch();
          }
        });
    };
    // 获取集团
    const getAccountList = function () {
      queryForm.account_id = "";
      accountList.value = [];
      snapshotRecordApi.getAccountList().then((r) => {
        if (isArray(r)) {
          for (const item of r) {
            accountList.value.push({
              value: item.id,
              label: item.name,
            });
          }
          queryForm.account_id = r[0].id;
          getPlazaList();
        }
      });
    };
    const onMallChange = function () {
      getGateList();
    };
    const gateList = ref([]);
    // 获取监控点
    const getGateList = function () {
      hitSearchObj.gate_id = [];
      gateList.value = [];
      snapshotRecordApi
        .getGateList({
          account_id: queryForm.account_id,
          plaza_id: queryForm.plaza_id,
          type: 0,
        })
        .then((r) => {
          if (isArray(r.data)) {
            for (const item of r.data) {
              gateList.value.push({
                value: item.id,
                label: item.name,
              });
            }
          }
        });
    };
    const resultList = ref([]);
    const confirmSearch = function () {
      pageNum.value = 1;
      getTableData();
    };
    // 获取注册人员列表
    const getTableData = function () {
      resultList.value = [];
      const data = filterEmptyValueInObject({
        pageNum: pageNum.value - 1,
        pageSize: pageSize.value,
        accountId: queryForm.account_id,
        mallId: queryForm.plaza_id,
      });
      FeatureMatchingAccuracyApi.getMatch(data).then((r) => {
        if (r.msg_code == 200) {
          resultList.value = r.data.records;
          total.value = r.data.total;
        }
      });
    };

    const onPageNumChange = function (num) {
      pageNum.value = num;
      confirmSearch();
    };

    const onPageSizeChange = function (current, size) {
      pageNum.value = 1;
      pageSize.value = size;
      confirmSearch();
    };
    const isLoading = ref(false);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref();
    const contentHeight = ref(0);
    const addPersonConfigRef = ref();
    // 新增注册人员弹窗
    const addPersonFun = function () {
      addPersonConfigRef.value.initDialog({
        account_id: queryForm.account_id,
        plaza_id: queryForm.plaza_id,
        type: "add",
      });
    };

    // 编辑人员弹窗
    const editRow = function (row) {
      addPersonConfigRef.value.initDialog({
        account_id: row.accountId,
        plaza_id: row.mallId,
        type: "edit",
        name: row.name,
        description: row.description,
        id: row.id,
      });
    };
    // 删除人员
    const deleteRow = function (row) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        isLoading.value = true;
        FeatureMatchingAccuracyApi.delMatch(row).then((r) => {
          isLoading.value = false;
          if (r.msg_code == 200) {
            ElMessage({
              message: r.msg_info,
              type: "success",
            });
            confirmSearch();
          } else {
            ElMessage({
              message: r.msg_info,
              type: "error",
            });
            return false;
          }
        });
      });
    };
    // 命中详情
    const hitDetailDialogRef = ref();
    const hitDetail = function (row) {
      const data = filterEmptyValueInObject({
        accountId: row.accountId,
        mallId: row.mallId,
        id: row.id,
      });
      FeatureMatchingAccuracyApi.getMatchHitDetail(data).then((r) => {
        if (r.msg_code == 200) {
          let checkPersonId = "";
          r.data.forEach((item) => {
            if (item.personId == row.personUnid) {
              checkPersonId = item.personId;
            }
            item.expand = false;
            item.records.forEach((record) => {
              record.picture_url =
                window._baseImgUrl +
                "picture/" +
                record.bodyPath +
                record.bodyPic;
            });
          });
          hitDetailDialogRef.value.initDialog({
            regId: row.id,
            data: r.data,
            checkPersonId: checkPersonId,
          });
        }
      });
    };
    // 添加注册样本图
    const addSamplePicConfigRef = ref();
    const addSamplePic = function (row) {
      FeatureMatchingAccuracyApi.getMatchOne(row).then((r) => {
        if (r.msg_code == 200) {
          addSamplePicConfigRef.value.initDialog(r.data);
        } else {
          ElMessage({
            message: r.msg_info,
            type: "error",
          });
          return false;
        }
      });
    };
    // 注册样本图
    const regPictureList = ref([]);
    const hitPictureList = ref([]);
    const regPersonId = ref();
    const redPersonObj = ref({});
    // 点击行获取注册样本图和命中目标
    const clickRow = function (row) {
      isLoading.value = true;
      redPersonObj.value = row;
      regPersonId.value = row.id;
      regPictureList.value = [];
      hitPictureList.value = [];
      FeatureMatchingAccuracyApi.getMatchOne(row).then((r) => {
        isLoading.value = false;
        if (r.msg_code == 200) {
          if (r.data.faceList && r.data.faceList.length > 0) {
            r.data.faceList.forEach((item) => {
              item.picture_url =
                window._baseImgUrl + "tool/picture/" + item.picUrl;
              // item.bodyPath +
              // item.bodyPic;
            });
            regPictureList.value = r.data.faceList;
            console.log(regPictureList.value);
          }
          if (r.data.hitList && r.data.hitList.length > 0) {
            r.data.hitList.forEach((item) => {
              item.picture_url =
                window._baseImgUrl + "tool/picture/" + item.picUrl;
              // item.bodyPath +
              // item.bodyPic;
            });
            hitPictureList.value = r.data.hitList;
          }
        }
      });
    };
    // 识别结果
    const identifyResultList = ref([]);
    const pageNum_identify = ref(1);
    const pageSize_identify = ref(10);
    const total_identify = ref(0);
    const onPageNumChange_identify = function (num) {
      pageNum_identify.value = num;
      //   clickPicture();
      clickPicture({ faceUnid: currentId.value });
    };

    const onPageSizeChange_identify = function (current, size) {
      pageNum_identify.value = 1;
      pageSize_identify.value = size;
      //   clickPicture();
      clickPicture({ faceUnid: currentId.value });
    };
    const currentId = ref();
    // 点击图片以图搜图
    const clickPicture = function (row, type) {
      console.log(row, "5555");
      let types = null;
      if (type === 0) {
        types = 0;
      } else if (type === 1) {
        types = 1;
      }
      const rawData = toRaw(hitSearchObj);
      // if(rawData.gate_id.length<1){
      //     ElMessage({
      //     	message: '请选择监控点',
      //     	type: 'warning'
      //     })
      //     return false;
      // }
      currentId.value = row.faceUnid || row.unid;
      //   currentId.value = row.id;
      isLoading.value = true;
      let data = filterEmptyValueInObject({
        accountId: queryForm.account_id,
        mallId: queryForm.plaza_id,
        gateId: rawData.gate_id.toString(),
        score: rawData.score,
        direction: rawData.direction.toString(),
        startTime:
          formatDate(rawData.date) + " " + formatTime(rawData.startTime),
        endTime: formatDate(rawData.date) + " " + formatTime(rawData.endTime),
        // faceId: currentId.value,
        faceUnid: currentId.value,
        type: types,
        page: pageNum_identify.value - 1,
        pageSize: pageSize_identify.value,
        regId: regPersonId.value,
      });
      FeatureMatchingAccuracyApi.getSearchByPic(data).then((r) => {
        isLoading.value = false;
        if (r.msg_code == 200) {
          console.log(r.data);
          r.data.forEach((item) => {
            item.checked = false;
            item.featureNum = item.featureNum.toFixed(2);
            item.picture_url =
              window._baseImgUrl +
              "picture/" +
              item.picture_path +
              item.picture_url;
          });
          identifyResultList.value = r.data;
          total_identify.value = r.data.total;
        } else {
        //     identifyResultList.value = [];
        //   total_identify.value =0;
          ElMessage({
            message: r.msg_info,
            type: "warning",
          });
        }
      });
    };
    const searchPicture = function () {
      if (!currentId.value) {
        ElMessage({
          message: "请选择样本图",
          type: "warning",
        });
        return false;
      }
      clickPicture({ faceUnid: currentId.value });
    };
    // 选中命中目标
    const checkPicture = function (resData) {
      // let checkList = []
      // identifyResultList.value.forEach(item=>{
      //     if(item.checked==true){
      //         checkList.push(item.id)
      //     }
      // })
      // if(checkList.length<1){
      //     ElMessage({
      //     	message: '请选择识别结果图片',
      //     	type: 'warning'
      //     })
      //     return false;
      // }
      // if(!regPersonId.value){
      //     ElMessage({
      //     	message: '请选择注册人员',
      //     	type: 'warning'
      //     })
      //     return false;
      // }
      isLoading.value = true;
      FeatureMatchingAccuracyApi.addMatchHit({
        id: regPersonId.value,
        // faceIds: [resData.id],
        faceUnids: [resData.unid],
      }).then((r) => {
        isLoading.value = false;
        if (r.msg_code == 200) {
          ElMessage({
            message: r.msg_info,
            type: "success",
          });
          getTableData();
          //   disabledPicList.value.push(resData.unid);
          identifyResultList.value.forEach((item) => {
            if (item.unid === resData.unid) {
              item.checked = true;
            }
          });
          clickRow(redPersonObj.value);
          //   searchPicture();
        }
      });
    };
    // 删除命中目标图片
    const delHitPic = function (row) {
      FeatureMatchingAccuracyApi.delMatchHit({
        regId: regPersonId.value,
        // faceId: row.id,
        faceUnid: row.faceUnid,
      }).then((r) => {
        isLoading.value = false;
        if (r.msg_code == 200) {
          ElMessage({
            message: r.msg_info,
            type: "success",
          });
          getTableData();
          clickRow(redPersonObj.value);
          searchPicture();
        }
      });
    };
    // 删除样本图片
    const delSamplePic = function (row) {
      FeatureMatchingAccuracyApi.delMatchSample({
        regId: regPersonId.value,
        // faceId: row.id,
        faceUnid: row.faceUnid,
      }).then((r) => {
        isLoading.value = false;
        if (r.msg_code == 200) {
          ElMessage({
            message: r.msg_info,
            type: "success",
          });
          getTableData();
          clickRow(redPersonObj.value);
        }
      });
    };
    const getIndex = function (val) {
      return (pageNum.value - 1) * pageSize.value + val + 1;
    };
    const __main = function () {
      contentHeight.value = window.innerHeight - 200;
      getAccountList();
    };
    __main();
    const handleSelectionChange = (val) => {
      selectList.value = val;
      console.log(val);
    };
    const formatUrlList = ref([]);
    const selectReport = () => {
      if (selectList.value.length <= 0) {
        return ElMessage({
          message: `请选择`,
          type: "warning",
        });
      }

      isShow.value = false;
      let datas = selectList.value.map((item) => item.id).join(",");
      FeatureMatchingAccuracyApi.getfeatureReport({
        idList: datas,
      }).then((res) => {
        tableDataList.value = res;
        // console.log(tableDataList.value)
        //         formatUrlList.value=tableDataList.value.picList.map(item=>{
        //            return window._baseImgUrl + "tool/picture/" + item
        //         })
        //         console.log(formatUrlList.value)
      });
    };
    const returns = () => {
      console.log(isShow.value);

      isShow.value = true;
    };
    const formatUrl = (url) => {
      return window._baseImgUrl + "tool/picture/" + url;
    };
    const formatUrl1 = (url) => {
      return window._baseImgUrl + "picture/" + url;
    };
    return {
      // sequence
      tableDataList,
      formatUrlList,
      isShow,
      isLoading,
      pageNum,
      pageSize,
      total,
      contentHeight,
      accountList,
      plazaList,
      resultList,
      addPersonConfigRef,
      addSamplePicConfigRef,
      hitSearchObj,
      gateList,
      handleSelectionChange,
      formatUrl,
      formatUrl1,
      selectReport,
      activeKey: ref("1"),
      regPictureList,
      pageNum_identify,
      pageSize_identify,
      total_identify,
      identifyResultList,
      currentId,
      hitPictureList,
      hitDetailDialogRef,
      // mapping
      queryForm,
      onAccountChange,
      confirmSearch,
      onPageNumChange,
      onPageSizeChange,
      addPersonFun,
      getIndex,
      editRow,
      deleteRow,
      onMallChange,
      clickRow,
      searchPicture,
      clickPicture,
      onPageNumChange_identify,
      onPageSizeChange_identify,
      checkPicture,
      delHitPic,
      hitDetail,
      delSamplePic,
      addSamplePic,
      returns,
    };
  },
};
</script>

<style lang="less" scoped>
.active {
  border: 2px solid #40a9ff;
}
.regBox {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.hitBox {
  position: relative;
}
.delHitPic {
  position: absolute;
  right: 0;
  top: 0;
  color: #1890ff;
  font-size: 28px;
}
.secondCondition {
  margin-right: 5px !important;
}
.identifyResultTable {
  overflow-y: auto;
}
.pictureBox {
  position: relative;
  cursor: pointer;
}
.btnPic {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.pictureBox:hover .btnPic {
  display: block;
  width: 100px;
  height: 100px;
}

.checkBox {
  width: 100px;
  height: 30px;
  margin-left: 0 !important;
  margin-bottom: 10px;
  // position: absolute;
  // left: 1px;
  // top: 0;
}
.score {
  position: absolute;
  right: 10px;
  top: 0;
  color: red;
  font-weight: 900;
  font-size: 18px;
}
.iconPic {
  position: absolute;
  right: 0px;
  top: 0px;
  color: #1890ff;
  font-size: 28px;
}

.single-image {
  width: 100%;
  height: 200px;
}
.containter {
  height: 100%;
}

.contentBox {
  height: 100%;
}

.box {
  height: 100%;
}

.boxRight {
  border-left: 5px solid #ccc;
  padding-left: 5px;
}

.btns {
  text-align: right;
  margin-top: 10px;
  margin-right: 15px;
}

.btn {
  margin-left: 10px;
}
</style>