1

2f739f2d · 华国豪 · be794b27 · adead566 · 2f739f2d · 2f739f2d
Commit 2f739f2d authored Jul 12, 2019 by 华国豪 🙄
27 changed files
--- a/src/assets/img/persion/bg-daily.png
+++ b/src/assets/img/persion/bg-daily.png
--- a/src/assets/img/persion/nav-hover.png
+++ b/src/assets/img/persion/nav-hover.png
--- a/src/assets/img/persion/nav.png
+++ b/src/assets/img/persion/nav.png
--- a/src/assets/img/persion/split-line.png
+++ b/src/assets/img/persion/split-line.png
--- a/src/assets/img/persion/t-bg.png
+++ b/src/assets/img/persion/t-bg.png
--- a/src/components/SalesModule/groupTourOrder.vue
+++ b/src/components/SalesModule/groupTourOrder.vue
@@ -3962,8 +3962,10 @@
      this.userId = this.getLocalStorage().EmployeeId
      if (this.$route.query.id) {
        this.msg.tempOrderId = this.$route.query.id
+      }else{
+        this.msg.QStartDate = new Date().Format('yyyy-MM-dd')
      }
-      this.msg.QStartDate = new Date().Format('yyyy-MM-dd')
      this.getEmployee()
      this.getList()
      this.getLineList()

--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -1320,6 +1320,7 @@ export default {
      this.hasNewMsg = tempCount;
      this.isFirstLoad = false;
      // this.allSsionList = JSON.parse(JSON.stringify(sessionlist));
      return sessionlist;
    },
    sessionId() {
@@ -1374,8 +1375,8 @@ export default {
    this.MsgBus.$on('doudong',function(){
      that.dou()
    });
-    this.MsgBus.$on('openChat',function(obj){
+    this.MsgBus.$on('enterChat',function(obj){
-      that.lt(obj)
+      that.enterChat(obj)
    });
    //调用初始化信息提示
    this.MsgBus.$on('comMsgTips',function(){
@@ -3692,8 +3693,8 @@ export default {
  color:#333333;
 }
 .changelanguage .el-dropdown-menu__item:hover{
-  background: #D9D9D9;
+  background: #D9D9D9 !important;
-  color:#333333;
+  color:#333333 !important;
 }
 ._dropdown.el-dropdown-menu {
  padding: 0;
@@ -3799,8 +3800,8 @@ export default {
 ._dropdown_other.el-dropdown-menu__item:hover,
 ._dropdown_other.el-dropdown-menu__item:focus {
  transition: background-color 0.3s ease;
-  background-color: #f7f8fa;
+  background-color: #f7f8fa !important;
-  color:#5d78ff;
+  color:#5d78ff !important;
 }
 ._dropdown .popper__arrow::after {
  border-bottom-color: transparent !important;

--- a/src/components/personalCenter.vue
+++ b/src/components/personalCenter.vue
--- a/src/components/personalCenter/cloud.vue
+++ b/src/components/personalCenter/cloud.vue
 <template>
  <div class="cloud-c">
-    <div class="txt">已使用 506.83MB / 1GB</div>
+    <div class="txt">已使用 {{sumSize}} / 1GB</div>
    <div class="progress">
-      <el-tooltip class="item" effect="dark" content="图片文件占用：25.6%" placement="top">
+      <el-tooltip class="item" effect="dark" :content="`图片文件占用：${result[0].zanbi}%`" placement="top">
-        <div class="item green" style="width:25.6%"></div>
+        <div class="item green" :style="{width:result[0].zanbi+'%'}"></div>
      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="视频文件占用：7.4%" placement="top">
+      <el-tooltip class="item" effect="dark" :content="`视频文件占用：${result[1].zanbi}%`" placement="top">
-        <div class="item yellow" style="width:7.4%"></div>
+        <div class="item yellow" :style="{width:result[1].zanbi+'%'}"></div>
      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="其他文件占用：15%" placement="top">
+      <el-tooltip class="item" effect="dark" :content="`其他文件占用：${result[2].zanbi}%`" placement="top">
-        <div class="item red" style="width:15%"></div>
+        <div class="item red"  :style="{width:result[2].zanbi+'%'}"></div>
      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="音频文件占用：2.03%" placement="top">
+      <el-tooltip class="item" effect="dark" :content="`音频文件占用：${0}%`" placement="top">
-        <div class="item blue" style="width:2.03%"></div>
+        <div class="item blue"  :style="{width:0+'%'}"></div>
      </el-tooltip>
    </div>
    <div class="tuli">
@@ -32,7 +32,37 @@
  </div>
 </template>
 <script>
-export default {};
+export default {
+  props:{
+    result:{
+      type:Array,
+      default:[]
+    }
+  },
+  data() {
+    return {
+      sumSize:'0'
+    }
+  },
+  mounted() {
+    let size=0
+    this.result.forEach(x => {
+      size+=x.fileSize
+      x.zanbi=(x.fileSize/(1024*1024)*100).toFixed(2)
+      x.zanbi=x.zanbi<1 &&x.zanbi>0?1:x.zanbi
+    });
+    this.sumSize=this.formatSize(size)
+  },
+  methods: {
+    formatSize(s){
+      if(s<1024){
+        return s+"KB"
+      }else{
+        return (parseFloat(s)/1024).toFixed(2)+"MB"
+      }
+    }
+  },
+};
 </script>
 <style scoped>
 .cloud-c .txt {

--- a/src/components/personalCenter/fince.vue
+++ b/src/components/personalCenter/fince.vue
@@ -5,6 +5,12 @@
 </template>
 <script>
 export default {
+  props:{
+    data:{
+      type:Array,
+      default:[]
+    }
+  },
  data() {
    return {};
  },
@@ -14,16 +20,12 @@ export default {
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
-      var dataAxis = [
+      var dataAxis = [];
-        "9",
+      var data2 = [];
-        "10",
+      this.data.forEach(x=>{
-        "11",
+        dataAxis.push(x.dataStr)
-        "12",
+        data2.push(x.preferPrice)
-        "13",
+      })
-        "14",
-        "15"
-      ];
-      var data2 = [130, 202, 500, 200, 220, 310, 360];
      let option = {
        backgroundColor: "#0abb87", //"#19133e6e",
        title: {
@@ -64,11 +66,7 @@ export default {
          },
          splitLine: {
            show: false
-          },
+          }
-          interval: 600,
-          max: 600,
-          min: 0,
-          splitNumber: 5
        },
        grid: {
          left: -45,

--- a/src/components/personalCenter/gonggao.vue
+++ b/src/components/personalCenter/gonggao.vue
 <template>
-  <div class="ad">
+  <div class="ad" v-loading="loading">
    <div class="content">
-      为逐步规范资金管理，贯彻落实公司制定的货币资金管理制度，从机制上保证资金安全，确保现金合理通畅运行。现就武汉西安昆明人民币指定收款账户作以下规范。各办事处每日下班前应将收到的人民币现金全额存入公司指定账户，以便核对各办事处收款情况；并报送相应现金收支日报表给总部分公司分管会计。具体分配详见附件
+      <div class="notice-title">{{notices.title}}</div>
-      <div class="user">何娟</div>
+      <div v-html="notices.content"></div>
-      <div class="time">2019-07-05</div>
+      <div class="user">{{notices.updateName}}</div>
+      <div class="time">{{notices.updateTime?notices.updateTime.replace("T"," "):""}}</div>
    </div>
    <div class="foot">
      <div class="lt">
-        <div>附件：</div>
+        <!-- <div>附件：</div>
        <div class="v">
          <a href="javascript:void(0);">关于库存现金管理的通知.jpg</a>
-        </div>
+        </div> -->
      </div>
      <div class="rt">
-          <span class="disable">
+        <span :class="{'disable':notices.maxID==0}" @click="queryNotice(notices.maxID)">
-              <i class="iconfont icon-xingzhuang-1"></i>
+          <i class="iconfont icon-xingzhuang-1"></i>
-          </span>
+        </span>
-          <span>
+        <span :class="{'disable':notices.minID==0}" @click="queryNotice(notices.minID)">
-              <i class="iconfont icon-xingzhuang-"></i>
+          <i class="iconfont icon-xingzhuang-"></i>
-          </span>
+        </span>
      </div>
    </div>
  </div>
 </template>
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      notices: {},
+      loading: false
+    };
+  },
+  mounted() {
+    this.queryNotice(-1);
+  },
+  methods: {
+    queryNotice(id) {
+      if (id != 0) {
+        this.loading = true;
+        id = id == -1 ? 0 : id;
+        this.apipost(
+          "customerIndex_post_GetPersonalCenterNotice",
+          { id },
+          r => {
+            this.notices = r.data.data;
+            this.loading = false;
+          }
+        );
+      }
+    }
+  }
+};
 </script>
 <style>
 .ad {
@@ -40,12 +67,17 @@ export default {};
  line-height: 25px;
  position: relative;
 }
+.ad .content .notice-title {
+  padding-bottom: 10px;
+  font-size: 14px;
+  font-family: pingfangR;
+  color: #111;
+  text-align: center;
+}
 .ad .content .time,
 .ad .content .user {
  text-align: right;
-  position: absolute;
+  margin-top: 20px;
-  right: 20px;
-  bottom: 20px;
 }
 .ad .content .user {
  bottom: 50px;
@@ -68,25 +100,27 @@ export default {};
  color: #5d78ff;
  text-decoration: #5d78ff;
 }
-.ad .foot .rt{
+.ad .foot .rt {
-    text-align: right;
+  text-align: right;
-    flex: 1;
+  flex: 1;
 }
-.ad .foot .rt span{
+.ad .foot .rt span {
-    display: inline-block;
+  display: inline-block;
-    height: 28px;
+  height: 28px;
-    width: 28px;
+  width: 28px;
-    line-height: 28px;
+  line-height: 28px;
-    text-align: center;
+  text-align: center;
-    background: #eef1ff;
+  background: #eef1ff;
-    color: #5d78ff;
+  color: #5d78ff;
-    margin-left: 30px;
+  margin-left: 30px;
-    font-size: 12px;
+  font-size: 12px;
+  cursor: pointer;
 }
-.ad .foot .rt span.disable{
+.ad .foot .rt span.disable {
-    color: #CDD3EE;
+  color: #cdd3ee;
+  cursor:no-drop;
 }
 .ad .foot .rt span i {
-    zoom: 0.1;
+  zoom: 0.1;
 }
 </style>
--- a/src/components/personalCenter/imbox.vue
+++ b/src/components/personalCenter/imbox.vue
 <template>
  <div class="imbox-c">
-    <div class="item">
+    <div v-for="(session, index) in data" :key="index">
-      <img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
+      <div class="item" v-if="index<4">
-      <div class="content">
+        <img :src="session.avatar" />
-        <div class="name-box">
+        <div class="content">
-          徐数学
+          <div class="name-box">
-          <el-tag size="mini" style="margin-left:10px">线控</el-tag>
+            {{session.name}}
+            <!-- <el-tag size="mini" style="margin-left:10px">线控</el-tag> -->
+          </div>
+          <div class="last-msg">{{session.lastMsgShow}}</div>
        </div>
-        <div class="last-msg">你看这样可以了吗？</div>
+        <i class="iconfont icon-chat send-msg" title="和TA聊一下" @click="openChart(session)"></i>
      </div>
-      <i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
-    </div>
-    <div class="item">
-      <img src="http://imgfile.oytour.com/Upload/User/636749538798815181.jpg?imageView&thumbnail=40z40" />
-      <div class="content">
-        <div class="name-box">
-          羊三红
-          <el-tag size="mini" style="margin-left:10px">财务总监</el-tag>
-        </div>
-        <div class="last-msg">大概就是这样</div>
-      </div>
-      <i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
-    </div>
-    <div class="item">
-      <img src="http://192.168.2.214:8130/Upload/User/636747229894789210.jpg" />
-      <div class="content">
-        <div class="name-box">
-          李建波
-          <el-tag size="mini" style="margin-left:10px">分公司总经理</el-tag>
-        </div>
-        <div class="last-msg">这次酒店的地址是在阳光新业2栋8楼哈“乐家林语艺术公寓”，出电梯就能看到，报和平国旅入住</div>
-      </div>
-      <i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
    </div>
  </div>
 </template>
 <script>
-export default {};
+import util from "../../utils";
+import config from "../../configs";
+export default {
+  data() {
+    return {
+      data: []
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    openChart(obj) {
+      this.MsgBus.$emit("enterChat", obj);//enterTeamChat enterChat
+    },
+    init() {
+      this.data = this.$store.state.sessionlist.filter(item => {
+        if (
+          item.to === "684cb79fe92f46877777" ||
+          item.to === "684cb79fe92f46888888"
+        )
+          return;
+        let that = this;
+        item.name = "";
+        item.avatar = "";
+        if (item.scene === "p2p") {
+          let userInfo = null;
+          if (item.to !== this.myPhoneId) {
+            userInfo = this.userInfos[item.to];
+          } else {
+            return false;
+          }
+          if (userInfo) {
+            item.name = util.getFriendAlias(userInfo);
+            item.avatar = userInfo.avatar;
+          }
+        } else if (item.scene === "team") {
+          let teamInfo = null;
+          teamInfo = this.$store.state.teamlist.find(team => {
+            return team.teamId === item.to;
+          });
+          if (teamInfo) {
+            item.name = teamInfo.name;
+            item.avatar =
+              "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
+          } else {
+            item.name = "讨论组";
+            item.avatar =
+              "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
+          }
+          if (
+            !this.$store.state.teamMembers[item.to] ||
+            this.$store.state.teamMembers[item.to].length == 0
+          ) {
+            this.$store.dispatch("getTeamMembers", item.to);
+          }
+        }
+        let lastMsg = item.lastMsg || {};
+        if (lastMsg.type === "text") {
+          item.lastMsgShow = lastMsg.text || "";
+        } else if (lastMsg.type === "custom") {
+          item.lastMsgShow = util.parseCustomMsg(lastMsg);
+        } else if (
+          lastMsg.scene === "team" &&
+          lastMsg.type === "notification"
+        ) {
+          item.lastMsgShow = util.generateTeamSysmMsg(lastMsg);
+        } else if (util.mapMsgType(lastMsg)) {
+          item.lastMsgShow = `[${util.mapMsgType(lastMsg)}]`;
+        } else {
+          item.lastMsgShow = "";
+        }
+        if (item.updateTime) {
+          item.updateTimeShow = util.formatDate(item.updateTime, true);
+        }
+        return item;
+      });
+      console.log(this.data);
+    },
+    sessionId() {
+      let sessionId = this.$route.params.sessionId;
+      return sessionId;
+    },
+    getsessionName() {
+      let sessionId = this.sessionId;
+      let user = null;
+      if (/^p2p-/.test(sessionId)) {
+        user = sessionId.replace(/^p2p-/, "");
+        if (user === this.$store.state.userUID) {
+          return "我的手机";
+        } else if (this.isRobot) {
+          return this.robotInfos[user].nick;
+        } else {
+          let userInfo = this.userInfos[user] || {};
+          return util.getFriendAlias(userInfo);
+        }
+      } else if (/^team-/.test(sessionId)) {
+        return "群";
+      }
+    },
+    scene() {
+      return util.parseSession(this.sessionId).scene;
+    },
+    to() {
+      return util.parseSession(this.sessionId).to;
+    },
+    // 判断是否是机器人
+    isRobot() {
+      let sessionId = this.sessionId;
+      let user = null;
+      if (/^p2p-/.test(sessionId)) {
+        user = sessionId.replace(/^p2p-/, "");
+        if (this.robotInfos[user]) {
+          return true;
+        }
+      }
+      return false;
+    },
+    robotInfos() {
+      return this.$store.state.robotInfos;
+    },
+    msglist() {
+      let msgs = this.$store.state.currSessionMsgs;
+      return msgs;
+    },
+    key() {
+      return this.$route.path + Math.random();
+    },
+    sysMsgUnread() {
+      let temp = this.$store.state.sysMsgUnread;
+      let sysMsgUnread = temp.addFriend || 0;
+      sysMsgUnread += temp.team || 0;
+      let customSysMsgUnread = this.$store.state.customSysMsgUnread;
+      return sysMsgUnread + customSysMsgUnread;
+    },
+    canLoadMore() {
+      return !this.$store.state.noMoreHistoryMsgs;
+    },
+    userInfos() {
+      return this.$store.state.userInfos;
+    },
+    myInfo() {
+      return this.$store.state.myInfo;
+    },
+    myPhoneId() {
+      return `${this.$store.state.userUID}`;
+    },
+    teamList() {
+      this.$store.state.teamlist.filter(x => {
+        x.avatar =
+          "http://yx-web.nos.netease.com/webdoc/h5/im/default-group.png";
+        x.id = "team-" + x.teamId;
+        x.scene = "team";
+        x.to = x.teamId;
+        return x;
+      });
+      return this.$store.state.teamlist;
+    }
+  }
+};
 </script>
 <style scoped>
 .imbox-c {
@@ -91,6 +231,5 @@ export default {};
 }
 .imbox-c .item:hover .send-msg {
  color: #5d78ff;
 }
 </style>
--- a/src/components/personalCenter/index.vue
+++ b/src/components/personalCenter/index.vue
--- a/src/components/personalCenter/myorder.vue
+++ b/src/components/personalCenter/myorder.vue
@@ -5,6 +5,12 @@
 </template>
 <script>
 export default {
+  props:{
+    result:{
+      type:Array,
+      default:[]
+    }
+  },
  data() {
    return {};
  },
@@ -14,30 +20,12 @@ export default {
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
-      var dataAxis = [
+      var dataAxis = []
-        "7月1日",
+      var data2 = []
-        "7月2日",
+      this.result.forEach(x=>{
-        "7月3日",
+        dataAxis.push(x.dayNum);
-        "7月4日",
+        data2.push(x.allOrderGuestCount);
-        "7月5日",
+      });
-        "7月6日",
-        "7月7日",
-        "7月8日",
-        "7月9日",
-        "7月10日",
-        "7月11日",
-        "7月12日",
-        "7月13日",
-        "7月14日",
-        "7月15日",
-        "7月16日",
-        "7月17日",
-        "7月18日",
-        "7月19日",
-        "7月20日",
-        "7月21日"
-      ];
-      var data2 = [130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360];
      let option = {
        backgroundColor: "#FFF", //"#19133e6e",
        title: {
@@ -78,11 +66,7 @@ export default {
          },
          splitLine: {
            show: false
-          },
+          }
-          interval: 600,
-          max: 600,
-          min: 0,
-          splitNumber: 5
        },
        grid: {
          left: -45,

--- a/src/components/personalCenter/newpersonal.vue
+++ b/src/components/personalCenter/newpersonal.vue
 <template>
  <div class="newpersonal-c">
-    <div class="item">
+    <div class="item" v-for="(item, index) in users" :key="index">
-      <img src="http://imgfile.oytour.com/New/Upload/User/636952712312267265.jpg" />
+      <img :src="item.EmPhoto" :onerror='defaultHeadImg'/>
      <div class="content">
        <div class="name-box">
-          肖萌
+          {{item.EmName}}
          <i class="iconfont icon-nan nan"></i>
-          <el-tag size="mini" style="margin-left:10px">地接OP</el-tag>
+          <el-tag size="mini" style="margin-left:10px">{{item.PostName}}</el-tag>
        </div>
-        <div class="last-msg">成都印象 · 日本线地接部 · 6月3日入职</div>
+        <div class="last-msg">{{item.CompanyName}} · {{item.DepartmentName}} · 6月3日入职</div>
-      </div>
-      <i class="iconfont icon-chat send-msg" title="认识一下"></i>
-    </div>
-    <div class="item">
-      <img src="../../assets/img/default_head_img.jpg" />
-      <div class="content">
-        <div class="name-box">
-          葛雯进
-          <i class="iconfont icon-nv"></i>
-          <el-tag size="mini" style="margin-left:10px">新人专员</el-tag>
-        </div>
-        <div class="last-msg">成都印象 · 总部业务六组（地州） · 6月11日入职</div>
-      </div>
-      <i class="iconfont icon-chat send-msg" title="认识一下"></i>
-    </div>
-    <div class="item">
-      <img src="../../assets/img/default_head_img.jpg" />
-      <div class="content">
-        <div class="name-box">
-          胡明明
-          <i class="iconfont icon-nv"></i>
-          <el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
-        </div>
-        <div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
-      </div>
-      <i class="iconfont icon-chat send-msg" title="认识一下"></i>
-    </div>
-    <div class="item">
-      <img src="../../assets/img/default_head_img.jpg" />
-      <div class="content">
-        <div class="name-box">
-          胡明明
-          <i class="iconfont icon-nv"></i>
-          <el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
-        </div>
-        <div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
      </div>
      <i class="iconfont icon-chat send-msg" title="认识一下"></i>
    </div>
  </div>
 </template>
 <script>
-export default {};
+export default {
+  props:{
+    users:{
+      type:Array,
+      default:[]
+    }
+  },
+  data() {
+    return {
+      defaultHeadImg:
+        'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  },
+};
 </script>
 <style scoped>
 .newpersonal-c {

--- a/src/components/personalCenter/pingtai.vue
+++ b/src/components/personalCenter/pingtai.vue
@@ -5,6 +5,16 @@
 </template>
 <script>
 export default {
+  props:{
+    result:{
+      type:Array,
+      default:[]
+    },
+    total:{
+      type:Number,
+      default:0
+    }
+  },
  data() {
    return {};
  },
@@ -14,7 +24,11 @@ export default {
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataItemName=[]
+      this.result.forEach(x=>{
+        dataItemName.push(x.name);
+        x.value=x.rate
+      })
      let option = {
        tooltip: {
          trigger: "item",
@@ -24,7 +38,7 @@ export default {
          orient: "vertical",
          left: "70%", //图例距离左的距离
          top: "15%", //图例上下居中
-          data: ["B2B PC平台", "B2B 手机端", "确认件", "麦子助手", "ERP"]
+          data: dataItemName
        },
        calculable: true,
        graphic: [
@@ -33,7 +47,7 @@ export default {
            left: "23%",
            top: "30%",
            style: {
-              text: "151",
+              text: this.total,
              textAlign: "center",
              fill: "#A2A4A7", //文字的颜色
              fontSize: 40,
@@ -93,13 +107,7 @@ export default {
                }
              }
            },
-            data: [
+            data: this.result
-              { value: 335, name: "B2B PC平台" },
-              { value: 310, name: "B2B 手机端" },
-              { value: 234, name: "确认件" },
-              { value: 135, name: "麦子助手" },
-              { value: 1548, name: "ERP" }
-            ]
          }
        ]
      };

--- a/src/components/personalCenter/sell.vue
+++ b/src/components/personalCenter/sell.vue
@@ -2,36 +2,62 @@
  <div class="sell-box">
    <div class="top">
      <div class="h">
-        <img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
+        <img :src="champion.employeeImg" :onerror="defaultHeadImg" />
      </div>
      <img class="caidai" src="../../assets/img/persion/caidai.png" />
      <div class="money">
-          ￥<span class="big">156800.00</span>
+          ￥<span class="big">{{champion.weekTotalIncome}}</span>
      </div>
    </div>
    <div class="bottom">
      <div class="t">
        <div class="l">
-          <img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
+          <img :src="champion.employeeImg" />
          <div class="content">
            <div class="name-box">
-              徐数学
+              {{champion.employeeName}}
            </div>
-            <div class="last-msg">成都印象 · 欧洲销售组</div>
+            <div class="last-msg">{{champion.branchName}} · {{champion.deptName}}</div>
          </div>
        </div>
        <div class="r">
-          <div class="count">18</div>
+          <div class="count">{{champion.rankTopCount}}</div>
          <div class="txt">周冠次数</div>
        </div>
      </div>
      <div class="remark">
-        徐数学在本期的排名中取得了156800.00的业绩，领先第二名51800.00，这是他第18次获得销售周冠的称号，想看他的成功秘笈？戳下面的按钮查看吧！
+        徐数学在本期的排名中取得了{{champion.weekTotalIncome}}的业绩，领先第二名{{champion.differencePrice.toFixed(2)}}，这是他第{{champion.rankTopCount}}次获得销售周冠的称号，想看他的成功秘笈？戳下面的按钮查看吧！
      </div>
-      <div class="more-btn">立即查看</div>
+      <div class="more-btn" @click="openRank">立即查看</div>
    </div>
  </div>
 </template>
+<script>
+export default {
+  props:{
+    champion:{
+      type:Object,
+      default:{}
+    }
+  },
+  data() {
+    return {
+      defaultHeadImg:
+        'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    openRank(){
+      const { href } = this.$router.resolve({ path: "/saleRnkBefore"});
+      window.open(href, "_blank");
+    }
+  },
+}
+</script>
 <style>
 .sell-box {
 }

--- a/src/components/personalCenter/todayOpera.vue
+++ b/src/components/personalCenter/todayOpera.vue
 <template>
  <div class="timelines">
-      <div class="split"></div>
+    <div class="split"></div>
-    <div class="line">
+    <div class="line" v-for="(item, index) in d" :key="index">
-      <div class="time">15:00</div>
+      <div class="time">{{item.Time}}</div>
-      <div class="smybile orange"></div>
+      <div class="smybile" :class="{'orange':item.Type==2,'red':item.Type==3,'green':item.Type==1}"></div>
-      <div class="operaContent">通过ERP后台，下载了0718“让你玩好·九”系列的WORD行程</div>
+      <div class="operaContent">{{item.Content}}</div>
-    </div>
-    <div class="line">
-      <div class="time">14:03</div>
-      <div class="smybile"></div>
-      <div class="operaContent">录入订单编号为：“11123”的旅客，唐杰的信息</div>
-    </div>
-    <div class="line">
-      <div class="time">13:40</div>
-      <div class="smybile orange"></div>
-      <div class="operaContent">通过ERP后台，报入0718“让你玩好·九”系列12人</div>
-    </div>
-    <div class="line">
-      <div class="time">13:35</div>
-      <div class="smybile red"></div>
-      <div class="operaContent">通过了财务单号：“31520”的审批</div>
-    </div>
-    <div class="line">
-      <div class="time">13:20</div>
-      <div class="smybile"></div>
-      <div class="operaContent">通过APP分享了0718“让你玩好·九”系列的行程</div>
-    </div>
-    <div class="line">
-      <div class="time">11:00</div>
-      <div class="smybile"></div>
-      <div class="operaContent orange">新增客户拜访任务，将于7月20日拜访"全球通金牛区门店"客户。</div>
-    </div>
-    <div class="line">
-      <div class="time">10:00</div>
-      <div class="smybile"></div>
-      <div class="operaContent">通过手机APP报名，报入0718“让你玩好·九”系列1人</div>
-    </div>
-    <div class="line">
-      <div class="time">09:45</div>
-      <div class="smybile red"></div>
-      <div class="operaContent">新增收款单，收款金额5500元</div>
-    </div>
-    <div class="line">
-      <div class="time">09:20</div>
-      <div class="smybile green"></div>
-      <div class="operaContent">打卡上班了</div>
    </div>
  </div>
 </template>
@@ -52,26 +12,45 @@
 export default {
  data() {
    return {
-      d: []
+      d: [],
+      loading: true
    };
+  },
+  mounted() {
+    this.queryOpera();
+  },
+  methods: {
+    queryOpera() {
+      let PageIndex = 0;
+      let PageSize = 0;
+      this.loading = true;
+      this.apipost(
+        "orderlog_post_GetToDayOperationLog",
+        { PageIndex, PageSize },
+        r => {
+          this.d = r.data.data;
+          this.loading = false;
+        }
+      );
+    }
  }
 };
 </script>
 <style scoped>
 .timelines {
-    position: relative;
+  position: relative;
 }
 .timelines .line {
  display: flex;
  margin-bottom: 22px;
 }
-.timelines .split{
+.timelines .split {
-        width: 2px;
+  width: 2px;
-    background: #E7E9F5;
+  background: #e7e9f5;
-    position: absolute;
+  position: absolute;
-    top: 4px;
+  top: 4px;
-    bottom: 4px;
+  bottom: 4px;
-    left: 66px;
+  left: 66px;
 }
 .timelines .line .time {
  font-size: 16px;
@@ -87,16 +66,16 @@ export default {
  position: relative;
  border-radius: 100%;
  margin: 4px 15px 0 10px;
-  background: #FFF;
+  background: #fff;
 }
-.timelines .line .smybile.orange{
+.timelines .line .smybile.orange {
-    border-color: #ffb822 !important;
+  border-color: #ffb822 !important;
 }
-.timelines .line .smybile.red{
+.timelines .line .smybile.red {
-    border-color: #fd397a !important;
+  border-color: #fd397a !important;
 }
-.timelines .line .smybile.green{
+.timelines .line .smybile.green {
-    border-color: #0abb87 !important
+  border-color: #0abb87 !important;
 }
 .timelines .line .smybile::after {
  border: 3px solid #fff;

--- a/src/components/personalCenter/tousu.vue
+++ b/src/components/personalCenter/tousu.vue
 <template>
  <div class="inerank-container">
-    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+    <div :style="{height:'100%',width:'100%'}" v-show="result && result.length>0" ref="myLineRank"></div>
+    <div  v-if="!result || result.length==0" class="none-data">
+      非常棒，你到现在还没有过客人投诉哟。
+    </div>
  </div>
 </template>
 <script>
 export default {
+  props:{
+    result:{
+      type:Array,
+      default:[]
+    },
+    total:{
+      type:Number,
+      default:0
+    }
+  },
  data() {
-    return {};
+    return {
+      tousus:null,
+      loading:true
+    };
  },
  mounted() {
-    this.init();
+    if(this.result && this.result.length>0){
+      this.init();
+    }
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataItemName=[]
+      this.result.forEach(x=>{
+        dataItemName.push(x.name);
+        x.value=x.rate
+      })
+      let data=this.result.filter(x=>{
+        if(x.value>0)
+          return x
+      })
      let option = {
        tooltip: {
          trigger: "item",
@@ -24,16 +50,16 @@ export default {
          orient: "vertical",
          left: "40%", //图例距离左的距离
          top: "12%", //图例上下居中
-          data: ["行程景点", "酒店住宿", "销售责任", "导游服务"]
+          data: dataItemName
        },
        calculable: true,
        graphic: [
          {
            type: "text",
-            left: "15.3%",
+            left: "17%",
            top: "30%",
            style: {
-              text: "10",
+              text: this.total,
              textAlign: "center",
              fill: "#A2A4A7", //文字的颜色
              fontSize: 32,
@@ -94,12 +120,7 @@ export default {
                }
              }
            },
-            data: [
+            data: data
-              { value: 1, name: "行程景点" },
-              { value: 3, name: "酒店住宿" },
-              { value: 2, name: "销售责任" },
-              { value: 4, name: "导游服务" }
-            ]
          }
        ]
      };
@@ -109,9 +130,15 @@ export default {
  }
 };
 </script>
-<style>
+<style scoped>
 .inerank-container {
  height: 100%;
  width: 100%;
 }
+.none-data{
+  padding: 50px 0;
+  text-align: center;
+  color: gray;
+  font-size: 12px;
+}
 </style>
--- a/src/components/rank/salesVolumeRank.vue
+++ b/src/components/rank/salesVolumeRank.vue
@@ -317,7 +317,7 @@ export default {
      this.columns.push(notIncome);
      this.columns.push(pCount);
      this.columns.push(cCount);
-      if (this.activeName != "first") {
+      if (this.activeName != "first" && this.activeName!='four') {
        unitPrice.title = "人均销售额";
        this.columns.push(avgPCount);
      }

--- a/src/components/visualization/dailyAnalysis.vue
+++ b/src/components/visualization/dailyAnalysis.vue
--- a/src/components/visualization/pingtai.vue
+++ b/src/components/visualization/pingtai.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataAlias=[]
+      let data2=[]
+      this.data.forEach(x=>{
+        if(x.Num>0){
+          dataAlias.push(x.Name)
+          let t={}
+          t.name=x.Name
+          t.value=x.Num
+          data2.push(t)
+        }
+      })
+      console.log(dataAlias)
+      let option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          left: "50%", //图例距离左的距离
+          top: "10%", //图例上下居中
+          data: dataAlias,
+          textStyle:{//图例文字的样式
+            color:'#FFF',
+            fontSize:12
+          }
+        },
+        calculable: true,
+        series: [
+          {
+            center: ["25%", "45%"],
+            name: "订单来源",
+            type: "pie",
+            radius: ["50%", "70%"],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                borderWidth: 10,
+                borderColor: "#019CFF1a",
+                color: function(params) {
+                  //自定义颜色
+                  var colorList = [
+                    "#FFB822",
+                    "#34BFA3",
+                    "#FD3995",
+                    "#5D78FF",
+                    "#8e44ad",
+                    "#2c3e50",
+                    "#16a085"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            },
+            data: data2
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/visualization/priceQujian.vue
+++ b/src/components/visualization/priceQujian.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    data: {
+      handler: function(val, oldVal) {
+        if (val) {
+          this.init();
+        }
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      var dataAxis = [];
+      var data = [];
+      var dataXAxis = [];
+      this.data.forEach(x => {
+        data.push(x.GuestNum)
+        dataXAxis.push(x.Ratio)
+        dataAxis.push(x.Descritpion)
+      });
+      //   let tempData=JSON.parse(JSON.stringify(this.data))
+      //   tempData.reverse().forEach(x => {
+      //     dataAxis.push(x.departmentName+' '+(x.sales/10000).toFixed(2)+'W')
+      //     data.push(x.sales)
+      //   });
+      var yMax = 2000;
+      var dataShadow = [];
+      for (var i = 0; i < 6; i++) {
+        dataShadow.push(yMax);
+      }
+      let option = {
+        title: {
+          text: "",
+          subtext: "",
+          show: false
+        },
+        xAxis: {
+          type: "value",
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          z: 10,
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: "category",
+          data: dataAxis,
+          inside: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ["#026ABF"]
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#C2D7EB",
+              fontFamily: "pingfang"
+            },
+            inside: true,
+            padding: [2, 0, 0, -80]
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#272938",
+              type: "dotted"
+            },
+            show: false
+          }
+        },
+        grid: {
+          left: "80",
+          right: "10",
+          top: "10",
+          bottom: "0"
+        },
+        series: [
+          {
+            // For shadow
+            type: "bar",
+            itemStyle: {
+              normal: { color: "#0447944d", barBorderRadius: [0, 0, 0, 0] }
+            },
+            barGap: "-100%",
+            barCategoryGap: "40%",
+            data: dataShadow,
+            animation: false,
+            barWidth: 6
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                  { offset: 0, color: "#D367D2" },
+                  { offset: 1, color: "#6246F6" }
+                ]),
+                barBorderRadius: [0, 0, 0, 0],
+                label: {
+                  show: true,
+                  position: "right",
+                  padding: [0, 0, 0, 10],
+                  textStyle: {
+                    color: "white"
+                  }
+                }
+              },
+              emphasis: {
+                color: "#44c4ed"
+              }
+            },
+            barWidth: 6,
+            data: data,
+            animationType: "scale",
+            animationEasing: "elasticOut",
+            animationDelay: function(idx) {
+              return Math.random() * 200;
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/visualization/progress.vue
+++ b/src/components/visualization/progress.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" style="text-align:center" ref="myLineRank"></div>
+    <div class="title" v-if="rank==-1">收客{{this.count}}人</div>
+    <div class="h-title" :style="{color:color}" v-else>
+      <span class="blod">团队排名 {{rank==0?'未上榜':"NO."+rank}}</span>
+      收客{{this.count}}人
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    item: {
+      type: String,
+      default: ""
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: "#46C3F1"
+    },
+    rank: {
+      type: Number,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      center: ["50%", "35%"],
+      pos:"16%",
+      radius:["75%", "85%"]
+    };
+  },
+  mounted() {
+    if (this.rank != -1) {
+        this.center = ["50%", "35%"];
+        this.pos ='40%';
+    }else{
+      this.radius=["85%", "95%"];
+    }
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let option = {
+        grid: {
+          top: 5,
+          bottom: 5
+        },
+        graphic: [
+          {
+            type: "text",
+            left:'center',
+            top: "25%",
+            style: {
+              text: this.percent + "%",
+              textAlign: "center",
+              fill: "#FFF", //文字的颜色
+              fontSize: 20,
+              width: 120,
+              fontFamily: "pingfangR"
+            }
+          },
+          {
+            type: "text",
+            left:'center',
+            top: "43%",
+            style: {
+              text: this.item,
+              textAlign: "center",
+              fill: this.color, //文字的颜色
+              fontSize: 14,
+              fontFamily: "pingfangR"
+            }
+          }
+        ],
+        // color: colors,
+        series: [
+          {
+            name: "valueOfMarket",
+            type: "pie",
+            center: this.center,
+            radius: this.radius,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: "#019CFF1a"
+              }
+            },
+            data: [
+              {
+                value: this.percent,
+                name: this.item,
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    color: this.color
+                  }
+                }
+              },
+              {
+                value: 100 - this.percent,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                color: "#019CFF1a"
+              }
+            ]
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100px;
+  position: relative;
+}
+.inerank-container .title {
+  position: absolute;
+  left: 0%;
+  bottom: 15px;
+  font-size: 12px;
+  color: #46c3f1;
+  text-align: left;
+  width: 100%;
+  padding-left: 26px;
+}
+.inerank-container .h-title {
+  position: absolute;
+  left: 0%;
+  bottom: 14px;
+  font-size: 12px;
+  color: #46c3f1;
+  text-align: center;
+  width: 100%;
+}
+.inerank-container .h-title .blod {
+  color: #facc37;
+  font-size: 14px;
+  font-family: pingfangR;
+  display: block;
+  margin-bottom: 3px;
+}
+</style>
--- a/src/components/visualization/shoukequ.vue
+++ b/src/components/visualization/shoukequ.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    data:{
+      type:Array,
+      default:[]
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataAxis = [];
+      let data2 = [];
+      this.data.forEach(x=>{
+        dataAxis.push(x.Month+"月")
+        data2.push(x.GuestNum)
+      })
+      let option = {
+        title: {
+          show: false
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            textStyle: {
+              color: "#DADADA",
+              fontSize: 12
+            },
+            margin: 10,
+            interval: 0,
+            show: true
+          },
+          type: "category",
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            show: true
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: true
+          },
+          axisTick: {
+            show: true
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#DADADA",
+              fontSize: 12
+            },
+            show: true
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        grid: {
+          left: "38",
+          right: "0",
+          top: "10",
+          bottom: "25"
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "none",
+            snap: true,
+            label: {
+              backgroundColor: "#6a7985"
+            }
+          }
+        },
+        series: [
+          {
+            type: "line",
+            smooth: true,
+            symbol: "none",
+            left: "0",
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: "#FD397A"
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#CE448D" },
+                    { offset: 1, color: "#CE448D00" }
+                  ])
+                },
+                color: "#FD397A"
+              }
+            },
+            data: data2
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/visualization/teamRatio.vue
+++ b/src/components/visualization/teamRatio.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'110%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataAlias=[]
+      let data2=[]
+      this.data.forEach(x=>{
+        if(x.Num>0){
+          dataAlias.push(x.Name)
+          let t={}
+          t.name=x.Name
+          t.value=x.Num
+          data2.push(t)
+        }
+      })
+      let option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        calculable: true,
+        series: [
+          {
+            center: ["50%", "40%"],
+            name: "团队类型",
+            type: "pie",
+            radius: ["70%", "0%"],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                color: function(params) {
+                  //自定义颜色
+                  var colorList = [
+                    "#FFB822",
+                    "#34BFA3",
+                    "#FD3995",
+                    "#5D78FF",
+                    "#8e44ad",
+                    "#2c3e50",
+                    "#16a085"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            },
+            data: data2
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/visualization/yeji.vue
+++ b/src/components/visualization/yeji.vue
+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      var dataAxis = [];
+      var data2 = [];
+      this.data.forEach(x=>{
+        dataAxis.push(x.Month+'月')
+        data2.push(x.SaleMoney)
+      })
+      let option = {
+        title: {
+          show: false
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            textStyle: {
+              color: "#DADADA",
+              fontSize: 12
+            },
+            margin: 10,
+            interval: 0,
+            show: true
+          },
+          type: "category",
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ["#12397C"]
+            }
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: ["#12397C"]
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#DADADA",
+              fontSize: 12
+            },
+            show: true
+          },
+          splitLine: {
+            show: false
+          },
+          scale: true
+        },
+        grid: {
+          left: "68",
+          right: "0",
+          top: "10",
+          bottom: "25"
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "none",
+            snap: true,
+            label: {
+              backgroundColor: "#6a7985"
+            }
+          }
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#4487F0" },
+                  { offset: 0.3, color: "#4487F0" },
+                  { offset: 1, color: "#B0D0F8" }
+                ])
+              }
+            },
+            barWidth: 18,
+            data: data2,
+            animationType: "scale",
+            animationEasing: "elasticOut",
+            animationDelay: function(idx) {
+              return Math.random() * 200;
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>