#

whycq

2023-10-11 c8107a39f7611e256c473d72df58e45bc02ad7eb

 pages/index/index.vue

@@ -25,13 +25,31 @@
            </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.notice}}</text>
               <text style="width: 150rpx;align-self: center;padding: 0 2px;">{{item.update_time}}</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 {
            chartsDataColumn4:{},
            title: 'Hello',
            mainItem: [
               {
@@ -64,14 +82,46 @@
               {name: '李世豪3级',performance:'200万元'},
               {name: '李世豪1级',performance:'112万元'}
            ],
            bgs: ['bg-blue','bg-red']
            bgs: ['bg-blue','bg-red'],
            red: '#aaffff',
            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'}
            ]
				
            
         }
      },
      onLoad() {
         this.backGroundRepeat()
      },
      onReady() {
        //模拟从服务器获取数据
         this.getServerData()
         this.getCompanyData()
			
      },
      mounted() {
			
      },
      methods: {
         getServerData() {
           setTimeout(() => {
              //因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
              //开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
              this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
           }, 1500);
         },
         backGroundRepeat() {
            let len = this.bgs.length
            let i = 0
@@ -82,13 +132,23 @@
               this.mainItem[k]['bg'] = this.bgs[i]
               i++
            }
            console.log(this.mainItem);
         }
            // console.log(this.mainItem);
         },
         async getCompanyData() {
            let companyDatas = await getCompanyData.getCompanyData()
            this.mainItem[0].title = '团队活动实时交易情况'
            this.mainItem[0].subTitle = '团队数据'
            this.mainItem[0].items = companyDatas
         },
      }
   }
</script>

<style scoped>
   .charts-box {
      height: 300px;
      margin: 8px;
   }
   .content {
      display: flex;
      flex-direction: column;
@@ -110,7 +170,7 @@
      margin: 8px;
      font-size: 26rpx;
      font-weight: 700;
      min-height: 240rpx;
      min-height: 80rpx;
      background-color: rgba(255,255,255,.3);
      border-radius: 10rpx;
   }
@@ -135,7 +195,6 @@
   .top-box {
      margin: 8px;
      border-radius: 10rpx;
      /* height: 100rpx; */
      color: #FFF;
      background: #D38312;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #A83279, #D38312);  /* Chrome 10-25, Safari 5.1-6 */