<template>
  <div class="span">
    <validator name='v'>
      <div class="form-horizontal select-overspread container-fluid" style="overflow-y: auto">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">集中器信息</a></li>
        </ul>
        <div class="row auto">
          <!--基本用户信息-->
          <div class="col-sm-6 form-group" :class="[$v.f_mpc_number.required ? 'has-error' : 'has-success']" >
            <label class="font_normal_body">集中器编号</label>
            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_mpc_number"
                   v-validate:f_mpc_number='{required: true }'
                   placeholder="集中器编号">
          </div>
          <div class="col-sm-6 form-group" :class="[$v.f_mpc_alias.required ? 'has-error' : 'has-success']">
            <label class="font_normal_body">集中器名称</label>
            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_mpc_alias"
                   v-validate:f_mpc_alias='{required: true }'
                    placeholder="集中器名称">
          </div>
          <div class="col-sm-6 form-group" :class="[$v.f_mpc_phone.required ? 'has-error' : 'has-success']">
            <label class="font_normal_body">集中器电话</label>
            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_mpc_phone"
                   v-validate:f_mpc_phone='{required: true }'
                   placeholder="集中器电话">
          </div>
          <div class="col-sm-6 form-group" style="" v-if="true">
            <label for="f_mpc_type" class="font_normal_body">集中器类型</label>
            <v-select :value.sync="areamodel.f_mpc_type" :value-single="true"
                      :options='npctypes' placeholder='集中器类型'
                      close-on-select></v-select>
          </div>
          <div class="col-sm-12 form-group" >
            <label for="f_mpc_address" class="font_normal_body">集中器地址</label>
            <input type="text" v-model="areamodel.f_mpc_address" :value.sync="areamodel.f_mpc_address"
                   class="input_search"  style="width: 80%;" placeholder="集中器地址" >
          </div>
          <div class="col-sm-6 form-group" style="" >
            <label for="f_user_state" class="font_normal_body">集中器厂家</label>
            <v-select :value.sync="areamodel.f_mpc_brand" :value-single="true"
                      :options='mpcbrands' placeholder='集中器厂家'
                      close-on-select></v-select>
          </div>

          <div class="col-sm-6 form-group" style="" v-if="true">
            <label for="f_mpc_state" class="font_normal_body">集中器状态</label>
            <v-select :value.sync="areamodel.f_mpc_state" :value-single="true"
                      :options='mpcstates' placeholder='集中器状态'
                      close-on-select></v-select>
          </div>
          <div class="col-sm-6 form-group" :class="[$v.f_mpc_ip.required ? 'has-error' : 'has-success']">
            <label class="font_normal_body">IP&nbsp;&nbsp;&nbsp;地&nbsp;&nbsp;址&nbsp;</label>
            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_mpc_ip"
                   v-validate:f_mpc_ip='{required: true }'
                   placeholder="IP地址">
          </div>
          <div class="col-sm-6 form-group" :class="[$v.f_mpc_port.required ? 'has-error' : 'has-success']">
            <label class="font_normal_body">端&nbsp;&nbsp;&nbsp;口&nbsp;&nbsp;&nbsp;号</label>
            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_mpc_port"
                   v-validate:f_mpc_port='{required: true }'
                   placeholder="端口号">
          </div>
          <div class="col-sm-6 form-group" style="" v-if="true">
            <label for="f_mpc_network" class="font_normal_body">是否组网&nbsp;&nbsp;&nbsp;</label>
            <v-select :value.sync="areamodel.f_mpc_network" :value-single="true"
                      :options='isnetworkoptions' placeholder='是否组网' disabled
                      close-on-select></v-select>
          </div>

        </div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">上报周期</a></li>
        </ul>
        <div class="row auto">
          <div class="col-sm-6 form-group" style="" >
            <label for="f_mpc_commandtype" class="font_normal_body">命令类型&nbsp;&nbsp;&nbsp;</label>
            <v-select :value.sync="areamodel.f_mpc_commandtype" :value-single="true"
                      :options='userstates' placeholder='命令类型'
                      ></v-select>
          </div>
          <div class="col-sm-6 form-group" style="" >
            <label for="f_mpc_cycle_state" class="font_normal_body">周期状态&nbsp;&nbsp;&nbsp;</label>
            <v-select :value.sync="areamodel.f_mpc_cycle_state" :value-single="true"
                      :options='cyclestates' placeholder='周期状态'
                      ></v-select>
          </div>
          <div class="col-sm-6 form-group" style="" >
            <label for="f_mpc_hand_state" class="font_normal_body">上报类型&nbsp;&nbsp;&nbsp;</label>
            <v-select :value.sync="areamodel.f_mpc_hand_state" :value-single="true"
                      :options='handtypes' placeholder='上报类型(按日/按月/按周)'
                      ></v-select>
          </div>
          <div class="col-sm-6 form-group" style="" v-show="this.areamodel.f_mpc_hand_state == '按月' || this.areamodel.f_mpc_hand_state == '按周'">
            <label for="f_mpc_yz_time" class="font_normal_body">上报时间(月/周)</label>
            <input type="number" class="input_search" style="width:60%" v-model="areamodel.f_mpc_yz_time"

                   placeholder="上报时间(月(1-28)/周(1-7))">
          </div>
          <div class="col-sm-6 form-group" style="" >
            <label for="f_mpc_time1" class="font_normal_body">上报时间(小时)</label>
            <input type="number" class="input_search" style="width:60%" v-model="areamodel.f_mpc_time1"

                   placeholder="上报时间(小时0~23)">
          </div>
          <div class="col-sm-6 form-group" style="" >
            <label for="f_mpc_time2" class="font_normal_body">上报时间(分钟)</label>
            <input type="number" class="input_search" style="width:60%" v-model="areamodel.f_mpc_time2"

                   placeholder="上报时间(分钟0~59)">
          </div>
        </div>
        <div class="row auto">
          <div style="" class="col-sm-12 form-group" >
            <label for="f_comments" class="font_normal_body">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
            <input type="text"  v-model="areamodel.f_comments"
                   class="input_search" style="width:80%"
                   placeholder="备注">
          </div>
        </div>
        <ul class="nav nav-tabs" >
          <li class="active"><a href="#">操作信息</a></li>
        </ul>
        <div class="row auto"  >
          <div class="col-sm-6 form-group">
            <label class="font_normal_body">使用公司&nbsp;&nbsp;&nbsp;</label>
            <res-select :initresid='curorgid'
                        is-mul="false"
                        restype='organization'>
            </res-select>
          </div>
          <div style="" class="col-sm-6 form-group" >
            <label for="f_operator" class="font_normal_body">创&nbsp;建&nbsp;&nbsp;人&nbsp;&nbsp;&nbsp;</label>
            <input type="text"  v-model="areamodel.f_operator"
                   class="input_search" style="width:80%" disabled
                   placeholder="创建人">
          </div>
          <div class="col-sm-6 form-group" >
            <label for="f_operator_date" class=" font_normal_body">创建时间&nbsp;&nbsp;&nbsp;</label>
            <datepicker placeholder="创建时间"
                        style="width:60%"
                        class="datepicker" disabled
                        v-model="areamodel.f_operator_date"
                        :value.sync="areamodel.f_operator_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
            ></datepicker>
          </div>
          <div style="" class="col-sm-6 form-group" >
            <label for="f_modify_user" class="font_normal_body">修&nbsp;&nbsp;改&nbsp;人&nbsp;&nbsp;&nbsp;</label>
            <input type="text"  v-model="areamodel.f_modify_user"
                   class="input_search" style="width:80%" disabled
                   placeholder="修改人">
          </div>
          <div class="col-sm-6 form-group"  >
            <label for="f_modify_date" class=" font_normal_body">修改时间&nbsp;&nbsp;&nbsp;</label>
            <datepicker placeholder="修改时间"
                        style="width:60%"
                        class="datepicker" disabled
                        v-model="areamodel.f_modify_date"
                        :value.sync="areamodel.f_modify_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
            ></datepicker>
          </div>
          <div class="col-sm-6 form-group"  >
            <label for="f_send_state" class=" font_normal_body">指令状态&nbsp;&nbsp;&nbsp;</label>
            <input type="text"  v-model="areamodel.f_send_state"
                   class="input_search" style="width:80%" disabled
                   placeholder="指令状态">
          </div>

        </div>

        <div class="row auto" style="text-align:right;margin: 10px 37px 0 0;">
          <button class="button_search button_spacing" :disabled="areamodel.f_send_state!='成功' && areamodel.f_send_state!=null" @click="confirm()" :disabled='!$v.valid'>保存</button>
          <button class="button_clear button_spacing" @click="cancel()">取消</button>
        </div>
        <!--用户管理的表具-->
        <div class="row auto">
          <br />
        </div>
<!--        <div class="col-sm-12 bg-info text-center"  style="height:33px;padding: 4px;font-size: 18px;font-weight: bold; position:relative" v-show="operation == 'modify'">-->
<!--          <span >用户关联表具</span>-->
<!--&lt;!&ndash;          <button class="button_search button_spacing addmeterc" @click="addmeterinfo">添加表具</button>&ndash;&gt;-->
<!--        </div>-->
        <ul class="nav nav-tabs" style="    font-size: 15px;" v-show="operation == 'modify'">
          <li class="active"><a href="#">用户关联表具</a></li>
        </ul>
        <div class="auto row" style="margin-top:33px;" v-show="operation == 'modify'" >
          <div v-for="row in meterinfo" style="margin: 9px 0;border: 1px solid rgba(100,100,100,0.5);border-radius:10px;">
            <div style="width:100%;height:30px;position:relative;">
              <span v-show="false" class="glyphicon glyphicon-remove infosshow" @click="deletemeterinfo(row)"></span>
            </div>
            <div class="row " style="height:50px;margin:5px 0px;padding-left: 15px">
              <div class="col-sm-4 form-group" :class="[$m.meternumber.required ? 'has-error' : '']">
                <label for="f_meternumber" class="font_normal_body">表&emsp;&emsp;号</label>
                <input type="text" v-model="row.f_meternumber" class="input_search" style="width:60%"
                       placeholder="表号">
              </div>
              <div class="col-sm-4 form-group" :class="[$m.brand.required ? 'has-error' : '']">
                <label for="gasbrand" class="font_normal_body">气表品牌</label>
                <input type="text" v-model="row.f_meter_brand" class="input_search" style="width:60%"
                       placeholder="气表品牌">
              </div>
              <div class="col-sm-4 form-group" :class="[$m.model.required ? 'has-error' : '']">
                <label for="gasmodel" class="font_normal_body">气表型号</label>
                <input type="text" v-model="row.f_meter_style" class="input_search" style="width:60%"
                       placeholder="气表型号">
              </div>
            </div>
            <div class="row auto" style="height:50px;margin:5px 0px;padding-left: 15px">
              <div class="col-sm-4 form-group" :class="[$m.name.required ? 'has-error' : '']">
                <label for="pricename" class="font_normal_body">气价名称</label>
                <input type="text" v-model="row.f_price_name" class="input_search" style="width:60%"
                       placeholder="气价名称">
              </div>
              <div class="col-sm-4 form-group" :class="[$m.type.required ? 'select-error' : '']">
                <label for="pricetype" class="font_normal_body">气价类型</label>
                <input type="text" v-model="row.f_price_type" class="input_search" style="width:60%"
                       placeholder="气价类型">
              </div>
              <div class="col-sm-4 form-group" :class="[$m.aroundmeter.required ? 'has-error' : '']">
                <label for="gasmodel" class="font_normal_body">表&ensp;&ensp;&ensp;&ensp;向</label>
                <input type="text" v-model="row.f_aroundmeter" class="input_search" style="width:60%"
                       placeholder="表向">
              </div>
            </div>
          </div>
        </div>


      </div>
    </validator>
    <!--<modal v-if="showselectaddress" :show.sync="showselectaddress" width="80%" title="地址信息" v-ref:modal large backdrop="false">-->
      <!--<article slot="modal-body" class="modal-body" style="height: 700px;padding: 0!important;">-->
        <!--<nc-address-list :is-select="isSelect" :fileinfo="areamodel" :f_filialeid.sync="f_filialeids"-->
                             <!--@address-valid="doNothing"   :showselectaddress.sync="showselectaddress" v-ref:fileaddress ></nc-address-list>-->
      <!--</article>-->
      <!--<footer slot="modal-footer" class="modal-footer">-->
      <!--</footer>-->
    <!--</modal>-->


  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'


  let initGen = async function (self) {
    if(self.$parent.f_filialeids && self.$parent.f_filialeids!=''){
      self.curorgid.push(self.$parent.f_filialeids)
    }
    await self.initdata()
  }

  export default {
    title: 'NC档案添加',
    data () {
      return {
        //用户信息
        areamodel: {
          f_mpc_phone:'',
          f_mpc_alias:'',
          f_mpc_number:'',
          f_mpc_state:'',
          f_mpc_brand:'',
          f_mpc_address:'',
          f_mpc_type:'',
          f_mpc_ip:'',
          f_mpc_port:'',
          f_send_state: '',
          f_mpc_commandtype:'',
          f_mpc_hand_state:'',
          f_mpc_cycle_state:'',
          f_mpc_network:'未组网',
          f_mpc_yz_time:'',
          f_mpc_time1:'',
          f_mpc_time2:'',
          f_comments:'',
          f_operator:'',
          f_modify_date:'',
          f_modify_user:'',
          f_operator_date:'',
          areamodel:''
        },
        sliceArea: [],
        gasproperties: [],
        isSelect:false,
        showselectaddress:false,
        npctypes: this.$appdata.getParam('集中器类型'),
        mpcbrands: this.$appdata.getParam('集中器厂家'),
        mpcstates: this.$appdata.getParam('集中器状态'),
        userstates: this.$appdata.getParam('命令类型'),
        isnetworkoptions: this.$appdata.getParam('是否组网')?this.$appdata.getParam('是否组网'):[{label:"未组网",value:"未组网"}],
        cyclestates: this.$appdata.getParam('周期状态'),
        handtypes: this.$appdata.getParam('上报类型'),
        addmeterinfoshow:false,
        curorgid:[]
      }
    },
    props: ['f_filialeids','f_special', 'areatype','row','operation','meterinfo'],
    ready(){
      initGen(this)
    },
    methods: {
      userTypeChange () {
        this.gasproperties=[]
        if(this.areamodel !==null) {
          //this.areamodel.f_gasproperties=''

          this.gasproperties = this.$appdata.getParam(this.areamodel.f_user_type)
          // this.gasproperties.push({label: '全部', value: ''})
        }
        else{
          this.gasproperties =[{label: '全部', value: ''}]
        }
      },
      //删除拥有表具
      async deletemeterinfo(row){
        if(this.meterinfo == null || this.meterinfo.length==0 ){
            this.$showAlert('当前用户未关联此表具,请检查后操作!','warning',2000);
            this.meterinfo = [];
            return;
        }
        if( row.f_userfiles_id == null || row.f_userfiles_id == ''){
          this.$showAlert('当前用户表具数据出错,请检查后操作!','warning',2000);
          return;
        }
        let self = this;
        this.meterinfo.forEach(async (item)=>{
          if(item.f_userfiles_id == null){
            return;
          }
          if(item.f_userfiles_id == row.f_userfiles_id){
            self.meterinfo.pop(item);
            //档案中去除表具
            if(row.f_user_id == null || row.f_userfiles_id == null){
              this.$showAlert("表具数据出错,删除失败,请联系管理员!!");
              return;
            }
            let param = {
              f_userfiles_id:row.f_userfiles_id,
              version: row.version,
              f_user_id:row.f_user_id,
              f_concentrator_id:null
            }
            await self.$resetpost('rs/entity/t_userfiles',param,{
              resolveMsg: null,
              rejectMsg: '删除关联表具失败!'
            })
            let newparam={
              id:self.areamodel.id,
              f_meterlen:self.meterinfo.length
            }
            let resdata = await self.$resetpost('rs/entity/t_concentrator',newparam,{
              resolveMsg: null,
              rejectMsg: '更新关联表具记录信息!'
            })
            if(resdata.data){
              this.$showAlert('删除表具成功！','success',2000);
            }
          }
        })
      },
      addmeterinfo(){
        if(this.operation && this.operation == 'add'){
          this.$showAlert('请保存后进行新增','warning',2000);
          return;
        }
        this.addmeterinfoshow = true;
      },
      // selectaddress() {
      //   this.showselectaddress = true
      //   this.isSelect = true
      // },
      //初始化数据
      async initdata(rows){
        // 初始化参数
        await this.initParams()
        //初始化meterinfo
        if(this.operation == 'add'){
          //当是添加时
          this.meterinfo = [];
          this.areamodel = {
            f_mpc_phone:'',
            f_mpc_alias:'',
            f_mpc_number:'',
            f_mpc_state:'',
            f_mpc_brand:'',
            f_mpc_address:'',
            f_mpc_type:'',
            f_mpc_ip:'',
            f_mpc_port:'',
            f_mpc_commandtype:'',
            f_mpc_hand_state:'',
            f_mpc_cycle_state:'',
            f_mpc_network:'未组网',
            f_mpc_yz_time:'',
            f_mpc_time1:'',
            f_mpc_time2:'',
            f_comments:'',
            f_operator:this.$login.f.name,
            f_modify_date: this.$login.toStandardTimeString(),
            f_modify_user: this.$login.f.name,
            f_operator_date: this.$login.toStandardTimeString()
          }
        }
        if(this.operation == 'modify'){
          //如果修改表具,需要获取表具信息
          this.areamodel = rows;
          let param = {
            condition: `1=1 and f_orgid='${this.f_filialeids}' and f_concentrator_id='${rows.id}'`
          }
          let self =this;
          //获取用户使用的表具
          await this.$resetpost('rs/sql/concentratormeterQuery',{data:param},{
            resolveMsg: null,
            rejectMsg: '获取用户关联表具失败!'
          }).then((item)=>{
            if(item.data){
                item.data.forEach((items)=>{
                  self.meterinfo.push(items)
                })
            }
          });
          this.areamodel.f_modify_user = this.$login.f.name;
          this.areamodel.f_modify_date = this.$login.toStandardTimeString();
        }
      },
      async initParams() {
        await this.$LoadParams.loadParam(this.f_filialeids)
      },
      //根据名字找数据
      findbyid(list,name){
        var result
        list.forEach((row, n) => {
          if(name==row.id){
            result= row.data
          }
        })
        return result
      },
      //保存
      async confirm(){
        await this.savearchives()

      },
      cancel(){
        this.cleardara()
        this.$dispatch('cancel')
      },
      cleardara(){
         this.meterinfo=[];
          this.areamodel = {
            f_mpc_phone:'',
            f_mpc_alias:'',
            f_mpc_number:'',
            f_mpc_state:'',
            f_mpc_brand:'',
            f_mpc_address:'',
            f_mpc_type:'',
            f_mpc_ip:'',
            f_mpc_port:'',
            f_mpc_commandtype:'',
            f_mpc_hand_state:'',
            f_mpc_cycle_state:'',
            f_mpc_network:'未组网',
            f_mpc_yz_time:'',
            f_mpc_time1:'',
            f_mpc_time2:'',
            f_comments:'',
            f_operator:'',
            f_modify_date:'',
            f_modify_user:'',
            f_operator_date:''
          }
      },
      async savearchives(){
          //保存非民用用户  this.meterinfo  this.areamodel
          if(this.f_filialeids == ''){
            this.f_filialeids = this.$login.f.orgid;
          }
          if(this.areamodel.f_credentials instanceof Array){
            this.areamodel.f_credentials = this.areamodel.f_credentials.length>0? this.areamodel.f_credentials[0]:''
          }
          if(this.areamodel.f_mpc_hand_state && this.areamodel.f_mpc_hand_state!='' ){
            if(this.areamodel.f_mpc_hand_state=='按月' || this.areamodel.f_mpc_hand_state=='按周'){
              if( !this.areamodel.f_mpc_yz_time || this.areamodel.f_mpc_yz_time ==''){
                this.$showAlert('请输入上报时间（月/周）','warning',2000);
                return;
              }
            }
            if(this.areamodel.f_mpc_hand_state=='按日' ){
              if(!this.areamodel.f_mpc_time1 || this.areamodel.f_mpc_time1 =='' ||　!this.areamodel.f_mpc_time2 || this.areamodel.f_mpc_time2 =='' ){
                this.$showAlert('请填写上报时间（小时）或  上报时间（分钟）','warning',2000);
                return;
              }
            }
          }else{
            this.$showAlert('请选择上报类型','warning',2000);
            return;
          }

          if(this.areamodel.f_mpc_yz_time && this.areamodel.f_mpc_yz_time !='' ){
            if( (this.areamodel.f_mpc_yz_time<1 || this.areamodel.f_mpc_yz_time>28) &&   this.areamodel.f_mpc_hand_state=='按月' ){
              this.$showAlert('你输入的 上报时间（月/周）不合法','warning',2000);
              return;
            }
            if( (this.areamodel.f_mpc_yz_time<1 || this.areamodel.f_mpc_yz_time>7 ) && this.areamodel.f_mpc_hand_state=='按周' ){
              this.$showAlert('你输入的 上报时间（月/周）不合法','warning',2000);
              return;
            }
          }
          if(this.areamodel.f_mpc_time1 && this.areamodel.f_mpc_time1 !='' ){
            if( (this.areamodel.f_mpc_time1<0 || this.areamodel.f_mpc_time1>23) &&   (this.areamodel.f_mpc_hand_state=='按日' ||　this.areamodel.f_mpc_hand_state=='按周' || this.areamodel.f_mpc_hand_state=='按月') ){
                this.$showAlert('你输入的 上报时间（小时）不合法','warning',2000);
                return;
            }
          }
          if(this.areamodel.f_mpc_time2 && this.areamodel.f_mpc_time2 !='' ){
            if( (this.areamodel.f_mpc_time2<0 || this.areamodel.f_mpc_time2>59 ) &&  (this.areamodel.f_mpc_hand_state=='按日' ||　this.areamodel.f_mpc_hand_state=='按周' || this.areamodel.f_mpc_hand_state=='按月') ){
              this.$showAlert('你输入的 上报时间（分钟）不合法','warning',2000);
              return;
            }
          }
          let param = {
            meterinfo:this.meterinfo,
            archives:this.areamodel,
            loginuser:{
              f_operator: this.$login.f.name,
              f_operatorid: this.$login.f.id,
              f_orgid: this.$login.f.orgid,
              f_orgname: this.$login.f.orgs,
              f_depid: this.$login.f.depids,
              f_depname: this.$login.f.deps
            },
            operate:this.operation
          }
          await this.$resetpost('rs/logic/concentratorarchives',param,{
            resolveMsg: '保存成功!',
            rejectMsg: '保存失败!'
          });
        this.cleardara()
        this.$dispatch('confirm')
      }
    },
    watch: {
      'areatype'(){
        this.initdata()
      },
      'f_filialeids'(){
        if (this.areamodel.f_filialeid) {
          if (this.areamodel.f_filialeid != this.f_filialeids) {
            this.$dispatch('cancel')
          }
        }
        this.cleardara()
        this.initdata()
      }
    },
    computed: {
      usertypes () {
        return this.$appdata.getParam('用户类型')
      },
      f_price_types () {
        return this.$appdata.getParam('气价类型')
      },

    },
    events: {
      // 'confirmaddress'(res) {
      //   console.log('选定地址', res)
      //   this.showselectaddress = false
      //   this.areamodel.f_address = res.f_address
      //   this.areamodel.f_address_id = res.id
      // },

    }
  }
</script>
<style lang="less" scoped>
  .box {
    width: 727px;
    height: 175px;
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #999999;
    margin-top: 13px;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    border-radius:15px;
  }
  .infosshow{
    height: 50px;text-align: right;
    line-height: 27px; padding-right:18px;
    font-size: 25px;
    width:50px;
    cursor:pointer;
    color:#000;
    position:absolute;
    top:0px;
    right:2px;
  }
  .infosshow:hover{
    color:#333;
  }
  .addmeterc{
    position:absolute;
    right:3px;
    top:-3px;
  }
  .col-sm-6 {
    .font_normal_body {
      width: 80px;
      overflow: auto;
      white-space: nowrap;
    // 指滚动条两边的按钮
          &::-webkit-scrollbar-button {
         display: none;
       }
    // 滚动条的宽度
          &::-webkit-scrollbar {
         width: 5px !important;
         height: 5px !important;
       }
    // 滚动条的设置
          &::-webkit-scrollbar-thumb {
         background-color: #ddd;
         background-clip: padding-box;
       }
    &::-webkit-scrollbar-thumb:hover {
       background-color: #bbb;
     }
    &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
       background: #ededed;
     }
    }
  }
</style>
