134 lines
2.7 KiB
Vue
134 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="layout-box">
|
||
|
|
<view class="filter">
|
||
|
|
<u-input
|
||
|
|
v-model="params.startTime"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请选择开始时间"
|
||
|
|
></u-input>
|
||
|
|
<text>-</text>
|
||
|
|
<u-input
|
||
|
|
v-model="params.endTime"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请选择结束时间"
|
||
|
|
></u-input>
|
||
|
|
<u-icon
|
||
|
|
name="arrow-down-fill"
|
||
|
|
@click="handleDialog('showTime', true)"
|
||
|
|
></u-icon>
|
||
|
|
|
||
|
|
<text class="btn" @click="handleDialog('showFilter', true)"
|
||
|
|
>收货产品</text
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<c-echarts :option="option" :height="'90vh'" />
|
||
|
|
<!-- 单据弹框 -->
|
||
|
|
<ProductTypeDialog :show="showDialog.showFilter" @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"/>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
|
||
|
|
import CEcharts from "../../components/Echarts/echarts.vue";
|
||
|
|
import ProductTypeDialog from './components/ProductTypeDialog.vue'
|
||
|
|
const option = ref({
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
type: "cross",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "10px",
|
||
|
|
right: "20px",
|
||
|
|
top: "10px",
|
||
|
|
bottom: "30px",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "value",
|
||
|
|
boundaryGap: [0, 0.01],
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "category",
|
||
|
|
data: [1, 2, 3, 4, 5],
|
||
|
|
axisLabel: {
|
||
|
|
// inside: true,
|
||
|
|
// color: '#fff'
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#83bff6",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
|
||
|
|
type: "bar",
|
||
|
|
areaStyle: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
barWidth: 24,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
color: ["#00D2E3"],
|
||
|
|
});
|
||
|
|
|
||
|
|
const params = reactive({
|
||
|
|
startTime: "2024-01-01",
|
||
|
|
endTime: "2024-01-01",
|
||
|
|
});
|
||
|
|
const showDialog = <
|
||
|
|
{
|
||
|
|
[key: string]: boolean;
|
||
|
|
}
|
||
|
|
>reactive({
|
||
|
|
showTime: false,
|
||
|
|
showFilter: false,
|
||
|
|
});
|
||
|
|
const handleDialog = (key: string, v: boolean) => {
|
||
|
|
showDialog[key] = v;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.layout-box {
|
||
|
|
margin: 35.9rpx 25.64rpx;
|
||
|
|
.filter {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-items: center;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 27rpx;
|
||
|
|
color: #000000;
|
||
|
|
::v-deep .u-input {
|
||
|
|
padding: 0rpx 16.03rpx !important;
|
||
|
|
input {
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 21rpx !important;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
text {
|
||
|
|
margin: 0px 5rpx;
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
margin-left: 40rpx;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
color: $u-primary;
|
||
|
|
margin-left: 40rpx;
|
||
|
|
margin-right: 0rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|