219 lines
5.8 KiB
Vue
219 lines
5.8 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<TableHeader datePicker ref="TableHeaderRef">
|
|
<template #select>
|
|
<el-form-item label="筛选数据">
|
|
<el-input
|
|
v-model="tableStore.table.params.searchValue"
|
|
clearable
|
|
placeholder="请选择筛选数据"
|
|
></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</TableHeader>
|
|
<div class="box">
|
|
<MyEChart style='flex: 1.2;' :options="options1" />
|
|
<MyEChart style='flex: 2;' :options="options2" />
|
|
</div>
|
|
<Table ref="tableRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
|
import TableStore from '@/utils/tableStore'
|
|
import Table from '@/components/table/index.vue'
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { useDictData } from '@/stores/dictData'
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
import { info } from 'console'
|
|
|
|
const dictData = useDictData()
|
|
|
|
const dialogVisible = ref(false)
|
|
const TableHeaderRef = ref()
|
|
const title = ref('')
|
|
const options1 = ref({})
|
|
const options2 = ref({})
|
|
|
|
const ruleFormRef = ref()
|
|
const tableStore = new TableStore({
|
|
url: '/system-boot/area/areaSelect',
|
|
publicHeight: 345,
|
|
method: 'POST',
|
|
column: [
|
|
{ field: 'name', title: '事务名称' },
|
|
{ field: 'type', title: '事务类型' },
|
|
{ field: 'createUser', title: '创建人员' },
|
|
{ field: 'companyName', title: '创建部门' },
|
|
{ field: 'modifyUser', title: '处理人员' },
|
|
{ field: 'modifyTime', title: '处理时间' },
|
|
{ field: 'progressTime', title: '进行时间(天)' },
|
|
{ field: 'progress', title: '流程状态' },
|
|
{ field: 'alertType', title: '预警类型' },
|
|
|
|
{
|
|
title: '操作',
|
|
width: '180',
|
|
render: 'buttons',
|
|
buttons: [
|
|
{
|
|
name: 'edit',
|
|
title: '上传',
|
|
type: 'primary',
|
|
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {}
|
|
},
|
|
{
|
|
name: 'edit',
|
|
title: '查看',
|
|
type: '',
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: async row => {}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
|
|
loadCallback: () => {
|
|
tableStore.table.data = [
|
|
{
|
|
state: 2
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
tableStore.table.params.searchState = ''
|
|
tableStore.table.params.searchValue = ''
|
|
tableStore.table.params.type = ''
|
|
|
|
provide('tableStore', tableStore)
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
info()
|
|
})
|
|
//渲染图表
|
|
const info = () => {
|
|
options1.value = {
|
|
title: {
|
|
text: '商务类型',
|
|
x: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal'
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
data: ['全部', '预警单', '告警单']
|
|
}
|
|
],
|
|
yAxis: [{}],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barMaxWidth: 30, //最大宽度
|
|
data: [
|
|
{
|
|
value: 9,
|
|
id: ''
|
|
},
|
|
{
|
|
value: 4,
|
|
id: '0'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '1'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
options2.value = {
|
|
title: {
|
|
text: '事务流程',
|
|
x: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal'
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
data: [
|
|
'全部',
|
|
'开始',
|
|
'预/告警单下发',
|
|
'预/告警单反馈',
|
|
'现场测试',
|
|
'整改通知单下发',
|
|
'整改通知单反馈',
|
|
'完结'
|
|
]
|
|
}
|
|
],
|
|
yAxis: [{}],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barMaxWidth: 30, //最大宽度
|
|
data: [
|
|
{
|
|
value: 9,
|
|
id: ''
|
|
},
|
|
{
|
|
value: 4,
|
|
id: '0'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '1'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '2'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '3'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '4'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '5'
|
|
},
|
|
{
|
|
value: 5,
|
|
id: '6'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
// 新增
|
|
const add = () => {
|
|
title.value = '新增告警单'
|
|
dialogVisible.value = true
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
height: 280px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|