Skip to content

Z
zc-qiyewx-app
Commit 409a876c authored by 刘杰's avatar 刘杰
Browse files
Options

企业微信前端

parent b6d9ce25
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 55 deletions
components/bossCard/bossCard.vue
View file @ 409a876c
......@@ -258,32 +258,35 @@
<!-- 项目运营表格 -->
<view class="table-container">
<text class="table-title">模拟老板运营情况</text>
<scroll-view scroll-x @scroll="scroll" :show-scrollbar="true" scroll-left="20" class="table-scroll">
<uni-table :data="currentData.tableData" border :loading="loading" emptyText="暂无数据">
<uni-tr>
<uni-th align="center" width="70">模拟老板</uni-th>
<uni-th align="center" width="60">应收(万)</uni-th>
<uni-th align="center" width="60">应付(万)</uni-th>
<uni-th align="center" width="60">应付现结(万)</uni-th>
<uni-th align="center" width="60">毛利率(%)</uni-th>
<uni-th align="center" width="60">单量</uni-th>
<uni-th align="center" width="60">方(m³)</uni-th>
<uni-th align="center" width="60">吨(T)</uni-th>
<uni-th align="center" width="60">人力</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in currentData.tableData" :key="index">
<uni-td>{{ item.boss }}</uni-td>
<uni-td>{{ item.receivable }}</uni-td>
<uni-td>{{ item.payable }}</uni-td>
<uni-td>{{ item.cashPayable }}</uni-td>
<uni-td>{{ item.profitRate }}%</uni-td>
<uni-td>{{ item.orderCount }}</uni-td>
<uni-td>{{ item.volume }}</uni-td>
<uni-td>{{ item.weight }}</uni-td>
<uni-td>{{ item.manpower }}</uni-td>
</uni-tr>
</uni-table>
<scroll-view scroll-x class="table-scroll">
<view class="table">
<view class="table-header">
<view class="table-row">
<view class="table-cell-title">模拟老板</view>
<view class="table-cell-title">应收(万)</view>
<view class="table-cell-title">应付(万)</view>
<view class="table-cell-title">应付现结(万)</view>
<view class="table-cell-title">毛利率(%)</view>
<view class="table-cell-title">单量</view>
<view class="table-cell-title">方(m³)</view>
<view class="table-cell-title">吨(T)</view>
<view class="table-cell-title">人力</view>
</view>
</view>
<view class="table-body">
<view class="table-row" v-for="(item, index) in currentData.tableData" :key="index">
<view class="table-cell">{{ item.boss }}</view>
<view class="table-cell">{{ item.receivable }}</view>
<view class="table-cell">{{ item.payable }}</view>
<view class="table-cell">{{ item.cashPayable }}</view>
<view class="table-cell">{{ item.profitRate }}%</view>
<view class="table-cell">{{ item.orderCount }}</view>
<view class="table-cell">{{ item.volume }}</view>
<view class="table-cell">{{ item.weight }}</view>
<view class="table-cell">{{ item.manpower }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</scroll-view>
......@@ -424,7 +427,7 @@
}
this.myLeaderChart = echarts.init(document.getElementById('myLeaderChart'))
console.log("echarts"+echarts.version);
const option = {
tooltip: {
trigger: 'axis',
......@@ -432,12 +435,14 @@
type: 'shadow'
},
formatter: function(params) {
return params.map(item => {
const tips = params.map(item => {
if (item.seriesName === '利润率') {
return `${item.seriesName}: ${item.value}%`
return `${item.seriesName}: ${item.value}%`;
}
return `${item.seriesName}: ${item.value}万元`
}).join('<br/>')
return `${item.seriesName}: ${item.value} 万元`;
}).join('<br>'); // 使用 <br> 实现换行
return `<div>${tips}</div>`; // 返回 HTML 格式的提示内容
}
},
legend: {
......@@ -512,9 +517,6 @@
itemStyle: {
color: '#52C41A',
borderRadius: [4, 4, 0, 0]
},
emphasis: {
focus: 'series'
}
},
{
......@@ -524,9 +526,6 @@
itemStyle: {
color: '#FF4D4F',
borderRadius: [4, 4, 0, 0]
},
emphasis: {
focus: 'series'
}
},
{
......@@ -540,20 +539,17 @@
},
lineStyle: {
width: 2
},
emphasis: {
focus: 'series'
}
}
]
}
this.myLeaderChart.setOption(option)
this.myLeaderChart.on('click', function(params) {
if (params.componentType === 'series') {
console.log('触碰到柱状图:', params);
}
});
// this.myLeaderChart.on('click', function(params) {
// if (params.componentType === 'series') {
// console.log('触碰到柱状图:', params);
// }
// });
},
initProjectChart() {
// 获取数据点数量
......@@ -577,12 +573,22 @@
type: 'shadow'
},
formatter: function(params) {
return params.map(item => {
if (item.seriesName === '利润率') {
return `${item.seriesName}: ${item.value}%`
const tips = params.map(item => {
return `{name|${item.seriesName}}: {value|${item.value}${item.seriesName === '利润率' ? '%' : '万元'}}`;
}).join('<br>');
return tips;
},
rich: {
name: {
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
value: {
fontSize: 14,
color: '#666'
}
return `${item.seriesName}: ${item.value}万元`
}).join('<br/>')
}
},
legend: {
......@@ -914,6 +920,54 @@
height: 100%;
}
.table {
display: table;
/* 使用表格布局 */
width: 100%;
/* 确保表格宽度适应 */
}
.table-header {
display: table-header-group;
/* 表头 */
background-color: #f5f5f5;
/* 表头背景色 */
}
.table-body {
display: table-row-group;
/* 表体 */
}
.table-row {
display: table-row;
/* 表格行 */
}
.table-cell-title {
display: table-cell;
/* 表格单元格 */
padding: 10px;
/* 单元格内边距 */
border: 1px solid #e8e8e8;
/* 单元格边框 */
text-align: center;
/* 单元格文本居中 */
font-weight: bold;
}
.table-cell {
display: table-cell;
/* 表格单元格 */
padding: 10px;
/* 单元格内边距 */
border: 1px solid #e8e8e8;
/* 单元格边框 */
text-align: center;
/* 单元格文本居中 */
}
.scroll-list {
height: calc(100vh - 60px);
touch-action: pan-x;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment