6 changed files with 444 additions and 94 deletions
@ -0,0 +1,190 @@
@@ -0,0 +1,190 @@
|
||||
<template> |
||||
<div class="storage-data-filter"> |
||||
<div class="time-item"> |
||||
<el-config-provider :locale="locale"> |
||||
<span>开始时间:</span> |
||||
<div class="item item-time"> |
||||
<el-date-picker |
||||
class="data-picker" |
||||
v-model="filterData.startDay" |
||||
type="date" |
||||
placeholder="请选择时间" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
:clearable="false" |
||||
:editable="false" |
||||
/> |
||||
<el-checkbox v-model="checkbox.startDay" size="large" /> |
||||
</div> |
||||
<span>终止时间:</span> |
||||
<div class="item item-time"> |
||||
<el-date-picker |
||||
class="data-picker" |
||||
v-model="filterData.endDay" |
||||
type="date" |
||||
placeholder="请选择时间" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
:clearable="false" |
||||
:editable="false" |
||||
:disabled-date="endDisabledDate" |
||||
/> |
||||
<el-checkbox v-model="checkbox.endDay" size="large" /> |
||||
</div> |
||||
</el-config-provider> |
||||
</div> |
||||
|
||||
<div class="item"> |
||||
<el-input placeholder="设备SN" v-model="filterData.sn" /> |
||||
<el-checkbox v-model="checkbox.sn" size="large" /> |
||||
</div> |
||||
<div class="item"> |
||||
<el-select v-model="filterData.customerId" placeholder="客户"> |
||||
<el-option |
||||
v-for="item in prop.customerList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id as string" |
||||
/> |
||||
</el-select> |
||||
<el-checkbox v-model="checkbox.customerId" size="large" /> |
||||
</div> |
||||
<div class="item"> |
||||
<el-select v-model="filterData.status" placeholder="设备状态"> |
||||
<el-option |
||||
v-for="item in statusList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
<el-checkbox v-model="checkbox.status" size="large" disabled/> |
||||
</div> |
||||
<div class="item item-btn"> |
||||
<EdfsButton |
||||
inner-text="搜索" |
||||
type="success" |
||||
style="width: 100%" |
||||
@click="onSearch" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import dayjs from 'dayjs' |
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' |
||||
import EdfsButton from '@/components/dashboard/Edfs-button/index.vue' |
||||
import { getIntDictOptions } from '@/utils/dict' |
||||
import { isResError } from '@/hooks/useMessage' |
||||
import type { CustomerVO } from '@/api/module/eam/customer' |
||||
import { statusList } from '../utils' |
||||
|
||||
const locale = zhCn |
||||
|
||||
const prop = defineProps<{ |
||||
customerList: Array<Pick<CustomerVO, 'id' | 'name'>> |
||||
}>() |
||||
const endDisabledDate = (time: Date) => { |
||||
return ( |
||||
time.getTime() < |
||||
dayjs(filterData.value.startDay).add(1, 'days').startOf('day').valueOf() |
||||
) |
||||
} |
||||
const emit = defineEmits(['search']) |
||||
|
||||
type FilterKeys = keyof typeof filterData.value |
||||
|
||||
const filterData = ref({ |
||||
// startDay: dayjs().subtract(15, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
||||
// endDay: dayjs().add(1, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'), |
||||
startDay: '', |
||||
endDay: '', |
||||
status: 3, |
||||
sn: '', |
||||
customerId: '', |
||||
}) |
||||
|
||||
const checkbox = ref<Record<FilterKeys, boolean>>({ |
||||
startDay: false, |
||||
endDay: false, |
||||
status: true, |
||||
sn: false, |
||||
customerId: false, |
||||
}) |
||||
|
||||
function onSearch() { |
||||
emit('search', formatParams()) |
||||
} |
||||
|
||||
function formatParams() { |
||||
const params: Partial<Record<FilterKeys, string>> = {} |
||||
const keys = Object.keys(checkbox.value) as FilterKeys[] |
||||
for (const key of keys) { |
||||
if (checkbox.value[key]) { |
||||
if (key === 'startDay' || key === 'endDay') { |
||||
params['createTime'] = [filterData.value.startDay, filterData.value.endDay] |
||||
} else { |
||||
params[key] = filterData.value[key] |
||||
} |
||||
} |
||||
} |
||||
return params |
||||
} |
||||
|
||||
onMounted(() => { |
||||
onSearch() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.storage-data-filter { |
||||
padding: 16px; |
||||
box-sizing: border-box; |
||||
span { |
||||
font-size: 14px; |
||||
color: var(--label-text); |
||||
} |
||||
.time-item { |
||||
margin-bottom: 32px; |
||||
.item { |
||||
margin-top: 0; |
||||
|
||||
margin-bottom: 16px; |
||||
} |
||||
} |
||||
.item { |
||||
margin-top: 16px; |
||||
height: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
:deep(.el-checkbox:last-of-type) { |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
|
||||
.item-btn { |
||||
margin-top: 36px; |
||||
} |
||||
|
||||
:deep(.data-picker) { |
||||
width: 100%; |
||||
} |
||||
:deep(.el-input__icon) { |
||||
// margin: 0; |
||||
} |
||||
:deep(.el-date-editor .el-input__wrapper) { |
||||
height: 100%; |
||||
line-height: 100%; |
||||
flex-direction: row-reverse; |
||||
box-sizing: border-box; |
||||
padding: 1px 0 1px 11px; |
||||
} |
||||
|
||||
:deep(.el-input__icon), |
||||
:deep(.el-input__prefix-inner), |
||||
:deep(.el-input__prefix), |
||||
:deep(.perfix-icon) { |
||||
height: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,124 @@
@@ -0,0 +1,124 @@
|
||||
<template> |
||||
<v-chart class="chart" :option="option" :autoresize="autoresize" /> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import VChart from 'vue-echarts' |
||||
import { use } from 'echarts/core' |
||||
import { CanvasRenderer } from 'echarts/renderers' |
||||
import { PieChart } from 'echarts/charts' |
||||
import { |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
LegendComponent, |
||||
GraphicComponent, |
||||
} from 'echarts/components' |
||||
import type { EChartsOption } from 'echarts' |
||||
import { useTheme } from '@/utils/useTheme' |
||||
use([ |
||||
CanvasRenderer, |
||||
PieChart, |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
GraphicComponent, |
||||
LegendComponent, |
||||
]) |
||||
|
||||
interface Props { |
||||
data: any[] |
||||
} |
||||
const { chartGraphicTextColor } = useTheme() |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
data: () => [], |
||||
}) |
||||
|
||||
const updateTrigger = ref(0) |
||||
const autoresize = { |
||||
throttle: 2500, |
||||
onResize: () => { |
||||
updateTrigger.value++ |
||||
}, |
||||
} |
||||
|
||||
// 数据总数 |
||||
const total = computed(() => props.data.reduce((acc, cur) => acc + cur.value, 0)) |
||||
|
||||
const option = computed(() => { |
||||
const trigger = updateTrigger.value |
||||
const res: EChartsOption = { |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
graphic: { |
||||
elements: [ |
||||
{ |
||||
type: 'text', |
||||
left: 'center', |
||||
top: '30%', |
||||
style: { |
||||
text: total.value.toString(), |
||||
fill: chartGraphicTextColor.value, |
||||
fontSize: 20, |
||||
fontWeight: 700, |
||||
}, |
||||
}, |
||||
{ |
||||
type: 'text', |
||||
left: 'center', |
||||
top: '42%', |
||||
style: { |
||||
text: '库存总数', |
||||
fill: chartGraphicTextColor.value, |
||||
fontSize: 16, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
legend: { |
||||
show: true, |
||||
bottom: '3%', |
||||
itemWidth: 20, |
||||
itemHeight: 15, |
||||
itemGap: 10, |
||||
textStyle: { |
||||
fontSize: 14, |
||||
}, |
||||
}, |
||||
color: ['#437BF8', '#F84343', '#D1D1D1 ', '#FBB852'], |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: ['40%', '55%'], |
||||
center: ['50%', '40%'], |
||||
data: props.data, |
||||
avoidLabelOverlap: false, |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 1, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)', |
||||
}, |
||||
}, |
||||
label: { |
||||
show: true, |
||||
position: 'outside', |
||||
// formatter: '{b}: {c} ({d}%)', |
||||
formatter: ' {c}', |
||||
}, |
||||
labelLine: { |
||||
show: true, |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
return res |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.chart { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -1,7 +1,13 @@
@@ -1,7 +1,13 @@
|
||||
export const tableCol = [ |
||||
{ label: '出库设备', prop: 'deviceName', minWidth: '12%' }, |
||||
{ label: '客户', prop: 'customerName', minWidth: '10%' }, |
||||
{ label: '设备名称', prop: 'deviceName', minWidth: '10%' }, |
||||
{ label: '设备sn', prop: 'sn', minWidth: '10%' }, |
||||
{ label: '库存状态', prop: 'status', minWidth: '10%' }, |
||||
{ label: '客户', prop: 'customerName', minWidth: '14%' }, |
||||
{ label: '出库价格', prop: 'price', minWidth: '10%' }, |
||||
// { label: '出库单名称', prop: 'name', minWidth: '10%' },
|
||||
{ label: '描述', prop: 'description', minWidth: '16%' }, |
||||
{ label: '时间', prop: 'updateTime', minWidth: '18%' }, |
||||
] |
||||
|
||||
export const statusList = [ |
||||
{ label: '已入库', value: 2, colName: '入库' }, |
||||
{ label: '已出库', value: 3, colName: '出库' }, |
||||
] |
||||
|
||||
Loading…
Reference in new issue