telephone-clients 4.0.0-1-5 → 4.0.0-1-6

package/src/filiale/meihekou/pc/TelLossList.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="flex-row">
+    <div id="stand-work-list" class="flex bg-white p-10 basic-main" style="flex-direction: row">
+      <div style="width: 40%;height: 100%" v-show="leftShow">
+        <div class="row" style="height: 10%;width: 100%">
+          <div class="form-group form-input-group" style="display: flex;justify-content: flex-start;width: 80%">
+            <label class="font_normal_body" style="width: 20%">开始日期</label>
+            <datepicker placeholder="查询日期"
+                        :value.sync="startDate"
+                        v-model="startDate"
+                        :format="'yyyy-MM-dd HH:mm:ss'"
+            ></datepicker>
+            <label class="font_normal_body" style="width: 20%">结束日期</label>
+            <datepicker placeholder="查询日期"
+                        :value.sync="endDate"
+                        v-model="endDate"
+                        :format="'yyyy-MM-dd HH:mm:ss'"
+            ></datepicker>
+            <button type="button" name="button"
+                    class="button_search button_spacing" style="z-index: 2" @click="searchEcharts()">查询
+            </button>
+          </div>
+        </div>
+        <div style="height: 45%;" id="husunzhexian1"></div>
+        <div style="height: 45%;" id="husunzhexian2"></div>
+      </div>
+      <div class="span" style="width: 60%;overflow: auto">
+        <visit-info v-if="showVisit" :phone="wavflie" :idwavfile="idwavfile" :outltime="outltime" :userip="ip"
+                    @show-obj="watchShow" @visitback="visitback"></visit-info>
+        <criteria-paged :model="model" v-if="!showVisit" v-ref:paged>
+          <criteria partial='criteria' v-ref:criteria @condition-changed='$parent.search'>
+            <div novalidate class="form-inline" partial>
+              <div class="row">
+                <div class="col-sm-3 form-group form-input-group">
+                  <label class="font_normal_body" style="width: 35%">电话号码</label>
+                  <input type="text" class="input_search" v-model="model.telnum" placeholder='电话号码'
+                         condition="telnum like '%{}%'"
+                         :size="model.telnum ? model.telnum.length : 7">
+                </div>
+
+                <div class="col-sm-3 form-group form-input-group">
+                  <label class="font_normal_body" style="width: 40%">来电时间</label>
+                  <datepicker placeholder="来电时间"
+                              :value.sync="model.f_date"
+                              v-model="model.f_date"
+                              :format="'yyyy-MM-dd HH:mm:ss'"
+                              condition="outltime > '{}'"
+                  ></datepicker>
+                </div>
+                <div class="col-sm-3 form-group form-input-group">
+                  <label class="font_normal_body" style="width: 35%">回访状态</label>
+                  <v-select :value.sync="model.f_flghuifang"
+                            v-model="model.f_flghuifang"
+                            :options='$parent.$parent.huifangs'
+                            :value-single="true"
+                            placeholder='请选择回访状态'
+                            close-on-select
+                            style="width: 60%"
+                  ></v-select>
+                </div>
+                <div style="float: right;" class="form-group span">
+                  <button type="button" name="button"
+                          class="button_search button_spacing" @click="search(),$dispatch('search')" style="z-index: 2">
+                    查询
+                  </button>
+                  <export-excel-tel
+                    :data="$parent.$parent.searchData"
+                    :field="$parent.$parent.excelHeaders"
+                    sqlurl="af-telephone/rs/logic/telephoneExport" sql-name="tel_singleTable_OrderBy" template-name='呼损记录导出'
+                    :choose-col="false">
+                  </export-excel-tel>
+                </div>
+              </div>
+            </div>
+          </criteria>
+          <data-grid partial='list' v-ref:grid :model="model" class="list_area table_sy">
+            <template partial='head'>
+              <tr>
+                <th>
+                  <nobr>电话号码</nobr>
+                </th>
+                <th>
+                  <nobr>来电时间</nobr>
+                </th>
+                <th>
+                  <nobr>操作</nobr>
+                </th>
+              </tr>
+            </template>
+            <template partial='body'>
+              <td style="text-align: center">{{ row.telnum }}</td>
+              <td style="text-align: center">{{ row.outltime }}</td>
+              <td style="text-align: center">
+                <button-link v-show="!row.f_flghuifang" type="button" class="btn btn-link"
+                             @click="$parent.$parent.$parent.playWav(row.telnum)">回拨
+                </button-link>
+              </td>
+            </template>
+          </data-grid>
+        </criteria-paged>
+      </div>
+    </div>
+  </div>
+  <!--  <modal :show.sync="showVisit" v-ref:modal backdrop="false">-->
+  <!--    <header slot="modal-header" class="modal-header">-->
+  <!--    </header>-->
+  <!--    <article slot="modal-body" class="modal-body">-->
+  <!--      <visit-info v-if="showVisit" :phone="wavflie" :idwavfile="idwavfile" :outltime="outltime" @show-obj="watchShow"></visit-info>-->
+  <!--    </article>-->
+  <!--    <footer slot="modal-footer" class="modal-footer">-->
+  <!--    </footer>-->
+  <!--  </modal>-->
+</template>
+
+<script>
+import {HttpResetClass, PagedList} from 'vue-client'
+import * as Util from '../Util'
+import {addDate} from "../Util";
+
+export default {
+  title: '呼损记录',
+  data() {
+    return {
+      model: new PagedList('af-telephone/rs/sql/tel_singleTable_OrderBy', 20, {
+        items: "'*'",
+        tablename: "'t_records'",
+        orderitem: "'outltime desc'"
+      }),
+      row: null,
+      show: false,
+      flag: false,
+      f_filiale_id: '',
+      f_filiale: '',
+      wavflie: '',
+      idwavfile: '',
+      leftShow: true,
+      startDate: Util.toStandardDateString(),
+      endDate: Util.toStandardDateString(),
+      orderMan: '',
+      msgs: [],
+      huifangs: [{label: "全部", value: ""}, {label: "已回访", value: "已回访"}, {label: "未回访", value: "未回访"}],
+      service: Object,
+      pendingCount: 0,
+      serobj: Object,
+      showVisit: false,
+      ip: null,
+      outltime: this.getNowFormatDate(),
+      searchData: {
+        items: "*",
+        tablename: "t_records",
+        orderitem: "outltime desc",
+        condition: '1=1'
+      },
+      excelHeaders: {
+        'telnum': '电话号码',
+        'outltime': '来电时间',
+      },
+    }
+  },
+  ready() {
+    this.flag = this.$appdata.getSingleValue('电话记录只查当前公司')
+    if (this.flag) {
+      if (this.flag == '是') {
+        this.f_filiale = this.$login.f.f_fengongsi
+        this.f_filiale_id = this.$login.f.f_orgids
+      }
+    }
+    //获取当前用户的ip地址
+    this.getYourIP(this)
+    this.$refs.paged.$refs.criteria.model.f_flghuifang = '未回访'
+    this.leftShow = (this.$parent.leftShow == undefined ? true : this.$parent.leftShow)
+    this.renderEcharts(Util.toStandardDateString())
+
+
+  },
+  methods: {
+    // 获取本地内网IP (使用Chrome浏览器) 强烈推荐使用小智浏览器
+    /** 如果弹出 请输入通道号，说明未获取到IP，请按以下步骤修改浏览器设置:
+     1.打开地址chrome://flags/
+     2.搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled
+     3.修改成功后重启浏览器并刷新网页即可
+     **/
+    getYourIP(val) {
+      var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
+      if (RTCPeerConnection) (function () {
+          var rtc = new RTCPeerConnection({iceServers: []});
+          if (1 || window.mozRTCPeerConnection) {
+            rtc.createDataChannel('', {reliable: false});
+          };
+          rtc.onicecandidate = function (evt) {
+            if (evt.candidate) grepSDP("a=" + evt.candidate.candidate);
+          };
+          rtc.createOffer(function (offerDesc) {
+            grepSDP(offerDesc.sdp);
+            rtc.setLocalDescription(offerDesc);
+          }, function (e) {
+            console.warn("offer failed", e);
+          });
+          let addrs = Object.create(null);
+          addrs["0.0.0.0"] = false;
+          function updateDisplay(newAddr) {
+            if (newAddr in addrs) return;
+            else addrs[newAddr] = true;
+            var displayAddrs = Object.keys(addrs).filter(function (k) {
+              return addrs[k];
+            });
+            for (var i = 0; i < displayAddrs.length; i++) {
+              if (displayAddrs[i].length > 16) {
+                displayAddrs.splice(i, 1);
+                i--;
+              }
+            }
+            if(!val.ip){
+              val.ip = displayAddrs[0]
+            }
+          }
+          function grepSDP(sdp) {
+            var hosts = [];
+            sdp.split('\r\n').forEach(function (line, index, arr) {
+              if (~line.indexOf("a=candidate")) {
+                var parts = line.split(' '),
+                  addr = parts[4],
+                  type = parts[7];
+                if (type === 'host') updateDisplay(addr);
+              } else if (~line.indexOf("c=")) {
+                var parts = line.split(' '),
+                  addr = parts[2];
+                updateDisplay(addr);
+
+              }
+            });
+          }
+        }
+      )();
+
+    },
+    visitback(val){
+      this.showVisit = false
+      this.wavflie = ''
+      this.idwavfile = ''
+      this.model.f_flghuifang = '未回访'
+    },
+    searchEcharts() {
+      console.log("9334", this.startDate)
+      this.renderEcharts(this.startDate,this.endDate)
+    },
+    //获取当前日期
+    renderEcharts(startDate,endDate) {
+      console.log("933", startDate, endDate)
+      new HttpResetClass().load("post", 'af-telephone/rs/sql/getLossPhoneByTime', {
+        data: {
+          groupitem: 'SUBSTRING(outltime, 0, 11)',
+          condition: `outltime>='${startDate} 00:00:00' and outltime<='${endDate} 23:59:59'`
+        }
+      }, {resolveMsg: null, rejectMsg: null}).then(res => {
+        let myChart1 = this.$echarts.init(document.getElementById(("husunzhexian1")))
+        myChart1.setOption(this.getAOptions("呼损日分析表", res.data))
+      })
+
+      new HttpResetClass().load("post", 'af-telephone/rs/sql/getLossPhoneByTime', {
+        data: {
+          groupitem: "SUBSTRING(outltime, 12, 2)+':00'",
+          condition: `outltime>='${startDate} 08:00:00' and outltime<='${endDate} 18:59:59'`
+        }
+      }, {resolveMsg: null, rejectMsg: null}).then(res => {
+        let myChart1 = this.$echarts.init(document.getElementById(("husunzhexian2")))
+        myChart1.setOption(this.getAOptions("呼损时分析表", res.data))
+      })
+    },
+    getAOptions(title, arr) {
+
+      return {
+        color: ['rgb(155,214,129)', '#73c0de'],
+        title: {
+          text: title
+        },
+        tooltip: {
+          trigger: 'axis',
+          extraCssText:'width:200px;height:100px'
+        },
+        legend: {
+          data: ['忙线', '未接']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: arr.map(item => {
+            if (title === '呼损日分析表') {
+              return item.timearea.substr(5, 5)
+            }
+            return item.timearea
+          })
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '未接',
+            type: 'line',
+            stack: 'Total',
+            data: arr.map(item => item.weijie)
+          },
+          {
+            name: '忙线',
+            type: 'line',
+            stack: 'Total',
+            data: arr.map(item => item.zhanxian)
+          },
+        ]
+      }
+    },
+    getNowFormatDate() {
+      var date = new Date();
+      var seperator1 = "-";
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' 23:59:59'
+      return currentdate;
+    },
+    watchShow(val) {
+      this.showVisit = val
+    },
+    clearVisit() {
+      this.show = false
+    },
+    playWav(val, val1) {
+      if (!this.leftShow) {
+        this.$parent.setUserPhone(val)
+      }
+      this.wavflie = val;
+      this.idwavfile = val1
+      this.showVisit = true
+    },
+    closemodel() {
+      this.showVisit = false
+    },
+    search(args) {
+      if (args.model.f_flghuifang || this.model.f_flghuifang) {
+        if (args.model.f_flghuifang === '已回访' || this.model.f_flghuifang === '已回访') {
+          args.condition += ` and f_flghuifang = '已回访'`
+        } else {
+          args.condition += ` and f_flghuifang is null`
+        }
+      }
+      if (!args.model.f_date) {
+          args.condition += ` and outltime > '${Util.addDate(0)} 00:00:00'`
+      }
+
+      args.condition += " AND isnull(starttime,'') = '' AND isnull(findtime,'') != ''"
+      this.searchData.condition = args.condition
+      this.model.search(args.condition)
+    },
+  },
+}
+</script>

package/src/filiale/meihekou/pc/VisitInfo.vue

@@ -0,0 +1,311 @@
+<template xmlns="http://www.w3.org/1999/html">
+  <div class="auto select-overspread form-horizontal auto">
+    <div class="row workOrderInfo" >
+      <div class="row">
+        <blockquote class="bg-info">
+          工单回访
+        </blockquote>
+      </div>
+      <div class="row roee">
+        <div class="col-sm-6 form-group form-input-group" >
+          <label class="font_normal_body" style="width: 25%">回&ensp;访&ensp;员</label>
+          <input  type="text" class="form-control" v-model="model.f_visitman" placeholder='回访员' >
+        </div>
+        <div class="col-sm-6 form-group form-input-group" >
+          <label class="font_normal_body" style="width: 25%">回访时间</label>
+          <datepicker  placeholder="回访时间"
+                       :value.sync="model.f_visitdate"
+                       :format="'yyyy-MM-dd HH:mm:ss'"
+          ></datepicker>
+        </div>
+        <div class="col-sm-6 form-group form-input-group">
+          <label class="font_normal_body" style="width: 25%">质量满意度</label>
+          <v-select :value.sync="model.f_qualitycore"
+                    :value-single="true"
+                    :options='qualitycase'
+                    placeholder='质量满意情况'
+                    close-on-select>
+          </v-select>
+        </div>
+        <div class="col-sm-6 form-group form-input-group">
+          <label class=" font_normal_body" style="width: 25%">服务满意度</label>
+          <v-select :value.sync="model.f_servicescore"
+                    v-model="model.f_servicescore"
+                    :value-single="true"
+                    :options='servicecase'
+                    placeholder='服务态度满意情况'
+                    close-on-select>
+          </v-select>
+        </div>
+        <div class="col-sm-6 form-group form-input-group">
+          <label class="font_normal_body" style="width: 25%">联系电话</label>
+          <input type="text"  v-model='model.f_phone' class="form-control"/>
+          <button class="button_search button_spacing" @click="callout(model.f_phone)">呼出</button>
+        </div>
+        <div class="col-sm-2 form-group form-input-group button-range" style="min-width: 300px;justify-content:space-between;">
+          <input type="radio" id="one" value="否"  v-model="model.f_again_revisit">
+          <p for="one" style="margin-top: 14px">已完成</p>
+          <input type="radio" id="two" value="是"  v-model="model.f_again_revisit">
+          <p for="two" style="margin-top: 14px">未完成</p>
+
+        </div>
+        <div class="col-sm-6 form-group form-input-group">
+          <label class="font_normal_body" style="width: 25%">地址</label>
+          <input type="text"  :value='row.f_address' class="form-control" disabled/>
+        </div>
+        <div class="col-sm-6 form-group form-input-group" v-if="contextxianshi">
+          <label class="font_normal_body" style="width: 25%">来电内容</label>
+          <input type="text"  :value='contextxianshi' class="form-control" disabled/>
+        </div>
+        <div class="col-sm-6 form-group form-input-group">
+          <label class="font_normal_body" style="width: 25%">维修员备注</label>
+          <input type="text"  :value='row.remark' class="form-control" disabled/>
+        </div>
+
+        <div class="col-sm-12  form-input-group">
+          <label class="font_normal_body" style="width: 12.5%">客户意见</label>
+          <textarea name="name" rows="3" v-model="model.f_remarks" class="form-control ver-textarea"
+                    style="width: 80%"></textarea>
+        </div>
+        <div class="col-sm-12  form-input-group" style="margin-top: 6px">
+          <label class="font_normal_body" style="width: 12.5%">备注</label>
+          <textarea name="name" rows="4" v-model="model.f_bz" class="form-control ver-textarea"
+                    style="width: 80%"></textarea>
+        </div>
+        <div class="row button-range form-group  form-input-group">
+          <button type="button" name="button"
+                  class="button_search button_spacing" @click="saveVisit">提交</button>
+          <button type="button" name="button" style="background-color: #5ac0d9;border-radius: 4px;"
+                  class="button_spacing button_search" @click="clearVisit">取消</button>
+        </div>
+      </div>
+    </div>
+    <modal :show.sync="showcalloutResult" width="50%"  backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        <center><h4 class="modal-title ">{{showTitle}}结果</h4></center>
+      </header>
+      <article slot="modal-body" class="modal-body" style="height: 100px;padding-top: 15px!important;">
+        <div v-show="!calloutResult"><label>正在{{ showTitle }}，请稍后。。。。。。</label></div>
+        <div v-show="calloutResult">
+          <div class="row auto" v-show="calloutResult.area">
+            <label>真实归属地:</label><span>{{calloutResult.area}}</span>
+          </div>
+          <div class="row auto" v-show="calloutResult.calloutNo">
+            <label>真实呼出号码:</label><span>{{calloutResult.calloutNo}}</span>
+          </div>
+          <div class="row auto" v-show="calloutResult.err">
+            <label>其他信息:</label><span>{{calloutResult.err}}</span>
+          </div>
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button type="button" class="btn btn-success" @click='calloutConfirm()'>确认</button>
+      </footer>
+    </modal>
+  </div>
+</template>
+
+<script>
+  import { HttpResetClass } from 'vue-client'
+  import * as Util from '../Util'
+  import wxcon from '../../stores/wxconfig'
+  export default {
+    title: '回访单',
+    props: {
+      contextxianshi:null,
+      row:Object,
+      phone:'',
+      idwavfile:'',
+      outltime:'',
+      showcalloutResult:false,
+      calloutResult:null,
+      showTitle:'呼出',
+      userip:'000.000.000.000'
+
+    },
+    data () {
+      return {
+
+        model:{
+          f_again_revisit: '是',
+          f_visitman:'',
+          f_visitdate:this.getNowFormatDate(),
+          f_qualitycore:'满意',
+          f_servicescore:'满意',
+          f_phone:'',
+          f_remarks:'',
+          f_type:'回访',
+          f_record_sound:'',
+          f_bz:''
+        },
+        idwavfile:'',
+        loginUser: this.$login.f,
+        aChannel:0,
+        aModule:1,
+        qualitycase: this.$appdata.getParam('质量满意情况'),
+        servicecase: this.$appdata.getParam('服务态度满意情况')
+      }
+    },
+    methods: {
+      calloutConfirm(){
+        this.calloutResult=null
+        this.showcalloutResult=false
+      },
+      //获取当前时间
+      getNowFormatDate() {
+        var date = new Date();
+        var seperator1 = "-";
+        var seperator2 = ":";
+        var month = date.getMonth() + 1;
+        var strDate = date.getDate();
+        var hour = date.getHours();
+        var min = date.getMinutes();
+        var second = date.getSeconds();
+        if (month >= 1 && month <= 9) {
+          month = "0" + month;
+        }
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = "0" + strDate;
+        }
+        if (hour >= 0 && hour <= 9) {
+          hour = "0" + hour;
+        }
+        if (min >= 0 && min <= 9) {
+          min = "0" + min;
+        }
+        if (second >= 0 && second <= 9) {
+          second = "0" + second;
+        }
+        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+          + " " + hour + seperator2 + min
+          + seperator2 + second;
+        return currentdate;
+      },
+      // 提交
+      saveVisit () {
+        let service
+        //tag
+        if (this.outltime){
+          this.model.f_type='呼损'
+          service={}
+        }else{
+          service={
+            f_userinfo_id:this.row.f_userinfo_id,
+            f_user_name:this.row.f_user_name,
+            f_address:this.row.f_address,
+            f_workorder_type:this.row.f_workorder_type,
+            f_service_id:this.row.f_service_id
+          }
+        }
+        let data = {model: this.model,
+          service: service,
+          loginUser: {
+            name: this.loginUser.name,
+            ename: this.loginUser.ename,
+            f_orgpathstr:this.loginUser.orgpathstr
+          },
+          // 呼损用（查询条件  时间）
+          outltime:this.outltime,
+          idwavfile:this.idwavfile
+        }
+
+        // 获得数据发送地址
+        let url = 'af-telephone/rs/logic/telvisit'
+        return this.$resetpost(url, data).then((data) => {
+          this.id = JSON.parse(data.data.id).id
+          // 清除对象数据
+          this.model = Object.assign({}, {
+            f_qualitycore:'满意',
+            f_servicescore:'满意',
+            f_phone:'',
+            f_bz:'',
+            f_remarks:'',
+            f_type:'回访',
+            f_visitdate:this.getNowFormatDate(),
+            f_record_sound:''
+          })
+          this.$emit('visitback','commit')
+        })
+      },
+      // 取消
+      clearVisit () {
+        this.$emit('visitback','nodo')
+      },
+      callout(telnum){
+        if(telnum){
+          let http = new HttpResetClass()
+          try{
+            http.load('POST', wxcon.voiceUrl, {
+              aId: this.$login.f.id,
+              aChannel: Util.attendant.aChannel,
+              aModule: Util.attendant.aModule,
+              aBzType:"callout",
+              bzExtra: telnum,
+              bzId: telnum,
+              aName: this.$login.f.name,
+              RoleId:this.$login.f.rolesnames,
+              sendTime:Util.toStandardTimeString()
+            }, {resolveMsg: null, rejectMsg: null}).then((req) => {
+              this.calloutResult = req.data.calloutResult
+              if (req.data.desc === '呼出失败') {
+                this.$showAlert(`呼出${telnum}失败`, 'danger', 0)
+              }else{
+                this.showcalloutResult=true
+                this.showTitle='呼出'
+                // 返回录音ID 存在回访数据里
+                this.model.f_record_sound = req.data.RecordsID
+              }
+            })
+          }catch(e){
+            this.$showAlert(`${e.data},呼出失败`, 'danger', 0)
+            this.callContent = '呼出失败'
+          }
+        }else{
+          this.$showAlert(`无电话号码`, 'danger', 0)
+          this.callContent = '呼出失败'
+        }
+      },
+    },
+    watch: {
+      'phone'(val){
+        this.model.f_phone = val
+      }
+    },
+    ready(){
+      let sql = 'tel_singleTable_OrderBy'
+      let condition = {
+        items: 'tongdao,mokuai',
+        tablename: 'T_IPTONGDAO',
+        condition: `loginip = '${this.userip}'`,
+        orderitem: 'id'
+      }
+      //tag
+      let http = new HttpResetClass()
+      http.load('POST', `af-telephone/rs/logic/tel_getOneData`,  {data: {sql: sql, params: condition}},  {resolveMsg: null, rejectMsg: null}).then((req) => {
+        this.aChannel = parseInt(req.data.tongdao)
+        this.aModule = parseInt(req.data.mokuai)
+      })
+      this.model.f_visitman = this.$login.f.name
+      this.model.f_phone = this.phone
+      this.model.f_bz = this.row ? this.row.f_remarks:''
+    }
+  }
+</script>
+<style scoped lang="less">
+.workOrderInfo{
+  .roee {
+    div {
+      margin-top: 10px;
+      padding-right: 3px;
+    }
+    label {
+      display: inline-block;
+      height: 100%;
+      min-width: 100px;
+      text-align: justify;
+      text-align-last: justify;
+    }
+  }
+}
+</style>
+