<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.patrolPersonName"
          clearable
          size="small"
          placeholder="输入巡检人员"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入计划名称"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <span style="margin-right:8px;">计划任务日期</span>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleChangeTime($event)"
          style="width:350px"
          >
        </el-date-picker>
        <rrOperation />
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!-- 巡检详情 -->
    <el-dialog
      class="patrol-details"
      width="60%"
      title="查看巡检任务"
      :visible.sync="patrolDetails"
    >
      <el-form size="small" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="检查计划名称" prop="planName">
              <el-input v-model="form.planName" disabled/>
            </el-form-item> 
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务时间" prop="planStartTime">
              <el-date-picker
                v-model="form.planStartTime"
                type="datetime"
                disabled>
              </el-date-picker>
            </el-form-item> 
          </el-col>
          <el-col :span="8">
            <el-form-item label="检查人员" prop="patrolNames">
              <el-input v-model="form.patrolNames" disabled/>
            </el-form-item> 
          </el-col>
        </el-row>
      </el-form>
      <div class="check-point">
        <el-row v-for="(item,index) in taskCheckPoints" :key="index">
          <div class="check-point-content">
            <el-form size="small" label-width="120px">
              <div class="check-point-title">
                <div></div>
                <span>{{item.checkpointName}}</span> 
              </div>
              <el-row class="check-point-info">
                <el-col :span="5">
                  <el-form-item label="签到状态：" prop="checkInState" label-width="90px">
                    <el-tag v-if="item.checkInState" type="success">已签到</el-tag>
                    <el-tag v-if="!item.checkInState" type="info">未签到</el-tag>
                  </el-form-item> 
                </el-col>
                <el-col :span="9">
                  <el-form-item label="巡检开始时间：" prop="checkStartTime">
                    <el-date-picker
                      v-model="item.checkStartTime"
                      type="datetime"
                      width="130px"
                      disabled>
                    </el-date-picker>
                  </el-form-item> 
                </el-col>
                <el-col :span="10">
                  <el-form-item label="巡检完成时间：" prop="checkEndTime" label-width="140px">
                    <el-date-picker
                      v-model="item.checkEndTime"
                      type="datetime"
                      width="130px"
                      disabled>
                    </el-date-picker>
                  </el-form-item> 
                </el-col>
              </el-row>
            </el-form> 
          </div>
          <div class="check-point-table">
            <!-- item.objects -->
            <el-table
              :data="item.objects"
              :default-sort="{ prop:'id' }"
              row-key="key"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="巡检对象名称"
                width="100px"
                align="center">
              </el-table-column>
              <el-table-column
                prop="code"
                label="编号"
                width="60px"
                align="center">
              </el-table-column>

                <el-table-column label="检查项目">
                  <template slot-scope="scope">
                    <el-input type="textarea" v-for="(it,index) in scope.row.items" :key="index" v-model="it.checkpointItem.content" style="margin-bottom:6px;" disabled/>
                  </template>
                </el-table-column>
              <el-table-column label="检查标准">
                  <template slot-scope="scope">
                    <el-input type="textarea" v-for="(it,index) in scope.row.items" :key="index" v-model="it.checkpointItem.standard" style="margin-bottom:6px;" disabled/>
                  </template>
              </el-table-column>
              <el-table-column label="数据记录">
                  <template slot-scope="scope">
                    <el-input type="textarea" v-for="(it,index) in scope.row.items" :key="index"  style="margin-bottom:6px;" disabled/>
                  </template>
              </el-table-column>
              <el-table-column label="检查结果">
                <template slot-scope="scope">
                  <el-input type="textarea" v-for="(it,index) in scope.row.items" :key="index"  style="margin-bottom:6px;" disabled/>
                </template>
              </el-table-column>
              <el-table-column
                label="附件信息"
                width="280px">
                照片：
                <template slot-scope="scope">
                  <el-row v-for="(it,index) in scope.row.items" :key="index" style="margin-bottom:2px;">
                    <div class="block" v-for="(img,index) in it.attachment" :key="index">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="img.path"
                        fit="cover"></el-image>
                    </div>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="patrolDetails = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!--表单组件-->
    <!-- <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="950px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="标签编号" prop="code">
              <el-input v-model="form.code" />
            </el-form-item>
            <el-form-item label="标签名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="所属位置" prop="location">
              <el-input v-model="form.location" />
            </el-form-item>
            <el-form-item label="描述" prop="desc">
              <el-input v-model="form.desc" />
            </el-form-item>
            <el-form-item label="定位围栏" prop="rail">
              <el-input v-model="form.rail" :disabled="true"/>
            </el-form-item>
            <el-form-item label="NFC卡号" prop="NFCCode">
              <el-input v-model="form.NFCCode" />
            </el-form-item>
            <el-form-item label="RFID卡号" prop="RFIDCode">
              <el-input v-model="form.RFIDCode" />
            </el-form-item>
            <el-form-item label="QR编码" prop="QRCode">
              <el-input v-model="form.QRCode" />
            </el-form-item>
            <el-form-item label="Bar编码" prop="BarCode">
              <el-input v-model="form.BarCode" />
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <relative-map
              v-if="crudCU"
              ref="relativeMap"
              v-model="mapData"
              :buildFloor="buildFloor"
              drawMode="Polygon"
            />
        </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog> -->
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="item in patrolTaskTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      ></el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'person:edit', 'person:del'])"
        label="操作"
        width="140px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- <udOperation :data="scope.row" :permission="permission" /> -->
          <el-button type="primary" size="mini" :data="scope.row" @click="taskView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudPatrolTask from '@/api/patrolManage/patrolTask'
import { getOptions } from '@/api/system/public'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import { patrolTaskTableOptions } from '../tableConfig'
import { getToken } from '@/utils/auth'
import { initData } from '@/api/data'
import RelativeMap from '@/components/RelativeMap'

const defaultForm = {
  //巡检记录
  id: null,
  planId: 0,
  planName: "string",
  planStartTime:'',
  actualStartTime:'',
  actualEndTime:'',
  status:1,
  statusStr: "string",
  timeCost: 0,
  timeCostStr: "string",
  patrolResult: true,
  patrolResultStr: "string",
  //异常状态
  exceptionReason: "string",
  exceptionHandleStatus: true,
  exceptionHandleStatusStr: "string",
  //巡检完成人员
  patrolPersonId: 0,
  patrolPersonName: "string",
  //可巡检人员列表
  personIds: [],
  personNames: [],

  //关联对象与项目
}

export default {
  name: 'PatrolTask',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker,RelativeMap },
  cruds() {
    return CRUD({
      title: '巡检任务',
      url: 'patrol/task/getList',
      // url: 'system/person/getPageListJson',
      props:{ pageIndex: 1, pageSize: 10, status: 1 },
      listOrder: [],
      crudMethod: { ...crudPatrolTask },
      optShow: { add: false, edit: false, del: false, reset: true},
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  data() {
    return {
      mapData: [],
      buildFloor: {},
      patrolTaskTableOptions,
      viewLoading: false,
      permission: {
        add: ['admin', 'patrolTask : add'],
        edit: ['admin', 'patrolTask : edit'],
        del: ['admin', 'patrolTask : del'],
      },
      // rules: {
      //   code: [{ required: true, message: '请输入标签编号', trigger: 'blur' }],
      //   name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
      //   location: [{ required: true, message: '请输入所属位置', trigger: 'blur' }],
      // },
      token: getToken() ?? '',
      patrolDetails:false,
      imgList:[],
      timeRange:[],
      checkItem:[
        {
          id: '12987122',
          objectId:'1',objectName: '王小虎',
          content: '234',standard: '3.2',dataType:'3',symbol: '',
          unit: '', lowerLimit: '',upperLimit:'',
          photoGraph:false,
          dataRecord: 1,
          result:17,
          att:'sdwddd'
        }, 
        {
          id: '12987123',
          objectId:'3',objectName: '王老虎',
          content: '231234',standard: '2.1',dataType:'2',symbol: '',
          unit: '',lowerLimit: '',upperLimit:'',
          photoGraph:true,dataRecord: 1,
          result:9,
          att:'sdwddd',
        },
        { 
          id: '12987125',
          objectId:'4',objectName: '王大虎',
          content: '2134',standard: '3.1',dataType: '4',symbol: '',
          unit: '', lowerLimit: '', upperLimit:'',
          photoGraph:true, dataRecord: 1,
          result:12,
          att:'sdwddd',
        },
        { 
          id: '12987124',
          objectId:'2',objectName: '王大虎',
          content: '2134',standard: '3.1',dataType: '1',symbol: '',
          unit: '', lowerLimit: '', upperLimit:'',
          photoGraph:true,dataRecord: 1,
          result:10,
          att:'sdwddd',
        }
      ],
      taskCheckPoints:[
        {
        id: 0,
        token: "string",
        taskId: 0,
        checkpointId: 0,
        checkpointCode: "string",
        checkpointName: "string",
        checkpoint: {
          id: 0,
          token: "string",
          code: "string",
          name: "string",
          departmentId: 0,
          departmentName: "string",
          department: {
            id: 0,
            token: "string",
            parentId: 0,
            departmentName: "string",
            telephone: "string",
            fax: "string",
            email: "string",
            principalId: 0,
            departmentSort: 0,
            remark: "string",
            personCount_All: 0,
            personCount: 0,
            personCount_Remaining: 0,
            ids: [
              0
            ],
            principalName: "string",
            children: [
              "string"
            ],
            iChildren: [
              {
                id: 0,
                parentId: 0,
                iChildren: [
                  "string"
                ]
              }
            ],
            hasChildren: true,
            leaf: true,
            label: "string"
          },
          areaId: 0,
          areaName: "string",
          area: {
            id: 0,
            token: "string",
            buildId: "string",
            buildName: "string",
            areaName: "string",
            remark: "string",
            riskLevel: "string",
            riskLevelStr: "string",
            enableLog: true,
            enableLogStr: "string",
            crossAlarm: true,
            overstayAlarm: true,
            overstayTime: 0,
            overmanAlarm: true,
            overmanCount: 0,
            overmanTime: 0,
            undermanAlarm: true,
            undermanCount: 0,
            undermanTime: 0,
            actionlessAlarm: true,
            actionlessTime: 0,
            effectiveTimeJson: "string",
            rails: [
              {
                id: 0,
                token: "string",
                buildId: "string",
                buildName: "string",
                floorNo: 0,
                floorStr: "string",
                railName: "string",
                remark: "string",
                solidRail: true,
                enableLog: true,
                enableLogStr: "string",
                crossAlarm: true,
                overstayAlarm: true,
                overstayTime: 0,
                overmanAlarm: true,
                overmanCount: 0,
                overmanTime: 0,
                undermanAlarm: true,
                undermanCount: 0,
                undermanTime: 0,
                actionlessAlarm: true,
                actionlessTime: 0,
                effectiveTimeJson: "string",
                points: [
                  {
                    "x": 0,
                    "y": 0
                  }
                ],
                effectiveTimes: [
                  {
                    startTime: "string",
                    endTime: "string",
                    weekday: [
                      0
                    ]
                  }
                ]
              }
            ],
            railIds: [
              0
            ],
            effectiveTimes: [
              {
                startTime: "string",
                endTime: "string",
                weekday: [
                  0
                ]
              }
            ]
          },
          areaExtent: [
            {
              buildId: "string",
              floor: [
                0
              ],
              points: [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            }
          ],
          checkInMethod: [
            1
          ],
          checkInMethodStr: [
            "string"
          ],
          labelId: 0,
          labelName: "string",
          label: {
            id: 0,
            token: "string",
            code: "string",
            name: "string",
            description: "string",
            buildId: "string",
            buildName: "string",
            floorNo: 0,
            floorStr: "string",
            extent: {
              buildId: "string",
              floor: [
                0
              ],
              points: [
                {
                  x: 0,
                  y: 0
                }
              ]
            },
            nfcCode: "string",
            rfidCode: "string",
            qrCode: "string",
            barCode: "string"
          },
          oneKeyFinish: true,
          oneKeyFinishStr: "string",
          objects: [
            {
              sort: 0,
              objectId: 0,
              code: "string",
              name: "string",
              type: 0,
              typeStr: "string",
              buildId: "string",
              buildName: "string",
              floorNo: 0,
              floorStr: "string",
              areaId: 0,
              areaName: "string",
              items: [
                {
                  id: 0,
                  token: "string",
                  checkpointId: 0,
                  objectId: 0,
                  content: "string",
                  standard: "string",
                  dataType: 1,
                  unit: "string",
                  numberJudgment: [
                    {
                      judgementConditions: [
                        {
                          logicalOperator: 1,
                          comparisonOperator: 1,
                          comparisonValue: 0
                        }
                      ]
                    }
                  ],
                  statusOptionId: 0,
                  statusOptionName: [
                    "string"
                  ],
                  statusOption: [
                    "string"
                  ],
                  normalStatusOptionId: 0,
                  forcePhotograph: true,
                  tag: "string"
                }
              ]
            }
          ],
          objectCount: 0,
          itemCount: 0
        },
        patrolPersonId: 0,
        patrolPersonName: "string",
        patrolPerson: {
          id: 0,
          token: "string",
          name: "string",
          workNo: "string",
          type: 0,
          typeName: "string",
          iconPath: "string",
          department: 0,
          departmentName: "string",
          position: 0,
          positionName: "string",
          sex: "string",
          sexName: "string",
          labelId: 0,
          labelMAC: "string",
          photoPath: "string",
          oneKeyAlarm: true,
          oneKeyAlarmStr: "string",
          entryTime: "2022-07-21T13:00:13.753Z",
          birthday: "2022-07-21T13:00:13.753Z",
          age: 0,
          politicalStatus: "string",
          politicalStatusStr: "string",
          ethnicity: "string",
          ethnicityStr: "string",
          idType: "string",
          idTypeStr: "string",
          idNumber: "string",
          telephone: "string",
          officePhone: "string",
          email: "string",
          healthCondition: "string",
          healthConditionStr: "string",
          education: "string",
          educationStr: "string",
          speciality: "string",
          registeredPermanent: "string",
          contactAddress: "string",
          zipCode: "string",
          startWorkTime: "2022-07-21T13:00:13.753Z",
          jobTitle: "string",
          duty: "string",
          dutyOfWork: "string",
          workExperience: "string",
          positioningOnline: true,
          positioningOnlineStr: "string",
          commOnline: true,
          commOnlineStr: "string",
          personAlarmConfigList: [
            {
              railId: 0,
              railName: "string",
              areaId: 0,
              areaName: "string",
              crossInAlarm: true,
              crossOutAlarm: true,
              overstayAlarm: true,
              actionlessAlarm: true
            }
          ],
          locationData: {
            buildId: "string",
            floorNo: 0,
            labelId: 0,
            time: 0,
            x: 0,
            y: 0,
            xMillimeter: 0,
            yMillimeter: 0,
            status: 0
          },
          onOneKeyAlarm: true,
          onCrossInAlarm: true,
          onCrossOutAlarm: true,
          onOverstayAlarm: true,
          onActionlessAlarm: true,
          onRailAlarm: [
            0
          ],
          onAreaAlarm: [
            0
          ]
        },
        checkStartTime: "2022-07-21T13:00:13.753Z",
        checkEndTime: "2022-07-21T13:00:13.753Z",
        reportWay: 1,
        reportWayStr: "string",
        checkResult: 0,
        checkResultStr: "string",
        exceptionCount: 0,
        checkInType: [
          1
        ],
        checkInTypeStr: [
          "string"
        ],
        checkInState: true,
        checkInStateStr: "string",
        checkInLocation: {
          x: 0,
          y: 0,
          buildId: "string",
          floorNo: 0
        },
        checkInNFCCode: "string",
        checkInRFIDCode: "string",
        checkInQRCode: "string",
        checkInBarCode: "string",
        objects: [
          {
            sort: 0,
            objectId: 0,
            code: "string",
            name: "string",
            buildId: "string",
            buildName: "string",
            floorNo: 0,
            floorStr: "string",
            areaId: 0,
            items: [
              {
                id: 0,
                token: "string",
                taskId: 0,
                taskCheckpointId: 0,
                objectId: 0,
                checkpointItemId: 0,
                checkpointItem: {
                  id: 0,
                  token: "string",
                  checkpointId: 0,
                  objectId: 0,
                  content: "string",
                  standard: "string",
                  dataType: 1,
                  unit: "string",
                  numberJudgment: [
                    {
                      judgementConditions: [
                        {
                          logicalOperator: 1,
                          comparisonOperator: 1,
                          comparisonValue: 0
                        }
                      ]
                    }
                  ],
                  statusOptionId: 0,
                  statusOptionName: [
                    "string"
                  ],
                  statusOption: [
                    "string"
                  ],
                  normalStatusOptionId: 0,
                  forcePhotograph: true,
                  tag: "string"
                },
                checkData: "string",
                checkResult: 0,
                checkResultStr: "string",
                attachment: [
                  {
                    type: 1,
                    path: "string"
                  }
                ],
                exceptionHandlePersonId: 0,
                exceptionHandlePersonName: "string",
                exceptionHandlePerson: {
                  id: 0,
                  token: "string",
                  name: "string",
                  workNo: "string",
                  type: 0,
                  typeName: "string",
                  iconPath: "string",
                  department: 0,
                  departmentName: "string",
                  position: 0,
                  positionName: "string",
                  sex: "string",
                  sexName: "string",
                  labelId: 0,
                  labelMAC: "string",
                  photoPath: "string",
                  oneKeyAlarm: true,
                  oneKeyAlarmStr: "string",
                  entryTime: "2022-07-21T13:00:13.753Z",
                  birthday: "2022-07-21T13:00:13.753Z",
                  age: 0,
                  politicalStatus: "string",
                  politicalStatusStr: "string",
                  ethnicity: "string",
                  ethnicityStr: "string",
                  idType: "string",
                  idTypeStr: "string",
                  idNumber: "string",
                  telephone: "string",
                  officePhone: "string",
                  email: "string",
                  healthCondition: "string",
                  healthConditionStr: "string",
                  education: "string",
                  educationStr: "string",
                  speciality: "string",
                  registeredPermanent: "string",
                  contactAddress: "string",
                  zipCode: "string",
                  startWorkTime: "2022-07-21T13:00:13.754Z",
                  jobTitle: "string",
                  duty: "string",
                  dutyOfWork: "string",
                  workExperience: "string",
                  positioningOnline: true,
                  positioningOnlineStr: "string",
                  commOnline: true,
                  commOnlineStr: "string",
                  personAlarmConfigList: [
                    {
                      railId: 0,
                      railName: "string",
                      areaId: 0,
                      areaName: "string",
                      crossInAlarm: true,
                      crossOutAlarm: true,
                      overstayAlarm: true,
                      actionlessAlarm: true
                    }
                  ],
                  locationData: {
                    buildId: "string",
                    floorNo: 0,
                    labelId: 0,
                    time: 0,
                    x: 0,
                    y: 0,
                    xMillimeter: 0,
                    yMillimeter: 0,
                    status: 0
                  },
                  onOneKeyAlarm: true,
                  onCrossInAlarm: true,
                  onCrossOutAlarm: true,
                  onOverstayAlarm: true,
                  onActionlessAlarm: true,
                  onRailAlarm: [
                    0
                  ],
                  onAreaAlarm: [
                    0
                  ]
                },
                exceptionHandleStatus: 0,
                exceptionHandleStatusStr: "string",
                exceptionType: 1,
                exceptionTypeStr: "string",
                exceptPictureBefore: [
                  "string"
                ],
                exceptPictureAfter: [
                  "string"
                ],
                exceptionRemark: "string",
                remark: "string"
              }
            ]
          }
        ]

        }
      ]
    }
  },
  created() {
    // this.getOptions()
  },
  methods: {
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
    taskView(row){
      this.patrolDetails = true
      this.form = row
      this.getTaskCheckPointOptions(row.id)
    },
    async getTaskCheckPointOptions(id){
      try {
          let res = await initData('patrol/taskCheckpoint/getList',{taskId:id,token:this.token})
          if (res.code === 20000) this.taskCheckPoints = res.data.content
          console.log(res);
        } catch (error) {
          console.log(error)
        }
    },
    handleChangeTime(val, index) {
      this.query.startTime = val[0]
      this.query.endTime = val[1]
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .point-info{margin-left: 10px;}
::v-deep .point-info-normal {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color: blue;color: white;}
::v-deep .point-info-abnormal {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color:orange;color: white;}
::v-deep .point-info-loss {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color: gray;color: white;}
::v-deep .point-info-order {width: 20px; height: 17px;margin: 2px 2px 0 0;background: #f2f2f2;text-align: center;border-radius: 2px;color:gray;}
::v-deep .check-point {padding: 10px;border-radius: 3px;}
::v-deep .check-point-title {display: flex;margin-left: 6px;margin-bottom: 10px;}
::v-deep .check-point-title div{width: 4px; height: 17px;background: blue;margin-right: 8px;}
::v-deep .check-point-title span{font-size: 16px;font-weight: bold;}
</style>
