Skip to content

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

企业微信前端

parent b6d9ce25
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 55 deletions
components/bossCard/bossCard.vue
View file @ 409a876c
...@@ -258,32 +258,35 @@ ...@@ -258,32 +258,35 @@
<!-- 项目运营表格 --> <!-- 项目运营表格 -->
<view class="table-container"> <view class="table-container">
<text class="table-title">模拟老板运营情况</text> <text class="table-title">模拟老板运营情况</text>
<scroll-view scroll-x @scroll="scroll" :show-scrollbar="true" scroll-left="20" class="table-scroll"> <scroll-view scroll-x class="table-scroll">
<uni-table :data="currentData.tableData" border :loading="loading" emptyText="暂无数据"> <view class="table">
<uni-tr> <view class="table-header">
<uni-th align="center" width="70">模拟老板</uni-th> <view class="table-row">
<uni-th align="center" width="60">应收(万)</uni-th> <view class="table-cell-title">模拟老板</view>
<uni-th align="center" width="60">应付(万)</uni-th> <view class="table-cell-title">应收(万)</view>
<uni-th align="center" width="60">应付现结(万)</uni-th> <view class="table-cell-title">应付(万)</view>
<uni-th align="center" width="60">毛利率(%)</uni-th> <view class="table-cell-title">应付现结(万)</view>
<uni-th align="center" width="60">单量</uni-th> <view class="table-cell-title">毛利率(%)</view>
<uni-th align="center" width="60">方(m³)</uni-th> <view class="table-cell-title">单量</view>
<uni-th align="center" width="60">吨(T)</uni-th> <view class="table-cell-title">方(m³)</view>
<uni-th align="center" width="60">人力</uni-th> <view class="table-cell-title">吨(T)</view>
</uni-tr> <view class="table-cell-title">人力</view>
<uni-tr v-for="(item, index) in currentData.tableData" :key="index"> </view>
<uni-td>{{ item.boss }}</uni-td> </view>
<uni-td>{{ item.receivable }}</uni-td> <view class="table-body">
<uni-td>{{ item.payable }}</uni-td> <view class="table-row" v-for="(item, index) in currentData.tableData" :key="index">
<uni-td>{{ item.cashPayable }}</uni-td> <view class="table-cell">{{ item.boss }}</view>
<uni-td>{{ item.profitRate }}%</uni-td> <view class="table-cell">{{ item.receivable }}</view>
<uni-td>{{ item.orderCount }}</uni-td> <view class="table-cell">{{ item.payable }}</view>
<uni-td>{{ item.volume }}</uni-td> <view class="table-cell">{{ item.cashPayable }}</view>
<uni-td>{{ item.weight }}</uni-td> <view class="table-cell">{{ item.profitRate }}%</view>
<uni-td>{{ item.manpower }}</uni-td> <view class="table-cell">{{ item.orderCount }}</view>
</uni-tr> <view class="table-cell">{{ item.volume }}</view>
</uni-table> <view class="table-cell">{{ item.weight }}</view>
<view class="table-cell">{{ item.manpower }}</view>
</view>
</view>
</view>
</scroll-view> </scroll-view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -424,7 +427,7 @@ ...@@ -424,7 +427,7 @@
} }
this.myLeaderChart = echarts.init(document.getElementById('myLeaderChart')) this.myLeaderChart = echarts.init(document.getElementById('myLeaderChart'))
console.log("echarts"+echarts.version);
const option = { const option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -432,13 +435,15 @@ ...@@ -432,13 +435,15 @@
type: 'shadow' type: 'shadow'
}, },
formatter: function(params) { formatter: function(params) {
return params.map(item => { const tips = params.map(item => {
if (item.seriesName === '利润率') { if (item.seriesName === '利润率') {
return `${item.seriesName}: ${item.value}%` return `${item.seriesName}: ${item.value}%`;
} }
return `${item.seriesName}: ${item.value}万元` return `${item.seriesName}: ${item.value} 万元`;
}).join('<br/>') }).join('<br>'); // 使用 <br> 实现换行
}
return `<div>${tips}</div>`; // 返回 HTML 格式的提示内容
}
}, },
legend: { legend: {
data: ['应收', '应付', '利润率'], data: ['应收', '应付', '利润率'],
...@@ -512,9 +517,6 @@ ...@@ -512,9 +517,6 @@
itemStyle: { itemStyle: {
color: '#52C41A', color: '#52C41A',
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
},
emphasis: {
focus: 'series'
} }
}, },
{ {
...@@ -524,9 +526,6 @@ ...@@ -524,9 +526,6 @@
itemStyle: { itemStyle: {
color: '#FF4D4F', color: '#FF4D4F',
borderRadius: [4, 4, 0, 0] borderRadius: [4, 4, 0, 0]
},
emphasis: {
focus: 'series'
} }
}, },
{ {
...@@ -540,20 +539,17 @@ ...@@ -540,20 +539,17 @@
}, },
lineStyle: { lineStyle: {
width: 2 width: 2
},
emphasis: {
focus: 'series'
} }
} }
] ]
} }
this.myLeaderChart.setOption(option) this.myLeaderChart.setOption(option)
this.myLeaderChart.on('click', function(params) { // this.myLeaderChart.on('click', function(params) {
if (params.componentType === 'series') { // if (params.componentType === 'series') {
console.log('触碰到柱状图:', params); // console.log('触碰到柱状图:', params);
} // }
}); // });
}, },
initProjectChart() { initProjectChart() {
// 获取数据点数量 // 获取数据点数量
...@@ -577,12 +573,22 @@ ...@@ -577,12 +573,22 @@
type: 'shadow' type: 'shadow'
}, },
formatter: function(params) { formatter: function(params) {
return params.map(item => { const tips = params.map(item => {
if (item.seriesName === '利润率') { return `{name|${item.seriesName}}: {value|${item.value}${item.seriesName === '利润率' ? '%' : '万元'}}`;
return `${item.seriesName}: ${item.value}%` }).join('<br>');
}
return `${item.seriesName}: ${item.value}万元` return tips;
}).join('<br/>') },
rich: {
name: {
fontSize: 14,
fontWeight: 'bold',
color: '#333'
},
value: {
fontSize: 14,
color: '#666'
}
} }
}, },
legend: { legend: {
...@@ -914,6 +920,54 @@ ...@@ -914,6 +920,54 @@
height: 100%; 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 { .scroll-list {
height: calc(100vh - 60px); height: calc(100vh - 60px);
touch-action: pan-x; touch-action: pan-x;
...@@ -1593,7 +1647,7 @@ ...@@ -1593,7 +1647,7 @@
/* 确保容器宽度适应 */ /* 确保容器宽度适应 */
order-radius: 3px; order-radius: 3px;
white-space: nowrap; white-space: nowrap;
/deep/ .uni-table { /deep/ .uni-table {
min-width: 100%; min-width: 100%;
width: max-content; width: max-content;
......
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