二级列表初步绘制
This commit is contained in:
BianLzhaoMin
parent
524ddc0a4e
commit
9bb9a57f90
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="card-model" :style="{ backgroundColor: theme }">
|
||||
<div class="card-model" :style="{ backgroundColor: theme }" @click="onHandleViewDetails">
|
||||
<div class="f-14">
|
||||
<svg-icon :icon-class="iconType" class="icon-box" />
|
||||
{{ cardTitle }}
|
||||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
// 标题
|
||||
cardTitle: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
default: ''
|
||||
},
|
||||
// 图标类型
|
||||
iconType: {
|
||||
|
|
@ -37,6 +37,14 @@ export default {
|
|||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onHandleViewDetails() {
|
||||
console.log('查询二级页面', this.cardTitle)
|
||||
// 使用自定义事件 通知父组件打开二级页面
|
||||
this.$emit('onOpenLevelTwoPages', this.cardTitle)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
<div class="chart-title">{{ chartTitle }}</div>
|
||||
<div class="chart-content">
|
||||
<!-- <PieChart /> -->
|
||||
|
||||
<component :is="ChartTypeName" />
|
||||
<component :is="ChartTypeName" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -30,6 +29,11 @@ export default {
|
|||
type: String,
|
||||
default: 'PieChart'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<PageHeader :pageContent="levelTwoTitle" @goBack="goBack" />
|
||||
<el-table>
|
||||
<el-table-column type="index" width="55" />
|
||||
<el-table-column align="center" label="占位1" prop="maCode" />
|
||||
<el-table-column align="center" label="占位2" prop="maCode" />
|
||||
<el-table-column align="center" label="占位3" prop="maCode" />
|
||||
<el-table-column align="center" label="占位4" prop="maCode" />
|
||||
<el-table-column align="center" label="占位5" prop="maCode" />
|
||||
<el-table-column align="center" label="占位6" prop="maCode" />
|
||||
<el-table-column align="center" label="占位7" prop="maCode" />
|
||||
<el-table-column align="center" label="占位8" prop="maCode" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '@/components/pageHeader'
|
||||
export default {
|
||||
components: {
|
||||
PageHeader
|
||||
},
|
||||
props: {
|
||||
levelTwoTitle: {
|
||||
type: String,
|
||||
default: '详情'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit('onCloseLevelTwoPages')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-container {
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,104 +1,135 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 机具供应展示 -->
|
||||
<el-form size="small" :model="queryParams">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="queryDate"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-M"
|
||||
<template v-if="!isHome">
|
||||
<!-- 机具供应展示 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="queryDate"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-M"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="company">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 95%"
|
||||
placeholder="选择公司"
|
||||
v-model="queryParams.company"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="project">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 95%"
|
||||
placeholder="选择工程"
|
||||
v-model="queryParams.project"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<div class="card-box">
|
||||
<div class="title">需求供应</div>
|
||||
<div class="card-box-content-1">
|
||||
<div v-for="(card, index) in cardList_1" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
@onOpenLevelTwoPages="onOpenLevelTwoPages"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select placeholder="选择公司" style="width: 95%">
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select placeholder="选择工程" style="width: 95%">
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<div class="card-box">
|
||||
<div class="title">需求供应</div>
|
||||
<div class="card-box-content-1">
|
||||
<div v-for="(card, index) in cardList_1" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-box-space-last">
|
||||
<CardModelSpace
|
||||
:key="index"
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
v-for="(card, index) in cardList_3"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-box-space-last">
|
||||
<CardModelSpace
|
||||
:key="index"
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
v-for="(card, index) in cardList_3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
<div class="title">仓储状态</div>
|
||||
<div class="card-box-content">
|
||||
<div v-for="(card, index) in cardList_2" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
/>
|
||||
<div class="card-box">
|
||||
<div class="title">仓储状态</div>
|
||||
<div class="card-box-content">
|
||||
<div v-for="(card, index) in cardList_2" :key="index">
|
||||
<CardModel
|
||||
:theme="card.theme"
|
||||
:cardTitle="card.title"
|
||||
:iconType="card.icon"
|
||||
:isReduce="card.isReduce"
|
||||
@onOpenLevelTwoPages="onOpenLevelTwoPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<!-- 图表区域 -->
|
||||
|
||||
<div class="chart-box">
|
||||
<div :key="index" v-for="(chart, index) in chartList">
|
||||
<ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
|
||||
<div class="chart-box">
|
||||
<div :key="index" v-for="(chart, index) in chartList">
|
||||
<ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<TableModel @onCloseLevelTwoPages="onCloseLevelTwoPages" :levelTwoTitle="levelTwoTitle" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardModel from './components/card-model'
|
||||
import CardModelSpace from './components/card-model-space'
|
||||
import ChartModelBox from './components/chart-model-box'
|
||||
import CardModel from './components/card-model' // 卡片组件
|
||||
import CardModelSpace from './components/card-model-space' // 第一行右侧小卡片组件
|
||||
import ChartModelBox from './components/chart-model-box' // 图表组件
|
||||
import TableModel from './components/table-model' // 二级页面列表组件
|
||||
export default {
|
||||
components: {
|
||||
CardModel,
|
||||
CardModelSpace,
|
||||
ChartModelBox
|
||||
ChartModelBox,
|
||||
TableModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否二级页面
|
||||
isHome: false,
|
||||
// 二级页面标题
|
||||
levelTwoTitle: '',
|
||||
// 表单查询条件
|
||||
queryParams: {},
|
||||
queryParams: {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
company: '',
|
||||
project: ''
|
||||
},
|
||||
// 日期查询条件
|
||||
queryDate: [],
|
||||
cardList_1: [
|
||||
|
|
@ -198,6 +229,16 @@ export default {
|
|||
// 重置
|
||||
onHandleReset() {
|
||||
this.queryDate = []
|
||||
this.$refs.queryFormRef.resetFields()
|
||||
},
|
||||
// 自定义事件 打开二级页面
|
||||
onOpenLevelTwoPages(title) {
|
||||
this.levelTwoTitle = title
|
||||
this.isHome = true
|
||||
},
|
||||
// 自定义事件 关闭二级页面
|
||||
onCloseLevelTwoPages() {
|
||||
this.isHome = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue