system-clients 3.3.6 → 4.0.1

package/src/filiale/qianneng/Main.vue

@@ -1,818 +1,818 @@
-<template>
-<!--  <div class="bg" v-if="isShowbg" @click="jobHidden">-->
-<!--  </div>-->
-  <div @click="hindsetting1()" :class="{'with-watermark':showwatermakeflag,'bg':isShowbg}">
-    <span class="newTip" transition="newTip"  @click="tipClick"  v-if="newTipShow">
-     <span>您有一条新提醒</span>
-    </span>
-    <div class="progress-list" v-if="!isManger" v-show="progressListShow" @click.stop style="padding-top: 8px">
-      <div style="height: auto;width: auto;overflow: hidden;">
-        <span style="float:left; margin-left: 20px;text-align: center;vertical-align: middle"><button class="button_search button_spacing" style="border-radius: 10px"  @click="getProgressList()">
-          <img
-            src="../../assets/refresh.png" style="height: 16px; width: 14px;margin-bottom: 4px">
-          查询更新进度按钮
-        </button></span>
-      </div>
-      <div style="height: 89%; padding:8px">
-        <data-grid :model="jobProgressList" partial='list' class="my_table_sy list_area table_sy" v-ref:job id="job_grid"
-                   :optional="false" style="font-size: 12px;">
-          <template partial='head'>
-              <th><nobr>任务名</nobr></th>
-
-              <th><nobr>执行描述</nobr></th>
-
-              <th><nobr>执行人</nobr></th>
-
-              <th><nobr>任务总数</nobr><label style="font-size: 12px;margin: 0">(个)</label></th>
-
-              <th><nobr>任务进度</nobr></th>
-          </template>
-          <template partial='body'>
-            <td>{{ row.f_job_name }}</td>
-            <td>{{ row.f_start_date}}&nbsp;&nbsp;{{ row.f_job_type }}</td>
-            <td>{{ row.f_job_operator }}</td>
-            <td>{{ row.f_job_count }}</td>
-            <td>
-<!--              <div class="m-progress">-->
-<!--                <div class="m-progress-outer">-->
-<!--                  <div class="m-progress-inner">-->
-<!--                    <div class="['u-progress-bg',{'u-success-bg':progress>=100}]" :style="`height:${progress > 100?100:progress}%;width:${stokeWidth}px;`"></div>-->
-<!--                  </div>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--              <p class="u-progress-text">-->
-<!--                {{ row.f_job_progress == 100||row.f_job_progress > 100? 100: row.f_job_progress}}%-->
-<!--              </p>-->
-              {{row.f_job_progress}}
-            </td>
-          </template>
-        </data-grid>
-      </div>
-    </div>
-    <div class='flex-row  system-main' id="box" v-el:box v-if="!isManger">
-
-      <div class="auto login-operator1" v-if="$refs.mic.tabs.length === 0">
-        <button class="my_button_search button_spacing"  title="点击弹出我的任务" @click.stop="JobProgress">
-          <img
-            src="../../assets/point.png" style="height: 14px; width: 14px;margin-bottom: 4px">
-          {{job_total == 0? ' ':job_total}}&nbsp;我的任务&nbsp;
-        </button>
-            <span>
-               <img
-                 src="../../assets/people.png" height="15" width="15">
-              登录人：</span>
-        <label>{{ orgpathnames }}</label>
-      </div>
-      <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top>
-        <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}">
-          <div class="span system-left-tree " style="height:85%">
-            <h3>{{ systemname }}</h3>
-            <!--            <div class="span" style="margin-bottom:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
-            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon"
-                       :tabs="tabs" v-ref:tree></left-tree>
-            <!--&lt;!&ndash;              <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
-          </div>
-
-          <div class="tree-flex-footer">
-            <!--            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
-            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
-            <dropdown class="auto">
-              <button type="button" data-toggle="dropdown">
-                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
-              </button>
-              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
-                <li>系统信息及设置</li>
-                <!-- <li>{{name}}</li> -->
-                <li>{{ date }}</li>
-                <li @click="openUrl()">售后服务</li>
-                <li @click="qrCode=true">APP二维码</li>
-                <li @click="show=true">修改密码</li>
-                <li @click="AddChangeMsgShow=true">系统版本:V3.0</li>
-              </ul>
-
-            </dropdown>
-            <a href="index.html" @click.prevent="logOut">
-              <img :src="imgs.out" alt=""><span v-if="treeOrIcon">退出系统</span>
-            </a>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
-
-      <div class="flex right-bg  system-right" id="bottom" v-el:bottom>
-        <!-- <operator-badge></operator-badge> -->
-        <div class="span">
-          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
-          <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" :orgpathnames="orgpathnames"
-                   @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
-        </div>
-      </div>
-    </div>
-    <div v-show="isManger">
-      <route v-ref:route></route>
-    </div>
-    <modal v-if="newTipContextShow" :show.sync="newTipContextShow" :backdrop="false">
-      <header slot="modal-header" style="display:none"> </header>
-      <article slot="modal-body" class="modal-body">
-        <form class="form-horizontal">
-          <div class="row">
-            <div class="col-sm-12 " v-if="AppDaiBan !==''">
-              <label class="col-sm-2">报装待办:</label>
-              <span style="font-weight:normal">{{AppDaiBan}}</span>
-            </div>
-            <div class="col-sm-12 " v-if="OrderDaiBan !==''">
-              <label class="col-sm-2">预约待办:</label>
-              <span style="font-weight:normal">{{OrderDaiBan}}</span>
-            </div>
-          </div>
-        </form>
-      </article>
-      <footer  slot="modal-footer" style="height: 8vh" class="modal-footer">
-        <button class="button_search" @click="newTipContextShow = false">确认</button>
-      </footer>
-    </modal>
-
-    <!-- 变更录入 模态框 -->
-    <add-changemsg :show="AddChangeMsgShow" v-on:toggle="AddChangeMsgShow = false"></add-changemsg>
-    <!-- 修改密码组件 -->
-    <modify-pw :show.sync="show" v-if="show"></modify-pw>
-    <!-- 手机扫描二维码 -->
-    <modal :show.sync="qrCode" v-if="qrCode" v-ref:qrmodal backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        请打开手机扫一扫功能进行扫描下载App
-      </header>
-      <article slot="modal-body" class="modal-body">
-        <img style="width: 300px;height: 300px;display: block;margin: auto" src="/images/DownLoadQRCode.png"/>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button type="button" class="btn btn-success" @click='qrCode=false'>关闭</button>
-      </footer>
-    </modal>
-  </div>
-</template>
-
-<script>
-import vue from 'vue'
-import co from 'co'
-import {HttpResetClass} from "vue-client";
-
-let getwartermakr = async function (self) {
-  let param = {
-    tablename: 't_singlevalue',
-    condition: " 1=1 and name=\'水印内容\'"
-  };
-  // todo v4
-  let result = await self.$resetpost('api/af-revenue/sql/saleSingleTable', {data: param}, {resolveMsg: null, rejectMsg: null});
-  if (result && result.data.length > 0) {
-    self.showwatermakeflag = true;
-    createWaterMark(`${result.data[0].value}${self.$login.f.ename}`);
-  } else {
-    self.showwatermakeflag = false;
-  }
-}
-
-let createWaterMark = function (userName) {
-  let style;
-  if (style) style.remove();
-  let width = window.parseInt(document.body.clientWidth);
-  let canvasWidth = width / window.parseInt(width / 320);
-  let fontFamily = window.getComputedStyle(document.body)["font-family"];
-  let canvas = document.createElement("canvas");
-  canvas.width = canvasWidth;
-  canvas.height = 200;
-  let ctx = canvas.getContext("2d");
-  ctx.rotate((-20 * Math.PI) / 180);
-  ctx.font = `20px ${fontFamily}`;
-  ctx.fillStyle = "rgba(8,8,8,.1)";
-  ctx.fillText(userName, 50, 200);
-  let imgSrc = canvas.toDataURL("image/png");
-  style = document.createElement("style");
-  style.innerHTML = `.with-watermark:before{
-        pointer-events: none;
-        content: "";
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: absolute;
-        background-image: url("${imgSrc}");
-    }`;
-  (document.head.append || document.head.appendChild).apply(document.head, [style]);
-}
-
-window.onunload = () => {
-  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
-}
-window.onbeforeunload = () => {
-  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
-}
-export default {
-  title: '主界面',
-  props: ['functions', 'userid', 'config'],
-  data() {
-    return {
-      // 页面提示信息定时器
-      interval: null,
-      newTipShow: false,
-      newTipContextShow: false,
-      AppDaiBan: '',
-      OrderDaiBan: '',
-      // 左侧树下部三个小图标
-      job_total: 0,
-      imgs: {
-        open: '/images/lefticon/菜单伸缩.png',
-        set: '/images/lefticon/系统设置.png',
-        out: '/images/lefticon/退出系统.png',
-        img1: '/images/newStyle/login-user.png',
-        logoimg: '/static/newStyle/fife.png'
-        // img2: '/images/lefticon/退出系统.png',
-      },
-      progress: 0,
-
-      jobProgressList:{rows:[]},
-      progressListShow: false,
-      treeOrIcon: false,
-      qrCode:false,
-      isShowbg: false,
-      isManger: false,
-      show: false,
-      orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
-      systemname: '客服系统',
-      date: this.$login.toStandardDateString(),
-      tabs: [],       //已初始化页签数组
-      selecttab: '',
-      setting: true,
-      srcsetting: '../../static/newStyle/setting.png',
-      showwatermakeflag: false,
-    }
-  },
-  ready() {
-    getwartermakr(this);
-    let component = this.$login.getUrlCompileParames('component')
-    if (component) {
-      this.isManger = true
-      this.$refs.route.init(component, {data: this.functions.functions})
-    }
-    if (this.$login.f.password == '1') {
-      this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
-        if (res == 'confirm')
-          this.show = true
-      })
-    }
-    console.log("系统名称", this.$appdata.getSingleValue("系统名称"))
-    this.systemname = this.$appdata.getSingleValue("系统名称") ? this.$appdata.getSingleValue("系统名称") : '客服系统'
-    this.changeShow()
-    this.gotoWorkOrderSite()
-    // 获取预约列表
-    this.functions.f_role_name && this.functions.f_role_name.includes(this.config.msgRole) && this.config.isTip && this.getOrderList()
-  },
-  methods: {
-    getOrderList(){
-      let times = this.config.times * 60 * 1000
-      console.log("=定时提示间隔=", times)
-      try {
-        this.interval = setInterval(() => {
-          this.getDaiBan()
-        }, times)
-      } catch (error) {
-        console.log('捕获到异常', error)
-      }
-    },
-    JobProgress(){
-      console.log("点击显示任务列表,当前状态:"+this.progressListShow)
-      this.isShowbg = true
-      this.progressListShow = true
-    },
-    async getProgressList(){
-      let list = {}
-      list = await new HttpResetClass().load('POST', 'rs/sql/getJobProgressList', {
-        data: {
-          condition: `and f_operator_id = '${this.$login.f.id}'`
-        }
-      },{resolveMsg: null, rejectMsg: '获取任务进度失败'})
-      let dataList = []
-      let rows = []
-      dataList = list.data
-      for (let i = 0; i < dataList.length; i++) {
-        rows.push(dataList[i])
-      }
-      this.jobProgressList.rows = rows
-    },
-    async getDaiBan(){
-      this.OrderDaiBan  = ''
-      this.AppDaiBan  = ''
-      let http = new HttpResetClass()
-      await http.load('POST', '/api/af-system/sql/singleTable', {data: {
-          tablename:'t_order_center',
-          condition:` (f_orderstate != '预约成功' and f_orgstr ='${this.$login.f.orgid}' and f_orderstate != '预约失败' ) or f_orderstate is null`
-        }}, {
-        resolveMsg: null,
-        rejectMsg: null
-      }).then((res) => {
-        let OrderDaiBan = {}
-        res.data.forEach(item=>{
-          OrderDaiBan[item.f_ordertype] = OrderDaiBan[item.f_ordertype] || []
-          OrderDaiBan[item.f_ordertype].push(item)
-        })
-        if (res.data.length> 0){
-          this.OrderDaiBan = `您有${res.data.length}条需要处理的微信预约业务！`
-          this.OrderDaiBan += `其中 ${Object.keys(OrderDaiBan).map(key=>`${key}：${OrderDaiBan[key].length}条`).join(', ')}`
-        }
-      })
-      let data = {
-        condition: '1 = 1',
-        data: {
-          orgid: this.$login.f.orgid,
-          id: this.$login.f.id
-        }
-      }
-      await http.load('POST', '/rs/sql/checkuser', {data: data}, {
-        resolveMsg: null,
-        rejectMsg: null
-      }).then((res) => {
-        let AppDaiBan = {}
-        res.data.forEach(item=>{
-          AppDaiBan[item.defname] = AppDaiBan[item.defname] || []
-          AppDaiBan[item.defname].push(item)
-        })
-        if (res.data.length> 0){
-          this.AppDaiBan = `您有${res.data.length}条需要处理的报建待办业务！`
-          this.AppDaiBan += `其中 ${Object.keys(AppDaiBan).map(key=>`${key}：${AppDaiBan[key].length}条`).join(', ')}`
-        }
-      }).catch((e)=>{
-        console.error(e)
-      })
-      if(this.AppDaiBan || this.OrderDaiBan){
-        this.newTipShow = true
-      }
-    },
-    // 提醒框被点击
-    tipClick(){
-      this.newTipShow = false
-      this.newTipContextShow = true
-    },
-    gotoWorkOrderSite(){
-      const isRemind =this.$appdata.getSingleValue("站点工单提醒")
-      console.log('站点工单是否提醒',isRemind)
-      if(isRemind && isRemind !== '是'){
-        return
-      }
-      if(this.functions && this.functions.f_role_name && this.functions.f_role_name.indexOf('派单员') !== -1){
-        const data = {
-          "condition":
-            {
-              "condition":" 1=1 ",
-              "sign":"1=1"
-            },
-          "userid":this.functions.name
-        }
-        new HttpResetClass().load('POST','rs/path/operatorService/n', {data}, {resolveMsg: null, rejectMsg: null}).then(res=>{
-          if(res.data && res.data.n !== 0){
-             this.$showMessage('你有'+res.data.n+'个工单待处理，请尽快前往站点工单页面进行处理')
-          }
-        })
-      }
-    },
-    openUrl() {
-      var url = `http://123.60.214.109:8406/submitTicket?personName=${this.$login.f.name}&orgName=${this.$login.f.orgs}`
-      window.open(url, '_blank')
-    },
-    hindsetting() {
-      this.setting = !this.setting
-      if (this.setting) {
-        this.srcsetting = '../../static/newStyle/setting.png'
-      } else {
-        this.srcsetting = '../../static/newStyle/setting1.png'
-      }
-
-    },
-    jobHidden(){
-      this.isShowbg = false
-      this.progressListShow = false
-    },
-    hindsetting1() {
-      this.jobHidden()
-      if (!this.setting) {
-        this.srcsetting = '../../static/newStyle/setting.png'
-        this.setting = true
-      }
-    },
-
-    isnodo(val) {
-      console.log(val, 'ss')
-      this.selecttab = val
-    },
-    unfurl() {
-      if (this.showsum) {
-        this.showsum = false
-      } else {
-        this.showsum = true
-      }
-    },
-    changeShow() {
-      this.treeOrIcon = !this.treeOrIcon
-    },
-    changeMain(userid) {
-      this.$goto('res-main', {userid: this.userid}, 'self')
-    },
-    tabChange(name) {
-      console.log(name, 'tabchanage')
-      this.selecttab = name
-      this.$refs.tree.changeSelect(name)
-    },
-    tabcg(val) {
-      console.log(val)
-      this.tabs = val
-    },
-    logOut() {
-      console.log(this.$login.f)
-      this.$showMessage('您确定要退出系统吗？', ['confirm', 'cancel']).then(async (res) => {
-        if (res == 'confirm') {
-          let data = {
-            userid: this.$login.f.id,
-            username: this.$login.f.name,
-            usertelephone: this.$login.f.f_user_telephone
-          }
-          // todo v4
-          await this.$resetpost('rs/logic/logOut', data, {resolveMsg: '退出成功', rejectMsg: null})
-          window.location.reload()
-        }
-      })
-    }
-  },
-  watch: {
-    'jobProgressList.rows.length'(){
-      let total = 0
-      if(this.jobProgressList.rows.length>0){
-        for (let i = 0; i < this.jobProgressList.rows.length; i++) {
-          if (this.jobProgressList.rows[i].f_job_state != '已完成'){
-            total+= 1
-          }
-        }
-        this.job_total = total
-      }
-    }
-  },
-  computed: {
-    nowDate() {
-      return this.$login.getNowDate()
-    }
-  }
-}
-</script>
-<style lang="less">
-th {
-  text-align: center;
-  vertical-align: middle;
-}
-
-/*表格主体_完成*/
-.my_table_sy tbody tr:nth-child(odd){background-color: #f0f9ec !important;border: solid 1px #f0f4fa !important;color: #666666!important;font-size: 15px!important;font-family: PingFang!important;}
-/*表格主体_未完成*/
-.my_table_sy tbody tr:nth-child(even){background-color: #eff7ff !important;border: solid 1px #f0f4fa !important;color: #666666!important;font-size: 15px!important;font-family: PingFang!important;}
-
-.progress-list {
-  background-color: #e8f4ff;
-  position: absolute;
-  top: 55px;
-  right: 430px;
-  width: 723px;
-  height: 342px;
-  z-index: 10001;
-  color: #9eb3c0;
-  border: 1px solid #7e7c81;
-  border-radius: 15px;
-}
-.my_button_search{width: auto; height: 25px;position: relative; padding-left:2px;top: 0px;line-height: 25px; background-color: #6aa6e2; border-radius: 4px;    border:none; font-family: PingFang; font-size: 15px;     color: #ffffff;}
-.my_button_search:hover{    background-color: #3592ef;}
-
-.m-progress{
-  width: 5px;
-  margin: 0 auto;
-  display: flex;
-  .m-progress-outer{
-    width: 100%;
-    .m-progress-inner{
-      display: inline-block;
-      width: 100%;
-      background-color: #f5f5f5;
-
-    }
-  }
-}
-.bg{
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 999;
-  background-color: rgba(0,0,0,.4);
-}
-
-.newTip-transition {
-  transition: all .4s ease;
-}
-.newTip-enter, .newTip-leave {
-  height: 0;
-  padding: 0 10px;
-  opacity: 0;
-}
-.newTip a {
-  color: #333;
-}
-.newTip {
-  cursor: pointer;
-  text-align: center;
-  position: absolute;
-  top: 3em;
-  margin: 0 auto;
-  width: 200px;
-  left: 48%;
-  line-height: 2;
-  z-index: 10010;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.38);
-  pointer-events: all;
-  border-radius: 4px;
-  background-color: whitesmoke;
-}
-/* 组件内通用样式 */
-.select-error {
-  button {
-    border-bottom: 1px solid #a94442 !important;
-  }
-}
-
-// input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-//       -webkit-appearance:textfield;
-// }
-/* 表单输入框组 */
-.form-input-group {
-  display: flex;
-
-  label {
-    width: 100px;
-    text-align: right;
-
-    + * {
-      flex: 1;
-    }
-  }
-}
-
-// 日期组件在表单中沾满
-.form-horizontal .datepicker {
-  width: 100%;
-}
-
-// 下拉选择框占据剩余全部空间
-.select-overspread {
-  .form-group {
-    // margin: 0px 5px 10px 0px;
-    .form-control {
-      margin-right: 0px;
-    }
-  }
-
-  .btn-group, .btn-group-vertical {
-    width: 100%;
-    // padding-right: 5px;
-    button {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-
-  .dropdown-menu {
-    width: 100%
-  }
-}
-
-// 需要特定宽度的的样式
-.width-60 {
-  width: 60px;
-}
-
-.userpanel {
-  font-weight: 300;
-  color: #333;
-  position: fixed;
-  right: 30px;
-  top: 45px;
-  background-color: white;
-  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
-  padding: 4px 10px 4px 10px;
-  border-radius: 2px;
-}
-
-.width-80 {
-  width: 80px;
-}
-
-.width-100 {
-  width: 100px;
-}
-
-
-/*右侧区域的背景*/
-.right-bg {
-  width: 100%;
-  flex: 1;
-  color: #304A66;
-}
-
-.tree-flex {
-  height: 100%;
-  // width: 150px;
-  /*width: 60px;*/
-  background: #4a7cae;
-  color: #fff;
-
-}
-
-.tree-flex-icon {
-  width: 50px;
-  /*transition: 0.5s;*/
-
-  > .span {
-    overflow-x: visible;
-  }
-}
-
-.tree-flex h3 {
-  text-align: center;
-  margin: 1em 0;
-}
-
-.tree-flex-footer {
-  height: 50px;
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-}
-
-.tree-flex-footer a, .tree-flex-footer button {
-  flex: 1;
-  padding: 8px 5px;
-  font-size: 1.2em;
-  // border-top: 1px solid #697D93;
-  border-top: 1px solid #4a7cae;
-  text-decoration: none;
-  color: #fff;
-  cursor: pointer;
-}
-
-.tree-flex-footer button {
-  height: auto;
-  width: 100%;
-  border-radius: 0px;
-  background-color: rgba(255, 255, 255, 0);
-  border: none;
-  border-top: 1px solid #4a7cae;
-  // border-top: 1px solid #697D93;
-  text-align: left;
-}
-
-.tree-flex-footer button:hover {
-  outline: none;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.tree-flex-footer button:focus {
-  outline: none;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.tree-flex-footer a:hover {
-  color: #FFF;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.tree-flex .btn-group {
-  height: 50px !important;
-}
-
-.tree-flex .dropdown-menu {
-  /* 控制显示列表的样式 */
-  background: #4a7cae;
-  border-radius: 0px;
-  color: #fff;
-  width: auto;
-  margin: 0px;
-  padding: 0px;
-}
-
-.tree-flex .dropdown-menu-up {
-  /* bottom，top控制上下，left和right控制左右*/
-  left: 100% !important;
-  top: auto !important;
-  bottom: 0;
-}
-
-.tree-flex .dropdown-menu-down {
-  /* bottom，top控制上下，left和right控制左右*/
-  left: 100% !important;
-  top: 0 !important;
-}
-
-.tree-flex .dropdown-menu li {
-  text-align: center;
-  line-height: 50px;
-  border-bottom: 1px solid #697D93;
-  font-size: 1.2em;
-  width: auto;
-  white-space: nowrap;
-  cursor: default;
-
-}
-
-.tree-flex .dropdown-menu li + li {
-  text-align: left;
-  border: 0;
-  line-height: 40px;
-  padding-left: 15px;
-  padding-right: 15px;
-  font-size: 1em;
-  cursor: pointer;
-}
-
-.tree-flex .dropdown-menu li + li:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.tree-flex .dropdown-menu li a {
-  border: none;
-  color: #fff;
-  height: 40px;
-  line-height: 40px;
-  font-size: 1em;
-  padding: 0px;
-}
-
-.tree-flex .dropdown-menu li a:hover {
-  color: #fff;
-  background-color: rgba(255, 255, 255, 0);
-}
-
-.tree-flex img {
-  height: 1.2em;
-  width: 1.2em;
-  margin-right: 15px;
-  margin-left: 5px;
-}
-
-.line {
-  height: 100%;
-  width: 5px;
-  background: #4C637B;
-  cursor: e-resize;
-}
-
-/*为树（tree）组件写的样式*/
-.tree-img {
-  font-size: 1.2em;
-}
-
-/*将较长信息截断显示，鼠标悬停显示全部信息*/
-.cutout50 {
-  max-width: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 滚动条样式 */
-/*---滚动条默认显示样式--*/
-::-webkit-scrollbar-thumb {
-  //  display: none;
-  background-color: rgba(0, 0, 0, 0.4);
-  /*background-color:red;*/
-  height: 50px;
-  outline-offset: -2px;
-  /*outline:2px solid #fff;*/
-  -webkit-border-radius: 4px;
-  /*border: 2px solid #fff;*/
-}
-
-/*---鼠标点击滚动条显示样式--*/
-::-webkit-scrollbar-thumb:hover {
-  //  display: inherit;
-  background-color: rgba(0, 0, 0, 0.4);
-  height: 50px;
-  -webkit-border-radius: 4px;
-}
-
-/*---滚动条大小--*/
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-/*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece {
-  /* 全透明，不显示 */
-  background-color: rgba(255, 255, 255, 0);
-  -webkit-border-radius: 0;
-}
-</style>
+<template>
+<!--  <div class="bg" v-if="isShowbg" @click="jobHidden">-->
+<!--  </div>-->
+  <div @click="hindsetting1()" :class="{'with-watermark':showwatermakeflag,'bg':isShowbg}">
+    <span class="newTip" transition="newTip"  @click="tipClick"  v-if="newTipShow">
+     <span>您有一条新提醒</span>
+    </span>
+    <div class="progress-list" v-if="!isManger" v-show="progressListShow" @click.stop style="padding-top: 8px">
+      <div style="height: auto;width: auto;overflow: hidden;">
+        <span style="float:left; margin-left: 20px;text-align: center;vertical-align: middle"><button class="button_search button_spacing" style="border-radius: 10px"  @click="getProgressList()">
+          <img
+            src="../../assets/refresh.png" style="height: 16px; width: 14px;margin-bottom: 4px">
+          查询更新进度按钮
+        </button></span>
+      </div>
+      <div style="height: 89%; padding:8px">
+        <data-grid :model="jobProgressList" partial='list' class="my_table_sy list_area table_sy" v-ref:job id="job_grid"
+                   :optional="false" style="font-size: 12px;">
+          <template partial='head'>
+              <th><nobr>任务名</nobr></th>
+
+              <th><nobr>执行描述</nobr></th>
+
+              <th><nobr>执行人</nobr></th>
+
+              <th><nobr>任务总数</nobr><label style="font-size: 12px;margin: 0">(个)</label></th>
+
+              <th><nobr>任务进度</nobr></th>
+          </template>
+          <template partial='body'>
+            <td>{{ row.f_job_name }}</td>
+            <td>{{ row.f_start_date}}&nbsp;&nbsp;{{ row.f_job_type }}</td>
+            <td>{{ row.f_job_operator }}</td>
+            <td>{{ row.f_job_count }}</td>
+            <td>
+<!--              <div class="m-progress">-->
+<!--                <div class="m-progress-outer">-->
+<!--                  <div class="m-progress-inner">-->
+<!--                    <div class="['u-progress-bg',{'u-success-bg':progress>=100}]" :style="`height:${progress > 100?100:progress}%;width:${stokeWidth}px;`"></div>-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <p class="u-progress-text">-->
+<!--                {{ row.f_job_progress == 100||row.f_job_progress > 100? 100: row.f_job_progress}}%-->
+<!--              </p>-->
+              {{row.f_job_progress}}
+            </td>
+          </template>
+        </data-grid>
+      </div>
+    </div>
+    <div class='flex-row  system-main' id="box" v-el:box v-if="!isManger">
+
+      <div class="auto login-operator1" v-if="$refs.mic.tabs.length === 0">
+        <button class="my_button_search button_spacing"  title="点击弹出我的任务" @click.stop="JobProgress">
+          <img
+            src="../../assets/point.png" style="height: 14px; width: 14px;margin-bottom: 4px">
+          {{job_total == 0? ' ':job_total}}&nbsp;我的任务&nbsp;
+        </button>
+            <span>
+               <img
+                 src="../../assets/people.png" height="15" width="15">
+              登录人：</span>
+        <label>{{ orgpathnames }}</label>
+      </div>
+      <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top>
+        <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}">
+          <div class="span system-left-tree " style="height:85%">
+            <h3>{{ systemname }}</h3>
+            <!--            <div class="span" style="margin-bottom:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
+            <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon"
+                       :tabs="tabs" v-ref:tree></left-tree>
+            <!--&lt;!&ndash;              <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
+          </div>
+
+          <div class="tree-flex-footer">
+            <!--            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
+            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
+            <dropdown class="auto">
+              <button type="button" data-toggle="dropdown">
+                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
+              </button>
+              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
+                <li>系统信息及设置</li>
+                <!-- <li>{{name}}</li> -->
+                <li>{{ date }}</li>
+                <li @click="openUrl()">售后服务</li>
+                <li @click="qrCode=true">APP二维码</li>
+                <li @click="show=true">修改密码</li>
+                <li @click="AddChangeMsgShow=true">系统版本:V3.0</li>
+              </ul>
+
+            </dropdown>
+            <a href="index.html" @click.prevent="logOut">
+              <img :src="imgs.out" alt=""><span v-if="treeOrIcon">退出系统</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
+
+      <div class="flex right-bg  system-right" id="bottom" v-el:bottom>
+        <!-- <operator-badge></operator-badge> -->
+        <div class="span">
+          <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
+          <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" :orgpathnames="orgpathnames"
+                   @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
+        </div>
+      </div>
+    </div>
+    <div v-show="isManger">
+      <route v-ref:route></route>
+    </div>
+    <modal v-if="newTipContextShow" :show.sync="newTipContextShow" :backdrop="false">
+      <header slot="modal-header" style="display:none"> </header>
+      <article slot="modal-body" class="modal-body">
+        <form class="form-horizontal">
+          <div class="row">
+            <div class="col-sm-12 " v-if="AppDaiBan !==''">
+              <label class="col-sm-2">报装待办:</label>
+              <span style="font-weight:normal">{{AppDaiBan}}</span>
+            </div>
+            <div class="col-sm-12 " v-if="OrderDaiBan !==''">
+              <label class="col-sm-2">预约待办:</label>
+              <span style="font-weight:normal">{{OrderDaiBan}}</span>
+            </div>
+          </div>
+        </form>
+      </article>
+      <footer  slot="modal-footer" style="height: 8vh" class="modal-footer">
+        <button class="button_search" @click="newTipContextShow = false">确认</button>
+      </footer>
+    </modal>
+
+    <!-- 变更录入 模态框 -->
+    <add-changemsg :show="AddChangeMsgShow" v-on:toggle="AddChangeMsgShow = false"></add-changemsg>
+    <!-- 修改密码组件 -->
+    <modify-pw :show.sync="show" v-if="show"></modify-pw>
+    <!-- 手机扫描二维码 -->
+    <modal :show.sync="qrCode" v-if="qrCode" v-ref:qrmodal backdrop="false">
+      <header slot="modal-header" class="modal-header">
+        请打开手机扫一扫功能进行扫描下载App
+      </header>
+      <article slot="modal-body" class="modal-body">
+        <img style="width: 300px;height: 300px;display: block;margin: auto" src="/images/DownLoadQRCode.png"/>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+        <button type="button" class="btn btn-success" @click='qrCode=false'>关闭</button>
+      </footer>
+    </modal>
+  </div>
+</template>
+
+<script>
+import vue from 'vue'
+import co from 'co'
+import {HttpResetClass} from "vue-client";
+
+let getwartermakr = async function (self) {
+  let param = {
+    tablename: 't_singlevalue',
+    condition: " 1=1 and name=\'水印内容\'"
+  };
+  // todo v4
+  let result = await self.$resetpost('api/af-revenue/sql/saleSingleTable', {data: param}, {resolveMsg: null, rejectMsg: null});
+  if (result && result.data.length > 0) {
+    self.showwatermakeflag = true;
+    createWaterMark(`${result.data[0].value}${self.$login.f.ename}`);
+  } else {
+    self.showwatermakeflag = false;
+  }
+}
+
+let createWaterMark = function (userName) {
+  let style;
+  if (style) style.remove();
+  let width = window.parseInt(document.body.clientWidth);
+  let canvasWidth = width / window.parseInt(width / 320);
+  let fontFamily = window.getComputedStyle(document.body)["font-family"];
+  let canvas = document.createElement("canvas");
+  canvas.width = canvasWidth;
+  canvas.height = 200;
+  let ctx = canvas.getContext("2d");
+  ctx.rotate((-20 * Math.PI) / 180);
+  ctx.font = `20px ${fontFamily}`;
+  ctx.fillStyle = "rgba(8,8,8,.1)";
+  ctx.fillText(userName, 50, 200);
+  let imgSrc = canvas.toDataURL("image/png");
+  style = document.createElement("style");
+  style.innerHTML = `.with-watermark:before{
+        pointer-events: none;
+        content: "";
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: absolute;
+        background-image: url("${imgSrc}");
+    }`;
+  (document.head.append || document.head.appendChild).apply(document.head, [style]);
+}
+
+window.onunload = () => {
+  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
+}
+window.onbeforeunload = () => {
+  vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
+}
+export default {
+  title: '主界面',
+  props: ['functions', 'userid', 'config'],
+  data() {
+    return {
+      // 页面提示信息定时器
+      interval: null,
+      newTipShow: false,
+      newTipContextShow: false,
+      AppDaiBan: '',
+      OrderDaiBan: '',
+      // 左侧树下部三个小图标
+      job_total: 0,
+      imgs: {
+        open: '/images/lefticon/菜单伸缩.png',
+        set: '/images/lefticon/系统设置.png',
+        out: '/images/lefticon/退出系统.png',
+        img1: '/images/newStyle/login-user.png',
+        logoimg: '/static/newStyle/fife.png'
+        // img2: '/images/lefticon/退出系统.png',
+      },
+      progress: 0,
+
+      jobProgressList:{rows:[]},
+      progressListShow: false,
+      treeOrIcon: false,
+      qrCode:false,
+      isShowbg: false,
+      isManger: false,
+      show: false,
+      orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
+      systemname: '客服系统',
+      date: this.$login.toStandardDateString(),
+      tabs: [],       //已初始化页签数组
+      selecttab: '',
+      setting: true,
+      srcsetting: '../../static/newStyle/setting.png',
+      showwatermakeflag: false,
+    }
+  },
+  ready() {
+    getwartermakr(this);
+    let component = this.$login.getUrlCompileParames('component')
+    if (component) {
+      this.isManger = true
+      this.$refs.route.init(component, {data: this.functions.functions})
+    }
+    if (this.$login.f.password == '1') {
+      this.$showMessage('本地登录系统为此账户的初始密码，请确认修改密码！！！', ['confirm', 'cancel']).then((res) => {
+        if (res == 'confirm')
+          this.show = true
+      })
+    }
+    console.log("系统名称", this.$appdata.getSingleValue("系统名称"))
+    this.systemname = this.$appdata.getSingleValue("系统名称") ? this.$appdata.getSingleValue("系统名称") : '客服系统'
+    this.changeShow()
+    this.gotoWorkOrderSite()
+    // 获取预约列表
+    this.functions.f_role_name && this.functions.f_role_name.includes(this.config.msgRole) && this.config.isTip && this.getOrderList()
+  },
+  methods: {
+    getOrderList(){
+      let times = this.config.times * 60 * 1000
+      console.log("=定时提示间隔=", times)
+      try {
+        this.interval = setInterval(() => {
+          this.getDaiBan()
+        }, times)
+      } catch (error) {
+        console.log('捕获到异常', error)
+      }
+    },
+    JobProgress(){
+      console.log("点击显示任务列表,当前状态:"+this.progressListShow)
+      this.isShowbg = true
+      this.progressListShow = true
+    },
+    async getProgressList(){
+      let list = {}
+      list = await new HttpResetClass().load('POST', 'rs/sql/getJobProgressList', {
+        data: {
+          condition: `and f_operator_id = '${this.$login.f.id}'`
+        }
+      },{resolveMsg: null, rejectMsg: '获取任务进度失败'})
+      let dataList = []
+      let rows = []
+      dataList = list.data
+      for (let i = 0; i < dataList.length; i++) {
+        rows.push(dataList[i])
+      }
+      this.jobProgressList.rows = rows
+    },
+    async getDaiBan(){
+      this.OrderDaiBan  = ''
+      this.AppDaiBan  = ''
+      let http = new HttpResetClass()
+      await http.load('POST', '/api/af-system/sql/singleTable', {data: {
+          tablename:'t_order_center',
+          condition:` (f_orderstate != '预约成功' and f_orgstr ='${this.$login.f.orgid}' and f_orderstate != '预约失败' ) or f_orderstate is null`
+        }}, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then((res) => {
+        let OrderDaiBan = {}
+        res.data.forEach(item=>{
+          OrderDaiBan[item.f_ordertype] = OrderDaiBan[item.f_ordertype] || []
+          OrderDaiBan[item.f_ordertype].push(item)
+        })
+        if (res.data.length> 0){
+          this.OrderDaiBan = `您有${res.data.length}条需要处理的微信预约业务！`
+          this.OrderDaiBan += `其中 ${Object.keys(OrderDaiBan).map(key=>`${key}：${OrderDaiBan[key].length}条`).join(', ')}`
+        }
+      })
+      let data = {
+        condition: '1 = 1',
+        data: {
+          orgid: this.$login.f.orgid,
+          id: this.$login.f.id
+        }
+      }
+      await http.load('POST', '/rs/sql/checkuser', {data: data}, {
+        resolveMsg: null,
+        rejectMsg: null
+      }).then((res) => {
+        let AppDaiBan = {}
+        res.data.forEach(item=>{
+          AppDaiBan[item.defname] = AppDaiBan[item.defname] || []
+          AppDaiBan[item.defname].push(item)
+        })
+        if (res.data.length> 0){
+          this.AppDaiBan = `您有${res.data.length}条需要处理的报建待办业务！`
+          this.AppDaiBan += `其中 ${Object.keys(AppDaiBan).map(key=>`${key}：${AppDaiBan[key].length}条`).join(', ')}`
+        }
+      }).catch((e)=>{
+        console.error(e)
+      })
+      if(this.AppDaiBan || this.OrderDaiBan){
+        this.newTipShow = true
+      }
+    },
+    // 提醒框被点击
+    tipClick(){
+      this.newTipShow = false
+      this.newTipContextShow = true
+    },
+    gotoWorkOrderSite(){
+      const isRemind =this.$appdata.getSingleValue("站点工单提醒")
+      console.log('站点工单是否提醒',isRemind)
+      if(isRemind && isRemind !== '是'){
+        return
+      }
+      if(this.functions && this.functions.f_role_name && this.functions.f_role_name.indexOf('派单员') !== -1){
+        const data = {
+          "condition":
+            {
+              "condition":" 1=1 ",
+              "sign":"1=1"
+            },
+          "userid":this.functions.name
+        }
+        new HttpResetClass().load('POST','rs/path/operatorService/n', {data}, {resolveMsg: null, rejectMsg: null}).then(res=>{
+          if(res.data && res.data.n !== 0){
+             this.$showMessage('你有'+res.data.n+'个工单待处理，请尽快前往站点工单页面进行处理')
+          }
+        })
+      }
+    },
+    openUrl() {
+      var url = `http://123.60.214.109:8406/submitTicket?personName=${this.$login.f.name}&orgName=${this.$login.f.orgs}`
+      window.open(url, '_blank')
+    },
+    hindsetting() {
+      this.setting = !this.setting
+      if (this.setting) {
+        this.srcsetting = '../../static/newStyle/setting.png'
+      } else {
+        this.srcsetting = '../../static/newStyle/setting1.png'
+      }
+
+    },
+    jobHidden(){
+      this.isShowbg = false
+      this.progressListShow = false
+    },
+    hindsetting1() {
+      this.jobHidden()
+      if (!this.setting) {
+        this.srcsetting = '../../static/newStyle/setting.png'
+        this.setting = true
+      }
+    },
+
+    isnodo(val) {
+      console.log(val, 'ss')
+      this.selecttab = val
+    },
+    unfurl() {
+      if (this.showsum) {
+        this.showsum = false
+      } else {
+        this.showsum = true
+      }
+    },
+    changeShow() {
+      this.treeOrIcon = !this.treeOrIcon
+    },
+    changeMain(userid) {
+      this.$goto('res-main', {userid: this.userid}, 'self')
+    },
+    tabChange(name) {
+      console.log(name, 'tabchanage')
+      this.selecttab = name
+      this.$refs.tree.changeSelect(name)
+    },
+    tabcg(val) {
+      console.log(val)
+      this.tabs = val
+    },
+    logOut() {
+      console.log(this.$login.f)
+      this.$showMessage('您确定要退出系统吗？', ['confirm', 'cancel']).then(async (res) => {
+        if (res == 'confirm') {
+          let data = {
+            userid: this.$login.f.id,
+            username: this.$login.f.name,
+            usertelephone: this.$login.f.f_user_telephone
+          }
+          // todo v4
+          await this.$resetpost('rs/logic/logOut', data, {resolveMsg: '退出成功', rejectMsg: null})
+          window.location.reload()
+        }
+      })
+    }
+  },
+  watch: {
+    'jobProgressList.rows.length'(){
+      let total = 0
+      if(this.jobProgressList.rows.length>0){
+        for (let i = 0; i < this.jobProgressList.rows.length; i++) {
+          if (this.jobProgressList.rows[i].f_job_state != '已完成'){
+            total+= 1
+          }
+        }
+        this.job_total = total
+      }
+    }
+  },
+  computed: {
+    nowDate() {
+      return this.$login.getNowDate()
+    }
+  }
+}
+</script>
+<style lang="less">
+th {
+  text-align: center;
+  vertical-align: middle;
+}
+
+/*表格主体_完成*/
+.my_table_sy tbody tr:nth-child(odd){background-color: #f0f9ec !important;border: solid 1px #f0f4fa !important;color: #666666!important;font-size: 15px!important;font-family: PingFang!important;}
+/*表格主体_未完成*/
+.my_table_sy tbody tr:nth-child(even){background-color: #eff7ff !important;border: solid 1px #f0f4fa !important;color: #666666!important;font-size: 15px!important;font-family: PingFang!important;}
+
+.progress-list {
+  background-color: #e8f4ff;
+  position: absolute;
+  top: 55px;
+  right: 430px;
+  width: 723px;
+  height: 342px;
+  z-index: 10001;
+  color: #9eb3c0;
+  border: 1px solid #7e7c81;
+  border-radius: 15px;
+}
+.my_button_search{width: auto; height: 25px;position: relative; padding-left:2px;top: 0px;line-height: 25px; background-color: #6aa6e2; border-radius: 4px;    border:none; font-family: PingFang; font-size: 15px;     color: #ffffff;}
+.my_button_search:hover{    background-color: #3592ef;}
+
+.m-progress{
+  width: 5px;
+  margin: 0 auto;
+  display: flex;
+  .m-progress-outer{
+    width: 100%;
+    .m-progress-inner{
+      display: inline-block;
+      width: 100%;
+      background-color: #f5f5f5;
+
+    }
+  }
+}
+.bg{
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background-color: rgba(0,0,0,.4);
+}
+
+.newTip-transition {
+  transition: all .4s ease;
+}
+.newTip-enter, .newTip-leave {
+  height: 0;
+  padding: 0 10px;
+  opacity: 0;
+}
+.newTip a {
+  color: #333;
+}
+.newTip {
+  cursor: pointer;
+  text-align: center;
+  position: absolute;
+  top: 3em;
+  margin: 0 auto;
+  width: 200px;
+  left: 48%;
+  line-height: 2;
+  z-index: 10010;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.38);
+  pointer-events: all;
+  border-radius: 4px;
+  background-color: whitesmoke;
+}
+/* 组件内通用样式 */
+.select-error {
+  button {
+    border-bottom: 1px solid #a94442 !important;
+  }
+}
+
+// input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
+//       -webkit-appearance:textfield;
+// }
+/* 表单输入框组 */
+.form-input-group {
+  display: flex;
+
+  label {
+    width: 100px;
+    text-align: right;
+
+    + * {
+      flex: 1;
+    }
+  }
+}
+
+// 日期组件在表单中沾满
+.form-horizontal .datepicker {
+  width: 100%;
+}
+
+// 下拉选择框占据剩余全部空间
+.select-overspread {
+  .form-group {
+    // margin: 0px 5px 10px 0px;
+    .form-control {
+      margin-right: 0px;
+    }
+  }
+
+  .btn-group, .btn-group-vertical {
+    width: 100%;
+    // padding-right: 5px;
+    button {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  .dropdown-menu {
+    width: 100%
+  }
+}
+
+// 需要特定宽度的的样式
+.width-60 {
+  width: 60px;
+}
+
+.userpanel {
+  font-weight: 300;
+  color: #333;
+  position: fixed;
+  right: 30px;
+  top: 45px;
+  background-color: white;
+  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
+  padding: 4px 10px 4px 10px;
+  border-radius: 2px;
+}
+
+.width-80 {
+  width: 80px;
+}
+
+.width-100 {
+  width: 100px;
+}
+
+
+/*右侧区域的背景*/
+.right-bg {
+  width: 100%;
+  flex: 1;
+  color: #304A66;
+}
+
+.tree-flex {
+  height: 100%;
+  // width: 150px;
+  /*width: 60px;*/
+  background: #4a7cae;
+  color: #fff;
+
+}
+
+.tree-flex-icon {
+  width: 50px;
+  /*transition: 0.5s;*/
+
+  > .span {
+    overflow-x: visible;
+  }
+}
+
+.tree-flex h3 {
+  text-align: center;
+  margin: 1em 0;
+}
+
+.tree-flex-footer {
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+}
+
+.tree-flex-footer a, .tree-flex-footer button {
+  flex: 1;
+  padding: 8px 5px;
+  font-size: 1.2em;
+  // border-top: 1px solid #697D93;
+  border-top: 1px solid #4a7cae;
+  text-decoration: none;
+  color: #fff;
+  cursor: pointer;
+}
+
+.tree-flex-footer button {
+  height: auto;
+  width: 100%;
+  border-radius: 0px;
+  background-color: rgba(255, 255, 255, 0);
+  border: none;
+  border-top: 1px solid #4a7cae;
+  // border-top: 1px solid #697D93;
+  text-align: left;
+}
+
+.tree-flex-footer button:hover {
+  outline: none;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.tree-flex-footer button:focus {
+  outline: none;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.tree-flex-footer a:hover {
+  color: #FFF;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.tree-flex .btn-group {
+  height: 50px !important;
+}
+
+.tree-flex .dropdown-menu {
+  /* 控制显示列表的样式 */
+  background: #4a7cae;
+  border-radius: 0px;
+  color: #fff;
+  width: auto;
+  margin: 0px;
+  padding: 0px;
+}
+
+.tree-flex .dropdown-menu-up {
+  /* bottom，top控制上下，left和right控制左右*/
+  left: 100% !important;
+  top: auto !important;
+  bottom: 0;
+}
+
+.tree-flex .dropdown-menu-down {
+  /* bottom，top控制上下，left和right控制左右*/
+  left: 100% !important;
+  top: 0 !important;
+}
+
+.tree-flex .dropdown-menu li {
+  text-align: center;
+  line-height: 50px;
+  border-bottom: 1px solid #697D93;
+  font-size: 1.2em;
+  width: auto;
+  white-space: nowrap;
+  cursor: default;
+
+}
+
+.tree-flex .dropdown-menu li + li {
+  text-align: left;
+  border: 0;
+  line-height: 40px;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 1em;
+  cursor: pointer;
+}
+
+.tree-flex .dropdown-menu li + li:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.tree-flex .dropdown-menu li a {
+  border: none;
+  color: #fff;
+  height: 40px;
+  line-height: 40px;
+  font-size: 1em;
+  padding: 0px;
+}
+
+.tree-flex .dropdown-menu li a:hover {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.tree-flex img {
+  height: 1.2em;
+  width: 1.2em;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+
+.line {
+  height: 100%;
+  width: 5px;
+  background: #4C637B;
+  cursor: e-resize;
+}
+
+/*为树（tree）组件写的样式*/
+.tree-img {
+  font-size: 1.2em;
+}
+
+/*将较长信息截断显示，鼠标悬停显示全部信息*/
+.cutout50 {
+  max-width: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 滚动条样式 */
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb {
+  //  display: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  /*background-color:red;*/
+  height: 50px;
+  outline-offset: -2px;
+  /*outline:2px solid #fff;*/
+  -webkit-border-radius: 4px;
+  /*border: 2px solid #fff;*/
+}
+
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover {
+  //  display: inherit;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 50px;
+  -webkit-border-radius: 4px;
+}
+
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece {
+  /* 全透明，不显示 */
+  background-color: rgba(255, 255, 255, 0);
+  -webkit-border-radius: 0;
+}
+</style>