32 changed files with 570 additions and 223 deletions
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 551 B |
@ -0,0 +1,201 @@
@@ -0,0 +1,201 @@
|
||||
<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="请输入设备序列号" v-model="filterData.serialNo" /> |
||||
<el-checkbox v-model="checkbox.serialNo" size="large" /> |
||||
</div> |
||||
<div class="item"> |
||||
<el-input placeholder="请输入设备名称" v-model="filterData.name" /> |
||||
<el-checkbox v-model="checkbox.name" size="large" /> |
||||
</div> |
||||
|
||||
<div class="item"> |
||||
<el-cascader |
||||
v-model="filterData.categoryId" |
||||
:options="categoryTreeData" |
||||
placeholder="请选择设备分类" |
||||
:props="{ |
||||
checkStrictly: true, |
||||
value: 'id', |
||||
label: 'name', |
||||
}" |
||||
/> |
||||
<el-checkbox v-model="checkbox.categoryId" size="large" /> |
||||
</div> |
||||
<div class="item item-btn"> |
||||
<EdfsButton |
||||
inner-text="搜索" |
||||
type="primary" |
||||
style="width: 100%" |
||||
@click="onSearch" |
||||
/> |
||||
<EdfsButton inner-text="重置" style="width: 100%" @click="onReset" /> |
||||
</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 type { CustomerVO } from '@/api/module/eam/customer' |
||||
|
||||
const locale = zhCn |
||||
|
||||
const prop = defineProps<{ |
||||
categoryTreeData: 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: '', |
||||
endDay: '', |
||||
name: '', |
||||
serialNo: '', |
||||
categoryId: [], |
||||
}) |
||||
|
||||
const checkbox = ref<Record<FilterKeys, boolean>>({ |
||||
startDay: false, |
||||
endDay: false, |
||||
name: false, |
||||
serialNo: false, |
||||
categoryId: 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 |
||||
} |
||||
|
||||
function onReset() { |
||||
filterData.value = { |
||||
startDay: '', |
||||
endDay: '', |
||||
name: '', |
||||
serialNo: '', |
||||
categoryId: [], |
||||
} |
||||
checkbox.value = { |
||||
startDay: false, |
||||
endDay: false, |
||||
name: false, |
||||
serialNo: false, |
||||
categoryId: false, |
||||
} |
||||
onSearch() |
||||
} |
||||
|
||||
onMounted(() => { |
||||
onSearch() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.storage-data-filter { |
||||
padding: 16px; |
||||
box-sizing: border-box; |
||||
span { |
||||
font-size: 14px; |
||||
color: var(--label-color); |
||||
} |
||||
.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,125 @@
@@ -0,0 +1,125 @@
|
||||
<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: 16, |
||||
}, |
||||
selectedMode: false, |
||||
}, |
||||
color: ['#4CAF50', '#2196F3', '#FBB852', '#FF9800', '#F44336', '#ccc'], |
||||
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> |
||||
Loading…
Reference in new issue