<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div style="padding: 15px; background: #fff; margin-top: -15px">
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap">
          <!-- <el-select
            v-model="queryParams.railwayCode"
            placeholder="请选择线路"
            style="width: 220px; padding: 0 10px"
            clearable
          >
            <el-option
              v-for="item in lineWayData"
              :key="item.railwayCode"
              :label="item.railwayName"
              :value="item.railwayCode"
            />
          </el-select> -->
          <el-input placeholder="请输入摄像机编码" style="width: 220px;padding: 0 10px" v-model="queryParams.cameraCode"></el-input>
          <el-input placeholder="请输入测点名称" style="width: 220px;padding: 0 10px" v-model="queryParams.stationName"></el-input>
          <el-select
            v-model="queryParams.lineDir"
            placeholder="请选择行别"
            style="width: 220px; padding: 0 10px"
            clearable
          >
            <el-option
              v-for="item in lineDir"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
          <div :span="12">
            <div style="display: flex; align-items: center; margin-top: 2px">
              <el-input
                v-model="queryParams.beginMileBD"
                placeholder="请输入起始里程"
                style="width: 220px; padding: 0 10px; position: relative"
                clearable
              >
                <template slot="append">km</template></el-input
              >
              <div
                style="
                  width: 5px;
                  height: 1px;
                  background-color: #888;
                  position: absolute;
                  left: 880px;
                "
              />
              <el-input
                v-model="queryParams.endMileBD"
                placeholder="请输入结束里程"
                style="width: 220px; padding: 0 10px"
                clearable
              >
                <template slot="append">km</template></el-input
              >
            </div>
          </div>
          <el-select
            v-model="queryParams.enableOrNot"
            placeholder="摄像机启用状态"
            style="width: 220px; padding: 0 10px"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div
            :span="6"
            justify="end"
            style="display: flex; margin-top: 2px"
            type="flex"
          >
            <div
              class="search_btn"
              style="margin-left: 10px; cursor: pointer"
              @click="handleQuery"
            >
              查询
            </div>
            <div
              class="reset_btn"
              style="margin-left: 10px; cursor: pointer"
              @click="reset"
            >
              重置
            </div>
          </div>
        </el-row>
      </div>

      <div style="padding: 20px; background: #fff; margin-top: 15px">
        <div class="cardHeadr">
          <div style="font-size: 18px; float: right; display: flex">
            <div class="addBtn" @click="addEquipment">
              <span class="icon font_family">&#xe604;</span>
              新增
            </div>
            <div class="addBtn" @click="delCameraList">
              <span class="icon font_family">&#xe607;</span>
              批量删除
            </div>
            <div class="addBtn" @click="importLoadIn">
              <span class="icon font_family">&#xe606;</span>
              导入
            </div>
            <div class="addBtn" @click="uploadOut">
              <span class="icon font_family">&#xe605;</span>
              导出
            </div>
            <div class="addBtn" @click="downloadOut">
              <span class="icon font_family">&#xe603;</span>
              下载模板
            </div>
          </div>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="35" />
          <el-table-column
            prop="cameraCode"
            label="摄像机编码"
            show-overflow-tooltip="true"
            width="175"
            align="center"
            fixed="left"
          />
          <el-table-column
            prop="installMiles"
            label="安装里程位置(km)"
            width="175"
            align="center"
            fixed="left"
          />
          <!-- <el-table-column prop="railwayName" label="线路" align="center" /> -->
          <el-table-column prop="stationName" show-overflow-tooltip="true" label="测点名称" align="center" width="160px"/>
          <el-table-column prop="lineDir" label="行别" align="center">
            <templats slot-scope="scope">
              <span v-if="scope.row.lineDir == 1">上行</span>
              <span v-if="scope.row.lineDir == 2">下行</span>
            </templats>
          </el-table-column>
          <el-table-column
            prop="beginMiles"
            label="监控里程范围(km)"
            align="center"
            width="185"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.beginMiles && scope.row.endMiles"
                >{{ scope.row.beginMiles }} ～ {{ scope.row.endMiles }}</span
              >
              <span v-else />
            </template>
          </el-table-column>
          <!-- v-if="this.startStatus == 1" -->          
          <!-- <el-table-column
            prop="startRecording"
            label="录像开启状态"
            width="175"
            align="center"
            v-if="this.startStatus == 1"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.startRecording"
                active-color="#006AEA"
                :active-value="1"
                :inactive-value="2"
                inactive-color="#CDCDCD"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="enableOrNot"
            label="摄像机启用状态"
            width="175"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enableOrNot"
                active-color="#006AEA"
                :active-value="1"
                :inactive-value="2"
                inactive-color="#CDCDCD"
                @change="handleEnableChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="installLongitude"
            label="经纬度"
            width="185"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.installLongitude && scope.row.installLatitude"
                >{{ scope.row.installLongitude }} ,
                {{ scope.row.installLatitude }}</span
              >
              <span v-else />
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="versionNum"
            label="相机版本号"
            align="center"
            width="160"
          />
          <el-table-column
            prop="versionName"
            label="相机版本名称"
            align="center"
            width="160"
          /> -->
          <!-- <el-table-column
            prop="remark"
            label="备注"
            align="center"
            width="160"
            show-overflow-tooltip
          /> -->
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            width="155"
          />
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="220"
          >
            <template slot-scope="scope">
              <div class="operateBtn" style="display: flex">
                <div type="text" @click="editEquip(scope.row)">修改</div>
                <div type="text" @click="delCamera(scope.row)">
                  <span>删除</span>
                </div>
                <div type="text" @click="lokDetailInfo(scope.row)">
                  详情查看
                </div>
                <div   type="text" @click="updateFileItem(scope.row)">
                   <div v-if="name==='chengbingxin'">视频上传</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            :page-sizes="[10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
      <!-- 新增编辑弹窗 -->
      <el-dialog
        v-if="dialogFormVisible"
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="CloseIn"
        width="836px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          style="padding: 0 10px; margin-left: -20px"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="相机编码"
                label-width="120px"
                prop="cameraCode"
              >
                <el-input
                  v-model="form.cameraCode"
                  autocomplete="off"
                  placeholder="请输入相机编码"
                  onkeyup="this.value"
                  @input="descInput"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="相机通道" label-width="120px" prop="channel">
                <el-input
                  v-model="form.channel"
                  autocomplete="off"
                  placeholder="请输入相机通道"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线路" label-width="120px" prop="railwayCode">
                <el-select
                  v-model="form.railwayCode"
                  placeholder="请选择线路"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in lineWayData"
                    :key="item.railwayCode"
                    :label="item.railwayName"
                    :value="item.railwayCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="行别" label-width="120px" prop="lineDirName">
                <!-- <el-select v-model="form.lineDirName" @change="handleChange"> -->
                <el-select
                  v-model="form.lineDirName"
                  style="width: 100%"
                  placeholder="请选择行别"
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="item in lineDir"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="安装里程位置"
                label-width="120px"
                prop="installMileBD"
              >
                <el-input
                  v-model="form.installMileBD"
                  placeholder="请输入安装里程位置"
                  autocomplete="off"
                  oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                >
                  <template slot="append">km</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="起始里程"
                label-width="120px"
                prop="beginMile"
              >
                <el-input
                  v-model="form.beginMileBD"
                  style="width: 99%"
                  oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                  placeholder="请输入起始里程"
                >
                  <template slot="append">km</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束里程" label-width="120px" prop="endMile">
                <el-input
                  v-model="form.endMileBD"
                  style="width: 99%"
                  oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                  placeholder="请输入结束里程"
                >
                  <template slot="append">km</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="经度"
                label-width="120px"                
                prop="installLongitude"                
              >
                <el-input
                  v-model="form.installLongitude"
                  placeholder="请输入经度" 
                  type="number" max="90"                                                                       
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="纬度"
                label-width="120px"                
                prop="installLatitude"                
              >
                <el-input
                  v-model="form.installLatitude"
                  placeholder="请输入纬度"
                  type="number" max="180"                               
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="状态" label-width="120px" prop="enableOrNot">
                  <el-radio v-model="form.enableOrNot" :label="1" @change="$forceUpdate()">启用</el-radio>
                  <el-radio v-model="form.enableOrNot" :label="2" @change="$forceUpdate()">停用</el-radio>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item
                label="测点名称"
                label-width="120px"                
                prop="stationName"                
              >
              <el-input
                  v-model="form.stationName"
                  placeholder="请输入测点名称"                                              
                />
             </el-form-item>  
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" label-width="120px" prop="enableOrNot">
                  <el-radio v-model="form.enableOrNot" :label="1" @change="$forceUpdate()">启用</el-radio>
                  <el-radio v-model="form.enableOrNot" :label="2" @change="$forceUpdate()">停用</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监视方向" label-width="120px" prop="monitoringDirectionName">
                <el-select
                  v-model="form.monitoringDirectionName"
                  style="width: 100%"
                  placeholder="请选择监视方向"
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="item in firectionData"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="分组"
                label-width="120px"                
                prop="grou"                
              >
              <el-input
                  v-model="form.grou"
                  placeholder="请输入分组名称"                                              
                />
             </el-form-item>  
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" label-width="120px" prop="sort">
                <el-input :maxLength="10" placeholder="请输入排序" onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="form.sort" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="显卡"
                label-width="120px"                
                prop="graphicsCard"                
              >
              <el-input
                  v-model="form.graphicsCard"
                  placeholder="请输入显卡"                                              
                />
             </el-form-item>  
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button
            class="search_btna"
            style="line-heigth: 0"
            :disabled="disabledSave"
            @click="submint"
            >保存</el-button
          >
          <el-button @click="closeDia">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 上传 -->
      <el-dialog
        :visible.sync="uploadDialog"
        title="相机导入"
        width="620px"
        @close="falseShowUpload"
      >
        <el-upload
          class="upload-demo"
          style="text-align: center"
          drag
          action="#"
          :http-request="uploadHttpRequest"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="uploadFileList"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip">只能上传xls/xlsx文件,且不超过500kb</div> -->
        </el-upload>
        <div class="hxj">支持扩展名：.xlsx</div>
        <div
          class="hxj"
          style="width: 620px; text-align: center; margin-left: -20px"
        >
          请先下载模板，根据模板内容填写，再上传文件
          <span class="xzmba" @click="downloadOut">下载模板</span>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="search_btna" @click="uploadSubmitDialog"
            >确定</el-button
          >
          <el-button class="reset_btna" @click="falseShowUpload"
            >取 消</el-button
          >
        </div>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog :visible.sync="detailDialog" title="详情查看" width="836px">
        <div class="dialog_box">
          <el-form style="padding: 0 10px; margin-left: -20px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item
                  label="相机编码:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.cameraCode"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.cameraCode }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="相机通道："
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.channel"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.channel }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="线路："
                  label-width="120px"
                  prop="cameraName"
                >
                  <el-input
                    v-model="detailData.railwayName"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.railwayCode }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="行别:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.lineDir == 1 ? '上行' : '下行'"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span v-if="detailData.lineDir == 1">上行</span>
                  <span v-if="detailData.lineDir == 2">下行</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="安装里程位置:"
                  label-width="120px"
                  prop="installs"
                >
                  <el-input
                    v-model="detailData.installMiles"
                    autocomplete="off"
                    disabled
                  >
                    <template slot="append">m</template>
                  </el-input>
                  <!-- <span>{{ detailData.installs }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="监控里程范围:"
                  label-width="120px"
                  prop="begins"
                >
                  <el-input v-model="pjJkfw" autocomplete="off" disabled>
                    <template slot="append">m</template>
                  </el-input>
                  <!-- <span>{{ detailData.begins }}</span> -->
                  <!-- <span>{{ detailData.beginMiles }}～ {{detailData.endMiles}}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="经纬度:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input v-model="pjjwd" autocomplete="off" disabled />
                  <!-- <span
                    >{{ detailData.installLongitude }}，{{
                      detailData.installLatitude
                    }}</span
                  > -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="测点名称："
                  label-width="120px"
                  prop="stationName"
                >
                  <el-input
                    v-model="detailData.stationName"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.railwayCode }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="摄像机开启状态:"
                  label-width="120px"
                  prop="enableOrNot"
                >
                  <el-input v-model="detailData.enableOrNot==1?'已开启':'未开启'" autocomplete="off" disabled />
                  <!-- <span
                    >{{ detailData.installLongitude }}，{{
                      detailData.installLatitude
                    }}</span
                  > -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="监视方向" label-width="120px" prop="lineDirName">
                  <el-select
                    v-model="detailData.monitoringDirection==1?'上行':detailData.monitoringDirection==2?'下行':detailData.monitoringDirection==3?'双线':''"
                    style="width: 100%"
                    placeholder="请选择监视方向"
                    @change="$forceUpdate()"
                    disabled
                  >
                    <el-option
                      v-for="item in firectionData"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="分组："
                  label-width="120px"
                  prop="stationName"
                >
                  <el-input
                    v-model="detailData.grou"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.railwayCode }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="显示排序："
                  label-width="120px"
                  prop="stationName"
                >
                  <el-input
                    v-model="detailData.prop"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.railwayCode }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="显卡："
                  label-width="120px"
                  prop="stationName"
                >
                  <el-input
                    v-model="detailData.graphicsCard"
                    autocomplete="off"
                    disabled
                  />
                  <!-- <span>{{ detailData.railwayCode }}</span> -->
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item
                  label="是否开启录像:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.startRecording == 1 ? '开启' : '不开启'"
                    autocomplete="off"
                    disabled
                  /></el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="创建者:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.createBy"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="创建时间:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.createTime"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="更新者:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.updateBy"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="更新时间:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.updateTime"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="相机版本号:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.versionNum"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="12">
                <el-form-item
                  label="相机版本名称:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.versionName"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
              <!-- <el-col :span="24">
                <el-form-item
                  label="备注:"
                  label-width="120px"
                  prop="cameraCode"
                >
                  <el-input
                    v-model="detailData.remark"
                    type="textarea"
                    autocomplete="off"
                    disabled
                  />
                </el-form-item>
              </el-col> -->
            </el-row>
          </el-form>
        </div>
      </el-dialog>
    </div>
    
    <el-dialog title="视频上传"  v-if="dialogVisible" :visible.sync="dialogVisible" width="800px">
      <div style="text-align: center">
        <el-upload
          class="upload-demo"
          :limit="1"
          drag
          :action="uploadUrl"
          :multiple="true"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div style="margin-top: 10px; font-size: 12px" slot="tip">
            请上传视频格式文件
          </div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import { editAccountManagement, serviceFileoss } from "../../../api/video";
import {
  getCameraDataList,
  getLineDir,
  getRecording,
  getStartRecording,
  getLineWayList,
  getCameraDataAddNewer,
  getDownLoadList,
  getWorkSetion,
  getLineData,
  getCameraDataDelete,
  getCameraFetail,
  getCameraDataUpLoadOut,
  getCameraDataUpdate,
  getDeptList,
  getCameraDataUpLoadIn,
  toEnabAccrame,
  getDirection
} from "@/api/account/camera";

export default {
  name: "Cart",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    var validatePassxjbm = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入相机编码"));
      } else if (value.length > 100) {
        callback(new Error("最多可输入100位"));
      } else {
        callback();
      }
    };
    var validatePassxjtd = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入相机通道"));
      } else if (value.length > 100) {
        callback(new Error("最多可输入100位"));
      } else {
        callback();
      }
    };
    var azlcwz = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入安装里程位置"));
      } else if (value.length > 10) {
        callback(new Error("最多可输入10位"));
      } else {
        callback();
      }
    };
    var qslc = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入起始里程"));
      } else if (value.length > 10) {
        callback(new Error("最多可输入10位"));
      } else {
        callback();
      }
    };
    var jslc = (rule, value, callback) => {
      if (value === undefined || value === "") {
        callback(new Error("请输入结束里程"));
      } else if (value.length > 10) {
        callback(new Error("最多可输入10位"));
      } else {
        callback();
      }
    };
    return {
      pjjwd: "",
      pjJkfw: "",
      uploadUrl: "http://124.70.58.209:18810/service/fileoss", // 上传文件的接口地址
      dialogVisible: false,
      // 导入
      dataForm: {
        name: "",
        file: null,
      },
      videoUrl: "",
      searchShow: true,
      startStatus: "",
      rules: {
        cameraCode: [
          { required: true, validator: validatePassxjbm, trigger: "blur" },
        ],
        channel: [
          { required: true, validator: validatePassxjtd, trigger: "blur" },
        ],
        railwayCode: [
          { required: true, message: "请选择线路", trigger: "change" },
        ],
        deptName: [
          { required: true, message: "请选择所属工务段", trigger: "change" },
        ],
        lineDirName: [
          { required: true, message: "请选择行别", trigger: "change" },
        ],
        installMileBD: [
          { required: true, validator: azlcwz, trigger: "change" },
        ],
        beginMileBD: [{ required: true, validator: qslc, trigger: "blur" }],
        endMileBD: [{ required: true, validator: jslc, trigger: "blur" }],
        // installLongitude: [
        //   { required: true, message: "请输入经度", trigger: "blur" },
        // ],
        // installLatitude: [
        //   { required: true, message: "请输入纬度", trigger: "blur" },
        // ],
        cardNum: [
          { required: true, message: "请输入物联网卡号", trigger: "blur" },
        ],
        stationName:[
          { required: true, message: "请输入测点名称", trigger: "blur" },
        ],
        graphicsCard:[
          { required: true, message: "请输入显卡", trigger: "blur" },
        ]
      },
      disabledSave: false,
      enter: 0,
      queryParams: {
        stationName:'',
        cameraCode:'',
        line: "",
        worksSection: "",
        lineDistinction: "",
        startMileage: "",
        finishtMileage: "",
        // railwayCode: "",
        deptName: "",
        deptId: "",
        lineDir: "",
        beginMileBD: "",
        endMileBD: "",
        pageNum: 1,
        pageSize: 10,
        enableOrNot:''
      },
      firectionData:[],
      ids: [],
      title: "",
      uploadDialog: false,
      radioArray: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
      statusOptions:[
        {
          label: '启用',
          value: '1'
        },
        {
          label: '停用',
          value: '2'
        }
      ],
      xianlu: [
        {
          value: "1",
          label: "xxx1线路",
        },
        {
          value: "2",
          label: "xxx2线路",
        },
        {
          value: "3",
          label: "xxx3线路",
        },
      ],
      gongwuduan: [
        {
          value: "1",
          label: "xx1工务段",
        },
        {
          value: "2",
          label: "xx2工务段",
        },
        {
          value: "3",
          label: "xx3工务段",
        },
      ],
      // hangbie: [
      //   {
      //     value: '1',
      //     label: '上行'
      //   },
      //   {
      //     value: '2',
      //     label: '下行'
      //   }
      // ],
      licheng: [
        {
          value: "1",
          label: "1km",
        },
        {
          value: "2",
          label: "2km",
        },
        {
          value: "3",
          label: "3km",
        },
      ],
      zhangtai: [
        {
          value: "1",
          label: "已解除",
        },
        {
          value: "2",
          label: "未解除",
        },
      ],
      tableData: [],
      treeData: [],
      workSetiData: [],
      getLineData: [],
      total: 0,
      dialogFormVisible: false,
      form: {
        lineDirName: "",
        railwayCode: "",
        cameraCode: "",
        channel: "",
        deptId: "",
        deptName: "",
        lineDir: "",
        installMileBD: "",
        beginMileBD: "",
        endMileBD: "",
        installLongitude: "",
        installLatitude: "",
        cardNum: "",
        startRecording: "",
        remark: "",
        stationName:'',
        sort:"",
        grou:"",
        graphicsCard:'',
        enableOrNot: 1,
        monitoringDirection:'',
        monitoringDirectionName:''
      },
      detailDialog: false,
      detailData: {},
      lineWayData: [],
      ids: [],
      fileList: [],
      cameraCodeValue: "",
      dialogType: "",
      headers: { Authorization: getToken() },
      action:
        "http://124.70.58.209:18819/hazard/service/baseCameraManagement/importBaseAccountManagement",
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  watch: {
    "form.deptName": {
      handler(val) {
        this.$set(this.form, "deptName", val);
        this.optionProps.map((item, index) => {
          if (val == item.value) {
            this.$set(this.form, "deptId", item.value);
          }
        });
      },
      deep: true, // 深层监听
    },
    'form.installLongitude': function (newval, oldval) {           
			  var reg = /^(\d{0,3})(\.(\d{0,13}))?$/g;
				if (!reg.test(newval)) {
					if (newval == undefined || newval == null ) {
						// this.form.installLongitude = '';
						return;
					}
					this.form.installLongitude = oldval
				} else {
					this.form.installLongitude = newval.replace(/^\./g, "")
				}				
			},
      'form.installLatitude': function (newval, oldval) {
			  var reg = /^(\d{0,3})(\.(\d{0,13}))?$/g;
				if (!reg.test(newval)) {
					if (newval == undefined || newval == null ) {
						// this.form.installLatitude = '';
						return;
					}
					this.form.installLatitude = oldval
				} else {
					this.form.installLatitude = newval.replace(/^\./g, "")
				}				
			}
  },
  created() {
    this.getCameraList();
    this.getWorkSetion();
    this.getDeptList();
    this.getLineWayList();
    this.getLineTypeList();
    this.getDirectionSelect()
  },
  methods: {
    handleEnableChange(row){
      let params={
        id:row.id,
        enableOrNot:row.enableOrNot
      }
      toEnabAccrame(params).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getCameraList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
            this.getCameraList();
          }
        });
    },
    goClick() {
      console.log(this.row);
      editAccountManagement({
        id: this.row.id,
        cameraCode: this.row.cameraCode,
        url: this.videoUrl,
      }).then((res) => {
        console.log(res);
      });
      this.dialogVisible = false;
    },
    beforeUpload(file) {
      const formData = new FormData();
      formData.append("file", file); // 将文件添加到FormData对象中
      serviceFileoss(formData).then((res) => {
        this.videoUrl = res.data;
      });
    },
    descInput() {
      console.log(this.form.cameraCode.length, ",,,,,,,,,,,,,,,,,,,");
    },
    falseShowUpload() {
      this.uploadDialog = false;
      this.fileList = [];
    },
    uploadFileList(file) {
      if (file.status === "ready") {
        this.fileList.push(file);
        if (this.fileList.length > 1) {
          this.fileList.splice(0, 1);
        }
      }
    },
    uploadSubmitDialog() {
      const fileData = new FormData();
      fileData.append("file", this.fileList[0].raw);
      let isHttpRequest = this.fileList[0].raw.name.split(".");
      if (
        isHttpRequest[isHttpRequest.length - 1] == "xlsx" ||
        isHttpRequest[isHttpRequest.length - 1] == "xls"
      ) {
        getCameraDataUpLoadIn(fileData).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "导入成功!",
            });
            this.uploadDialog = false;
            this.getCameraList();
            this.fileList = [];
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
            this.getCameraList();
            this.fileList = [];
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "上传的文件只能是xls以及xlsx格式!",
        });
        this.fileList = [];
      }
    },
    // 验证文件类型
    beforeAvatarUpload(file) {
      const isXls =
        file.type === "application/vnd.ms-excel"
          ? true
          : file.type ===
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isXls) {
        alert("上传的文件只能是xls以及xlsx格式!");
      }
      return isXls;
    },
    // 判断文件个数
    handleChange(file, fileList) {
      if (fileList.length >= 2) {
        return;
      }
      if (fileList.length === 1) {
        this.hasFile = true;
      }
      this.dataForm.file = file;
    },
    // 导入
    httpRequest(param) {
      const formData = new FormData();
      formData.append("file", this.dataForm.file.raw);
      const configHeaders = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      console.log(
        this.dataForm.file.raw.name,
        "this.fileList[0].raw.namethis.fileList[0].raw.namethis.fileList[0].raw.namethis.fileList[0].raw.name"
      );
      let isHttpRequest = this.dataForm.file.raw.name.split(".");
      if (
        isHttpRequest[isHttpRequest.length - 1] == "xlsx" ||
        isHttpRequest[isHttpRequest.length - 1] == "xls"
      ) {
        getCameraDataUpLoadIn(formData).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "导入成功!",
            });
            this.getCameraList(this.data);
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "上传的文件只能是xls以及xlsx格式!",
        });
      }
    },
    changeValue(val) {},
    // 行别下拉
    getLineTypeList() {
      getLineDir({}).then((res) => {
        this.lineDir = res.data;
      });
    },
    getDirectionSelect(){
      getDirection({}).then((res)=>{
        this.firectionData=res.data
      })
    },
    handleStatusChange(row) {
      if (row.startRecording == "2") {
        getRecording(row.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "关闭成功",
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
            this.getCameraList();
          }
        });
      } else if (row.startRecording == "1") {
        getStartRecording(row.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "开启成功",
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
            this.getCameraList();
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);  
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCameraList();
    },
    reset() {
      this.queryParams.deptName = "";
      this.queryParams.deptId = "";
      this.queryParams.railwayCode = "";
      this.queryParams.lineDir = "";
      this.queryParams.beginMileBD = "";
      this.queryParams.endMileBD = "";
      this.queryParams.stationName = "";
      this.queryParams.cameraCode = "";
      this.queryParams.enableOrNot=''
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getCameraList();
    },
    getLineWayList() {
      getLineWayList({}).then((res) => {
        this.lineWayData = res.data;
      });
    },
    handleNodeHandleClick(a) {
      this.queryParams.deptName = a.label;
      this.queryParams.deptId = a.id;
    },
    handleNodeClick(v) {
      this.form.deptId = v.id;
      this.form.deptName = v.label;
    },
    getWorkSetion: function () {
      getWorkSetion({}).then((response) => {
        this.workSetiData = response.data;
      });
      getLineData({}).then((response) => {
        this.getLineData = response.data;
      });
    },
    getDeptList() {
      getDeptList({}).then((res) => {
        this.treeData = res.data;
      });
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getCameraList();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getCameraList();
    },
    getCameraList() {
      delete this.queryParams.ids;
      console.log(
        this.queryParams,
        "this.queryParamsthis.queryParamsthis.queryParams"
      );
      getCameraDataList(this.queryParams).then((response) => {
        if (!this.queryParams.pageNum || !this.queryParams.pageSize) {
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          getCameraDataList(this.queryParams).then((res) => {
            this.tableData = res.data.records;
            this.total = res.data.total;
          });
        }
        if (
          response.data.records.length == 0 &&
          this.queryParams.pageNum != 1
        ) {
          this.queryParams.pageNum = this.queryParams.pageNum - 1;
          getCameraDataList(this.queryParams).then((res) => {
            this.tableData = res.data.records;
            this.total = response.data.total;
          });
        }
        this.tableData = response.data.records;
        this.total = response.data.total;
        if (this.tableData.length > 0) {
          if (this.tableData[0].isStartRecording == 1) {
            this.startStatus = 1;
          }
        } else {
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          this.total = response.data.total;
          return;
          this.startStatus = 0;
        }
      });
    },
    addEquipment: function () {
      this.form = {};

      // this.$refs['form'].resetFields()
      this.dialogType = 1;
      this.title = "新增设备";
      // alert(this.form.enableOrNot)
      // alert(this.form.installLatitude)
      this.form.enableOrNot=1
      this.disabledSave = false;
      this.dialogFormVisible = true;
    },
    closeDia() {
      this.dialogFormVisible = false;
      this.$refs["form"].resetFields();
      this.form = {};
    },
    CloseIn() {
      this.dialogFormVisible = false;
      this.$refs["form"].resetFields();
      this.form = {};
    },
    submint: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if(this.form.beginMileBD>this.form.endMileBD) {
            return this.$message({
                    message: "结束里程必须大于起始里程",
                    type: "error",
                  });
          }
          if (this.dialogType == 1) {
            this.firectionData.forEach((item) => {
              if (item.dictLabel == this.form.monitoringDirectionName) {
                this.form.monitoringDirection = item.dictValue;
              }
            });
            this.lineDir.forEach((item) => {
              if (item.dictLabel == this.form.lineDirName) {
                this.form.lineDir = item.dictValue;
              }
            });
            // delete this.form.deptName
            this.form.monitoringDirection = Number(this.form.monitoringDirectionName);
            this.form.lineDir = Number(this.form.lineDirName);
            this.disabledSave = true;
            // if(this.form.sort!==''){
            // this.form.sort=Number(this.form.sort)
            // }
            getCameraDataAddNewer(this.form).then((response) => {
              if (response.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.getCameraList();
                this.dialogFormVisible = false;
                this.$refs["form"].resetFields();
              } else {
                this.disabledSave = false;
                this.$message({
                  message: response.msg,
                  type: "error",
                });
              }
            });
          } else if (this.dialogType == 2) {
            delete this.form.beginMiles;
            delete this.form.endMiles;
            delete this.form.installMiles;
            this.form.lineDir = this.form.lineDirName;
            this.form.monitoringDirection = Number(this.form.monitoringDirectionName);
            if (this.form.lineDir == "上行") {
              this.form.lineDir = 1;
            } else if (this.form.lineDir == "下行") {
              this.form.lineDir = 2;
            }
            getCameraDataUpdate(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.getCameraList();
                this.dialogFormVisible = false;
                this.$refs["form"].resetFields();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          }
        }
      });
    },
    editEquip: function (row) {
      this.dialogType = 2;
      this.disabledSave = false;
      this.title = "修改设备信息";
      this.dialogFormVisible = true;
      // this.form = JSON.parse(JSON.stringify(row))
      getCameraFetail(row.id).then((res) => {        
        this.form = res.data;
        this.lineDir.forEach((item) => {
          if (item.dictValue == this.form.lineDir) {
            this.form.lineDirName = item.dictLabel;
          }
        });
        this.firectionData.forEach((item) => {
          if (item.dictValue == this.form.monitoringDirection) {
            this.form.monitoringDirectionName = item.dictLabel;
          }
        });
      });
    },
    delCameraList() {
      if (this.ids.length == 0) {
        this.$message({
          type: "error",
          message: "请选择需要删除的数据",
        });
      } else {
        this.$confirm("确定要删除吗?", "信息提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            getCameraDataDelete(this.ids).then((res) => {
              if (res.code == 200) {
                this.getCameraList();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    delCamera: function (row) {
      this.ids = row.id;
      this.$confirm("确定要删除吗?", "信息提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getCameraDataDelete(this.ids).then((res) => {
            if (res.code == 200) {
              this.getCameraList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    uploadOut: function () {
      delete this.queryParams.pageNum;
      delete this.queryParams.pageSize;
      this.queryParams.ids = this.ids;
      // if(this.queryParams.ids.length == 0) {
      //   return this.$message({
      //           message: '请选择需要导出的数据',
      //           type: "error",
      //         });
      // }
      getCameraDataUpLoadOut(this.queryParams).then((res) => {
        // this.exportFile(res, "摄像机台账信息");
        
        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              this.exportFile(res, "摄像机台账信息");
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          this.exportFile(res, "摄像机台账信息");
        }

      });
    },
    exportFile: function (obj, name = Date.now(), suffix = "xlsx") {
      const url = window.URL.createObjectURL(
        new Blob([obj], { type: "application/vnd.ms-excel" })
      );
      const aDOM = document.createElement("a");
      aDOM.style.display = "none";
      aDOM.href = url;
      const fileName = name + "." + suffix;
      aDOM.setAttribute("download", fileName);
      document.body.appendChild(aDOM);
      aDOM.click();
      document.body.removeChild(aDOM);
    },
    downloadOut() {
      getDownLoadList({}).then((res) => {
        this.exportDownFile(res, "摄像机台账模板");
      });
    },
    exportDownFile: function (obj, name = Date.now(), suffix = "xlsx") {
      const url = window.URL.createObjectURL(
        new Blob([obj], { type: "application/vnd.ms-excel" })
      );
      const aDOM = document.createElement("a");
      aDOM.style.display = "none";
      aDOM.href = url;
      const fileName = name + "." + suffix;
      aDOM.setAttribute("download", fileName);
      document.body.appendChild(aDOM);
      aDOM.click();
      document.body.removeChild(aDOM);
    },
    updateFileItem(row) {
      console.log(row);
      this.dialogVisible = true;
      this.row = row;
    },
    lokDetailInfo: function (row) {
      this.detailDialog = true;
      getCameraFetail(row.id).then((res) => {
        res.data.installLongitude = res.data.installLongitude||''
        res.data.installLatitude = res.data.installLatitude||''
        this.detailData = res.data;
        this.cameraCodeValue = this.detailData.cameraCode;
        if(this.detailData.installLongitude!=null&&this.detailData.installLatitude!=null&&this.detailData.installLongitude!=''&&this.detailData.installLatitude!=''){
          this.pjjwd =
          this.detailData.installLongitude +
          "，" +
          this.detailData.installLatitude;
        }else{
          this.pjjwd=''
        }
        if(this.detailData.beginMiles!=null&&this.detailData.endMiles!=null&&this.detailData.beginMiles!=''&&this.detailData.endMiles!=''){
          this.pjJkfw =this.detailData.beginMiles + "~" + this.detailData.endMiles;
        }else{
          this.pjJkfw =''
        }
      });
    },
    deleteEquip: function () {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    importLoadIn: function () {
      this.uploadDialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.cardHeadr {
  margin-top: -20px;
  display: flex;
  justify-content: space-between;
}

.search_btn {
  cursor: pointer;
  background-color: #2766dd;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.search_btna {
  cursor: pointer;
  background-color: #2766dd !important;
  color: #fff;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
}

.search_btna,
.search_btn:hover {
  background-color: #4d85f4;
}

.reset_btn {
  cursor: pointer;
  color: #565656;
  font-size: 14px;
  border: 1px solid #d7d7d7;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.reset_btn:hover {
  color: #1f9fff;
  border: 1px solid #1f9fff;
  background: none;
}

.addBtn {
  margin: 15px 20px 15px 0;
  cursor: pointer;
  text-align: center;
  width: 98px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid #abc7fd;
  line-height: 34px;
  font-weight: 400;
  font-size: 14px;
  color: #2250c8;
  background-color: #e7eeff;
}

.addBtn:hover {
  color: #ffffff;
  background-color: #2250c8;
  border: 1px solid #2250c8;
}
.addBtn:active {
  color: #ffffff;
  background-color: #194da4;
  border: 1px solid #194da4;
}
.operateBtn {
  display: flex;
  justify-content: center;
  color: #2866dd;
  div {
    font-size: 14px;
    margin: 0 5px;
    cursor: pointer;
  }
}

.el-tooltip__popper {
  max-width: 30%;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
.xzmba {
  color: #2766dd;
  text-decoration: underline;
  cursor: pointer;
}
.hxj {
  width: 100%;
  text-align: center;
  padding: 0 !important;
}
::v-deep .el-dialog__header {
  padding: 0 20px 10px !important;
}
::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}
::v-deep .el-upload__tip {
  margin-top: -17px;
}
::v-deep .el-upload-dragger .el-upload__text {
  margin-top: -10px;
}
.dialog-footer {
  text-align: center;
}
.detailDia {
  div {
    padding-left: 100px;
  }
}
::v-deep .el-input__inner,
.el-input--suffix .el-input__inner {
  padding-right: 0 !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266;
}
::v-deep .el-textarea .el-input__count {
  bottom: -40px;
}
::v-deep .el-input__icon {
  line-height: 47px;
}
::v-deep .el-select .el-input .el-select__caret {
  line-height: 20px !important;
}
::v-deep .el-dialog__header {
    padding: 7px 20px 10px !important;
}
::v-deep .el-dialog__headerbtn {
    position: absolute;
    top: 12px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
}

</style>
