<template>
  <div>
    <el-dialog
      title="故障记录"
      :visible.sync="dangerDetailOpen"
      width="1400px"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
    >
      <div class="dlg-wrapper">
        <div class="steps">
          <MySteps
            :stepsData="stepsArr"
            :active="stepsNumData[dangerDetailInfo.status] || 0"
          />
        </div>

        <el-row>
          <div class="t">故障信息</div>
          <el-row class="container flex bb">
            <el-col :span="16">
              <el-form label-width="110px" class="el-table">
                <el-col :span="12">
                  <el-form-item label="故障标题">
                    <span>{{ dangerDetailInfo.title }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="故障状态">
                    <span v-if="dangerDetailInfo.status == 0">待处理</span>
                    <span v-if="dangerDetailInfo.status == 1">拒绝整改</span>
                    <span v-if="dangerDetailInfo.status == 2">待复核</span>
                    <span v-if="dangerDetailInfo.status == 3">已处理</span>
                    <span v-if="dangerDetailInfo.status == 4">已归档</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="故障来源">
                    <span>{{ $parent.typeFormatter(dangerDetailInfo) }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="用户">
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="故障级别">
                    <span v-if="dangerDetailInfo.level == 1">重大</span>
                    <span v-if="dangerDetailInfo.level == 2">一般</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上报时间">
                    {{
                    parseTime(
                    dangerDetailInfo.createTime,
                    "{y}-{m}-{d} {h}:{i}:{s}"
                    )
                    }}
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="故障内容">
                  <span v-if="dangerDetailInfo.beforeContent">{{
                    dangerDetailInfo.beforeContent
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上报人">
                    {{ dangerDetailInfo.reportName }}
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="故障地址">
                  <span v-if="dangerDetailInfo.address">{{
                    dangerDetailInfo.address
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="责任归属">
                    <span v-if="dangerDetailInfo.flag == 1">安全管理部</span>
                    <span v-else-if="dangerDetailInfo.flag == 2">客服运营部</span>
                    <span v-else-if="dangerDetailInfo.flag == 3">生产运营部</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改前图片" prop="beforeImg">
                    <div>
                      <MyImage
                        v-if="dangerDetailInfo.beforeImg"
                        :src="dangerDetailInfo.beforeImg.split(',')[0]"
                        :previewSrcList="dangerDetailInfo.beforeImg.split(',')"
                      />
                      <div class="error" v-else>暂无图片</div>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改前视频" prop="beforeVideo">
                  <span v-if="dangerDetailInfo.beforeVideo">
                    <video
                      v-for="videoInfo in dangerDetailInfo.beforeVideo.split(
                        ','
                      )"
                      :key="videoInfo"
                      type="video/mp4"
                      controls="controls"
                      :src="videoInfo"
                      class="upload-video"
                    />
                  </span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改期限">
                  <span v-if="dangerDetailInfo.endTime">{{
                    dangerDetailInfo.endTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="整改方式">
                    <span v-if="dangerDetailInfo.dealMethod == '1'">用户自行整改</span>
                    <span v-else-if="dangerDetailInfo.dealMethod == '2'">用户出资公司整改</span>
                    <span v-else-if="dangerDetailInfo.dealMethod == '3'">通知厂家上门维修检查</span>
                    <span v-else-if="dangerDetailInfo.dealMethod == '4'">公司出资整改</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="备注">
                  <span v-if="dangerDetailInfo.remark">{{
                    dangerDetailInfo.remark
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
            <el-col :span="8">
              <div id="dangerMap"></div>
              <div class="map-bottom">故障上报位置</div>
            </el-col>
          </el-row>

          <div class="t" v-if="dangerDetailInfo.tTaskInspect">安检信息</div>
          <el-row class="container flex bb" v-if="dangerDetailInfo.tTaskInspect">
            <el-form label-width="110px" class="el-table">
              <el-col style="height: auto" :span="8">
                <el-col :span="24">
                  <el-form-item label="安检时间">
                    <span v-if="dangerDetailInfo.tTaskInspect.createTime">{{ dangerDetailInfo.tTaskInspect.createTime}}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="安检人">
                  <span v-if="dangerDetailInfo.tTaskInspect.username">{{
                    dangerDetailInfo.tTaskInspect.username
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :span="16">
                <el-col :span="24">
                  <el-form-item label="签字状态">
                    <span v-if="dangerDetailInfo.tTaskInspect.sign == 0">未签字</span>
                    <span v-else-if="dangerDetailInfo.tTaskInspect.sign == 1">已签字</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="操作">
                    <el-button
                      type="text"
                      @click="handleInspect(dangerDetailInfo.tTaskInspect)"
                    >安检单</el-button>
                    <el-button
                      type="text"
                      @click="handleCover(dangerDetailInfo.tTaskInspect)"
                    >图片</el-button>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-form>
          </el-row>

          <div class="t">整改信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col style="height: auto" :span="8">
                <el-col :span="24">
                  <el-form-item label="整改内容">
                  <span v-if="dangerDetailInfo.afterContent">{{
                    dangerDetailInfo.afterContent
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="整改人">
                  <span v-if="dangerDetailInfo.reformName">{{
                    dangerDetailInfo.reformName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                   <el-form-item label="整改期限">
                     <span v-if="dangerDetailInfo.endTime">{{
                       dangerDetailInfo.endTime
                     }}</span>
                     <span v-else>-</span>
                   </el-form-item>
                 </el-col>-->

                <el-col :span="24">
                  <el-form-item label="整改时间">
                  <span v-if="dangerDetailInfo.reformTime">{{
                    dangerDetailInfo.reformTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :span="16">
                <el-col :span="24">
                  <el-form-item label="整改后图片">
                    <div>
                      <MyImage
                        v-if="dangerDetailInfo.afterImg"
                        :src="dangerDetailInfo.afterImg.split(',')[0]"
                        :previewSrcList="dangerDetailInfo.afterImg.split(',')"
                      />
                      <div class="error" v-else>暂无图片</div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-form>
          </el-row>

          <div class="t">复核信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col style="height: auto" :span="8">
                <el-col :span="24">
                  <el-form-item label="复核人">
                  <span v-if="dangerDetailInfo.checkName">{{
                    dangerDetailInfo.checkName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="复核时间">
                  <span v-if="dangerDetailInfo.checkTime">{{
                    dangerDetailInfo.checkTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="复核备注">
                  <span v-if="dangerDetailInfo.checkRemark">{{
                    dangerDetailInfo.checkRemark
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :span="16">
                <el-col :span="24">
                  <el-form-item label="复核图片" prop="checkImg">
                    <div>
                      <MyImage
                        v-if="dangerDetailInfo.checkImg"
                        :src="dangerDetailInfo.checkImg.split(',')[0]"
                        :previewSrcList="dangerDetailInfo.checkImg.split(',')"
                      />
                      <div class="error" v-else>暂无图片</div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-col>

            </el-form>
          </el-row>

          <div class="t">归档信息</div>
          <el-row class="container flex bb">
            <el-form label-width="110px" class="el-table">
              <el-col :span="24">
                <el-col :span="4">
                  <el-form-item label="归档人">
                  <span v-if="dangerDetailInfo.fileName">{{
                    dangerDetailInfo.fileName
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="归档时间">
                  <span v-if="dangerDetailInfo.fileTime">{{
                    dangerDetailInfo.fileTime
                  }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>

                <!--<el-col :span="14">
                  <el-form-item label="复核备注">
                    <span v-if="dangerDetailInfo.checkRemark">{{
                      dangerDetailInfo.checkRemark
                    }}</span>
                    <span v-else>-</span>
                  </el-form-item>
                </el-col>-->
              </el-col>
            </el-form>
          </el-row>

        </el-row>
        <!-- <el-row>
        <el-col :span="14">
          <el-form label-width="110px" class="dangerDetailInfo">
            <div style="font-size: 20px; margin: 7px 0px 7px 0px">故障信息</div>

            <el-row>
              <el-col :span="12">
                <el-form-item label="故障标题">
                  <span>{{ dangerDetailInfo.title }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="故障状态">
                  <span v-if="dangerDetailInfo.status == 0">待处理</span>
                  <span v-if="dangerDetailInfo.status == 1">拒绝整改</span>
                  <span v-if="dangerDetailInfo.status == 2">待复核</span>
                  <span v-if="dangerDetailInfo.status == 3">已处理</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="故障来源">
                  <span>{{ $parent.typeFormatter(dangerDetailInfo) }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="用户">
                  <span v-if="dangerDetailInfo.receiveName">{{
                    dangerDetailInfo.receiveName
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="故障级别">
                  <span v-if="dangerDetailInfo.level == 1">一级</span>
                  <span v-if="dangerDetailInfo.level == 2">二级</span>
                  <span v-if="dangerDetailInfo.level == 3">三级</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="故障责任人">
                  <span v-if="dangerDetailInfo.flag == 1">用户自己</span>
                  <span v-else-if="dangerDetailInfo.flag == 2">公司客服部</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="上报人">
                  {{ dangerDetailInfo.reportName }}
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上报时间">
                  {{
                    parseTime(
                      dangerDetailInfo.createTime,
                      "{y}-{m}-{d} {h}:{i}:{s}"
                    )
                  }}
                </el-form-item>
              </el-col>
            </el-row>


              <el-col :span="24">
                <el-form-item label="故障地址">
                  <span v-if="dangerDetailInfo.address">{{
                    dangerDetailInfo.address
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="24">
                <el-form-item label="故障内容">
                  <span v-if="dangerDetailInfo.beforeContent">{{
                    dangerDetailInfo.beforeContent
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="24">
                <el-form-item label="故障备注">
                  <span v-if="dangerDetailInfo.remark">{{
                    dangerDetailInfo.remark
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="24">
                <el-form-item label="故障整改前图片" prop="beforeImg">
                  <span v-if="dangerDetailInfo.beforeImg">
                    <el-image
                      v-for="imageInfo in dangerDetailInfo.beforeImg.split(',')"
                      :src="imageInfo"
                      :preview-src-list="[imageInfo]"
                      :z-index="9999"
                      style="width: 99px; height: 100px; margin-right: 10px"
                    />
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="24">
                <el-form-item label="故障整改前视频" prop="beforeVideo">
                  <span v-if="dangerDetailInfo.beforeVideo">
                    <video
                      v-for="videoInfo in dangerDetailInfo.beforeVideo.split(',')"
                      type="video/mp4"
                      controls="controls"
                      :src="videoInfo"
                      class="upload-video"
                    />
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>


            <div style="font-size: 20px; margin: 7px 0px 7px 0px">整改信息</div>


              <el-col :span="12">
                <el-form-item label="整改人">
                  <span v-if="dangerDetailInfo.reformName">{{
                    dangerDetailInfo.reformName
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整改期限">
                  <span v-if="dangerDetailInfo.endTime">{{
                    dangerDetailInfo.endTime
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="12">
                <el-form-item label="整改时间">
                  <span v-if="dangerDetailInfo.reformTime">{{
                    dangerDetailInfo.reformTime
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>



              <el-col :span="24">
                <el-form-item label="整改内容">
                  <span v-if="dangerDetailInfo.afterContent">{{
                    dangerDetailInfo.afterContent
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>


            <el-row>
              <el-col :span="24">
                <el-form-item label="故障整改后图片">
                  <span v-if="dangerDetailInfo.afterImg">
                    <el-image
                      v-for="afterImageInfo in dangerDetailInfo.afterImg.split(
                        ','
                      )"
                      :src="afterImageInfo"
                      :preview-src-list="[afterImageInfo]"
                      :z-index="9999"
                      style="width: 99px; height: 100px; margin-right: 10px"
                    />
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>

            <div style="font-size: 20px; margin: 7px 0px 7px 0px">复核信息</div>

            <el-row>
              <el-col :span="12">
                <el-form-item label="复核人">
                  <span v-if="dangerDetailInfo.checkName">{{
                    dangerDetailInfo.checkName
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="复核时间">
                  <span v-if="dangerDetailInfo.checkTime">{{
                    dangerDetailInfo.checkTime
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="复核备注">
                  <span v-if="dangerDetailInfo.checkRemark">{{
                    dangerDetailInfo.checkRemark
                  }}</span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>

            <div style="font-size: 20px; margin: 7px 0px 7px 0px">变更信息</div>
            <el-table :data="dangerStatusChangeList">
              <el-table-column
                label="时间"
                align="center"
                prop="optime"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="状态"
                align="center"
                prop="status"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">待处理</span>
                  <span v-if="scope.row.status == 1">拒绝整改</span>
                  <span v-if="scope.row.status == 2">待复核</span>
                  <span v-if="scope.row.status == 3">已处理</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作人"
                align="center"
                prop="operator"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </el-form>
        </el-col>

        <el-col :span="10">
          <div
            id="dangerMap"
            style="width: 100%; height: 500px; border: 1px solid"
          ></div>
        </el-col>
      </el-row> -->
      </div>
    </el-dialog>

    <!-- 表封照片 -->
    <CoverPhotoView ref="cover" />
    <!-- 安检表 -->
    <component ref="inspectDetail" :is="inspectDetailInfo"/>
  </div>
</template>

<script>
import { getDanger } from "@/api/checktask/danger";
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import { dangerStatusList } from "@/api/checktask/dangerStatus";
import MySteps from "@/components/MySteps";
import MyImage from "@/components/MyImage/index.vue";
import CoverPhotoView from "@/views/checktask/task/components/CoverPhotoView";
import { getUser } from "@/api/baseinfo/user";
import { getBusiness } from "@/api/baseinfo/businessInfo";
import CanyinRecordDetail from "@/views/checktask/inspect/jumInspect/cyRecordDetail";
import IndustryRecordDetail from "@/views/checktask/task/components/IndustryRecordDetail";
import { getTask } from "@/api/checktask/task";
export default {
  name: "fault-detail",
  components: {
    MySteps,
    MyImage,
    CoverPhotoView,
    CanyinRecordDetail,
    IndustryRecordDetail
  },
  data() {
    return {
      dangerDetailOpen: false,
      dangerDetailInfo: {
        beforeImg: "",
        beforeVideo: "",
        afterImg: "",
      },
      stepsArr: [
        {
          title: "发现故障",
          a: ["安检员", "-"],
          b: ["上班时间", "-"],
        },
        {
          title: "已整改待复核",
          a: ["整改人", "-"],
          b: ["整改时间", "-"],
        },
        {
          title: "已处理",
          a: ["复核人", "-"],
          b: ["复核时间", "-"],
        },
        {
          title: "已归档",
          a: ["归档人", "-"],
          b: ["归档时间", "-"],
        }
      ],
      stepsNumData: {
        0: 1,
        2: 2,
        3: 3,
        4: 4
      },
      dangerStatusChangeList: [],
      inspectDetailInfo: null
    };
  },
  methods: {
    //故障详情
    handleDangerDetail(dangerId) {
      getDanger(dangerId).then((response) => {
        this.dangerDetailInfo = response.data;
        console.log("fsfsfdsfds---", this.dangerDetailInfo);
        this.dangerDetailOpen = true;
        this.$set(this.stepsArr[0].a, 1, this.dangerDetailInfo.reportName);
        this.$set(this.stepsArr[0].b, 1, this.dangerDetailInfo.createTime);
        this.$set(this.stepsArr[1].a, 1, this.dangerDetailInfo.reformName);
        this.$set(this.stepsArr[1].b, 1, this.dangerDetailInfo.reformTime);
        this.$set(this.stepsArr[2].a, 1, this.dangerDetailInfo.checkName);
        this.$set(this.stepsArr[2].b, 1, this.dangerDetailInfo.checkTime);
        this.$set(this.stepsArr[3].a, 1, this.dangerDetailInfo.fileName);
        this.$set(this.stepsArr[3].b, 1, this.dangerDetailInfo.fileTime);
        this.initMap();
        this.statusChangeInfo(dangerId);
      });
    },
    //地图初始化
    initMap() {
      this.$nextTick(() => {
        const path = eval(this.systemSetting.map_center);
        this.detailGaoMap = new EditorMap(
          "dangerMap",
          {
            center: path,
            zoom: 12,
          },
          this
        );
        if (this.dangerDetailInfo.longitude) {
          this.addLocation({
            longitude: this.dangerDetailInfo.longitude,
            latitude: this.dangerDetailInfo.latitude,
            nickName: this.dangerDetailInfo.title,
            iconType: "dangerDetail",
          });
        }
      });
    },
    //位置上图
    addLocation(data) {
      this.detailGaoMap.allDevice["dangerDetail"]?.forEach((item) => {
        this.detailGaoMap.map.remove(item);
      });
      this.detailGaoMap.control = 2;
      this.detailGaoMap.addDevice(data, null);
      this.detailGaoMap.map.panTo([data.longitude, data.latitude]);
    },
    statusChangeInfo(dangerId) {
      dangerStatusList({ dangerId: dangerId }).then((res) => {
        if (res.code == 200 && res.data) {
          this.dangerStatusChangeList = res.data;
        }
      });
    },
    //表封照片
    handleCover(row) {
      if (!row.meterImg) return this.$message.error("未查询到图片");
      this.$refs.cover.viewCoverPhoto(row.meterImg);
    },
    handleInspect(row){
      if (!row.content) return this.$message.error("未查到安检信息！");
      //居民和商户
      if(row.type == 1 || row.type == 2){
        this.inspectDetailInfo = CanyinRecordDetail;
        this.$nextTick(() =>{
          if (row.type == 1) {
          this.getUserInfo(row.receiveId);
        }else{
          this.getBusinessInfo(row.receiveId);
        }
        this.$refs.inspectDetail.open = true;
        this.$refs.inspectDetail.checkType = row.type;
        this.$refs.inspectDetail.map = row;
        this.$refs.inspectDetail.jsondata = JSON.parse(row.content);
      })
      }
      if(row.type == 3){
        this.inspectDetailInfo = IndustryRecordDetail;
        this.$nextTick(() =>{
          getTask(row.taskId).then(res =>{
          this.$refs.inspectDetail.checkType = res.data.checkType;
        this.$refs.inspectDetail.inspectInfo = row;
        this.$refs.inspectDetail.open = true;
      })
      })
      }
    },
    getUserInfo(userId) {
      getUser(userId).then((res) => {
          this.$refs.inspectDetail.detailInfo = res.data;
      });
    },
    getBusinessInfo(businessId) {
      getBusiness(businessId).then((res) => {
        this.$refs.inspectDetail.device = JSON.parse(res.data.device);
        this.$refs.inspectDetail.detailInfo = res.data;
      });
    },
  },
  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>

<style scoped lang="scss">
.dangerDetailInfo {
  height: 500px;
  overflow-y: auto;
  padding-right: 10px;
  &::-webkit-scrollbar {
    width: 3px;
    background: #dfe4ed;
    position: absolute;
    top: 0;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    // border-radius: 10px;
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #cccccc;
    border-radius: 5px;
  }
}

.upload-video {
  object-fit: fill;
  height: 180px;
  width: 208px;
  margin-right: 10px;
}

.dlg-wrapper {
  height: 700px;
  overflow: auto;
  padding-right: 10px;
}
.steps {
  padding: 15px 0;
}
.top-title {
  text-align: center;
  font-size: 20px;
}
.container {
  background: #f9f9f9;
  margin-bottom: 32px;
  padding: 10px 10px;
  .el-form-item {
    margin-bottom: 12px;
  }
}
.t {
  font-size: 14px;
  margin: 7px 0px 7px 0px;
}

#dangerMap {
  width: 340px;
  height: 305px;
  margin-bottom: 5px;
}
.map-bottom {
  width: 340px;
  text-align: center;
  font-size: 14px;
  color: #606266;
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  // background: #f5f7fa;
  background: #ffffff;
}
.el-table {
  width: 100%;
  background-color: #f9f9f9;
}
</style>
