#

whycq

2023-11-22 ba0dbe6ac3ec3604fe23dad7531e7c687f500965

 pages/index/index.vue

@@ -1,52 +1,291 @@
<template>
   <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view class="text-area">
         <text class="title">{{title}}</text>
   <view>
      <view class="box" :class="it.bg" v-for="it in mainItem">
         <view class="box-title">{{it.title}}</view>
         <view class="box-item">
            <view class="item-title">{{it.subTitle}}</view>
            <view class="item-content">
               <view style="width: 50%;" v-for="item in it.items">
						
                  <view class="content-data">
                     <text class="c-data">{{item.content}}</text>
                     <text class="c-val">{{item.unit}}</text>
                  </view>
                  <view style="font-size: 16rpx;">{{item.name}}</view>
               </view>
            </view>
         </view>
      </view>
      <view class="top-box">
         <view class="box-title">销售业绩排行榜</view>
         <view class="box-item">
            <view class="single-line" v-for="(item,i) in topList" :key="i">
               <view style="flex: 1;"><text class="top-border">{{i+1}}</text></view>
               <view style="flex: 3;"><text>{{item.username}}</text></view>
               <view style="flex: 3;text-align: end;"><text>{{item.money}}万元</text></view>
            </view>
         </view>
      </view>
		
      <view class="top-box">
         <view class="box-title">公司公告</view>
         <view class="box-item">
            <view style="display: flex;align-items: stretch;margin: 4px 0 ;" v-for="(item,i) in notices" :key="i">
               <text style="flex: 1;align-self: center;padding: 8px 4px;">{{item.content}}</text>
               <text style="width: 150rpx;align-self: center;padding: 0 2px;">{{item.updateTime$}}</text>
            </view>
				
         </view>
         <view>查看更多 >></view>
      </view>
		
      <view class="charts-box">
        <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn4" :background="red"/>
      </view>
   </view>
</template>

<script>
   import demodata from '@/mockdata/demodata.json';
   import getCompanyData from '@/pages/api/index.js'
   export default {
      data() {
         return {
            title: 'Hello'
            chartsDataColumn4:{},
            title: 'Hello',
            mainItem: [
               {
                  title: '团队活动实时交易情况',
                  subTitle: '团队数据',
                  items: [
                     {name: '年度销售目标',content: 60000,unit: '万元'},
                     {name: '已完成销售任务',content: 1112,unit: '万元'},
                     {name: '未完成销售任务',content: 58888,unit: '万元'},
                     {name: '完成率',content: 1.85,unit: '%'}
                  ]
               },
               {
                  title: '实时销售情况',
                  subTitle: '个人数据',
                  items: [
                     {name: '年度销售目标',content: 0,unit: '万元'},
                     {name: '已完成销售任务',content: 0,unit: '万元'},
                     {name: '未完成销售任务',content: 0,unit: '万元'},
                     {name: '完成率',content: '0.00',unit: '%'},
                     {name: '跟踪项目数量',content: 0,unit: '项'},
                     {name: '跟踪项目金额',content: 0,unit: '万元'},
                     {name: '成交项目数量',content: 0,unit: '项'},
                     {name: '成交项目金额',content: '0.00',unit: '万元'}
                  ]
               }
            ],
            topList: [
               {username: '张双龙',money:'800万元'},
               {username: '李世豪3级',money:'200万元'},
               {username: '李世豪1级',money:'112万元'}
            ],
            bgs: ['bg-blue','bg-red'],
            red: '#4286db',
            notices: [
               {notice: '这条测试公告被修改了asdas这条测试公告被修改了这条测试公告被修改了',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '这是一条测试公告',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'},
               {notice: '浙江中扬立库技术有限公司是中扬集团旗下专业的智能仓储物流设备源头服务商，致力于让制造与物流更高效。集团年销售额超5亿人民币，是中国立体仓库大型厂家之一，集科研、生产、销售、售后为一体的国家高新技术企业，浙江省“专精特新”企业，浙江省“尖兵、领雁”企业，浙江省重点培育企业，综合实力位居行业前列',crtate_time: '2023-09-09 13:49:46',update_time: '2023-10-09 13:49:46'}
            ],
            Column: {
               categories: ["1月", "2月", "3月", "4月", "5月", "6月","7月", "8月", "9月", "10月", "11月", "12月"],
               series: [{
                  name: "销售额",
                  data: [35, 36, 31, 33, 13, 34,18, 27, 21, 24, 6, 28]
               }]
            }
				
				
         }
      },
      onLoad() {

         this.backGroundRepeat()
      },
      onReady() {
        //模拟从服务器获取数据
         this.getServerData()
         this.getCompanyData()
         this.getPersonData()
         this.getStaffRank()
         this.getCompanyPostList()
         this.getMonthData()
      },
      mounted() {
			
      },
      methods: {

         getServerData() {
           setTimeout(() => {
              //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
              //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
              this.chartsDataColumn4=JSON.parse(JSON.stringify(this.Column))
           }, 1500);
         },
         backGroundRepeat() {
            let len = this.bgs.length
            let i = 0
            for (let k in this.mainItem) {
               if (i == len) {
                  i = 0
               }
               this.mainItem[k]['bg'] = this.bgs[i]
               i++
            }
            // console.log(this.mainItem);
         },
         async getCompanyData() {
            let res = await getCompanyData.getCompanyData()
            if (res.code === 200) {
               this.mainItem[0].title = '团队活动实时交易情况'
               this.mainItem[0].subTitle = '团队数据'
               this.mainItem[0].items = res.data
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
         async getPersonData() {
            let res = await getCompanyData.getPersonData()
            if (res.code === 200) {
               this.mainItem[1].title = '实时销售情况'
               this.mainItem[1].subTitle = '个人数据'
               this.mainItem[1].items = res.data
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
         async getStaffRank() {
            let res = await getCompanyData.getStaffRank()
            if (res.code === 200) {
               this.topList = res.data
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
         async getCompanyPostList() {
            let res = await getCompanyData.getCompanyPostList()
            if (res.code === 200) {
               this.notices = res.data.records.splice(0,5)
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
			
         async getMonthData() {
            let res = await getCompanyData.getMonthData()
            if (res.code === 200) {
               this.Column.series[0].data = res.data
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
         backLogin(res) {
            uni.showToast({title: res.msg, icon: "none", position: 'top'})
            setTimeout(() => {
               uni.reLaunch({
                  url: '../login/login'
               });
            }, 1000);
         }
			
      }
   }
</script>

<style>
<style scoped>
   .charts-box {
      height: 300px;
      margin: 8px;
   }
   .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }

   .logo {
      height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
   .box {
      margin: 8px;
      border-radius: 10rpx;
   }

   .text-area {
   .box-title {
      margin: 8px;
      height: 60rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      font-weight: 700;
   }
   .box-item {
      margin: 8px;
      font-size: 26rpx;
      font-weight: 700;
      min-height: 80rpx;
      background-color: rgba(255,255,255,.3);
      border-radius: 10rpx;
   }
   .item-title {
      height: 50rpx;
      line-height: 50rpx;
   }
   .item-content {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
      margin-top: 10rpx;
   }
   .c-data {
      font-size: 48rpx;
   }
   .c-val {
      font-size: 24rpx;
      font-weight: normal;
      vertical-align: text-bottom;
   }
   .top-box {
      margin: 8px;
      border-radius: 10rpx;
      color: #FFF;
      background: #D38312;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #A83279, #D38312);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #A83279, #D38312); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

   .title {
      font-size: 36rpx;
      color: #8f8f94;
   }
   .single-line {
      display: flex;
      /* text-align: center; */
      align-items: center;
      padding: 10px;
      font-size: 30rpx;
   }
   .top-border {
      background-color: #3f624d;
      font-weight: 900;
      padding: 0 5px;
      border-radius: 2px;
   }
	
   .bg-red {
      background: #7b4397;  
      background: -webkit-linear-gradient(to left, #dc2430, #7b4397);  
      background: linear-gradient(to left, #dc2430, #7b4397);
      color: #FFF;
   }
   .bg-blue {
      color: #FFF;
      background: #4284DB;
      background: -webkit-linear-gradient(to left, #29EAC4, #4284DB);  
      background: linear-gradient(to left, #29EAC4, #4284DB); 
   }
	
</style>