songguoqiang
1 year ago
7 changed files with 360 additions and 26 deletions
@ -0,0 +1,144 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true"> |
||||
|
<el-form-item label="日期" prop="date"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.date" |
||||
|
style="width: 240px; height: 30px" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="位置" prop="flag"> |
||||
|
<el-select v-model="queryParams.flag" placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in types.flagList" |
||||
|
:key="item.value" |
||||
|
:label="item.name" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button> |
||||
|
<el-button size="mini" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-divider content-position="left"><div style="font-size:16px; float: left"><b>{{names}}</b></div></el-divider> |
||||
|
<el-table |
||||
|
v-loading="loading" :data="dataList" border="true" highlight-current-row="true" |
||||
|
header-row-style="height: 50px; text-align: center" :span-method="arraySpanMethod" |
||||
|
:row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"> |
||||
|
<el-table-column label="" prop="name" align="right" :show-overflow-tooltip="true" width="150" /> |
||||
|
<el-table-column label="00:00-08:00" prop="num0008" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="08:00-16:00" prop="num0816" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="16:00-24:00" prop="num1624" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="00:00-12:00" prop="num0012" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="12:00-24:00" prop="num1224" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="总(00:00-24:00)" prop="num0024" align="center" :show-overflow-tooltip="true" /> |
||||
|
</el-table> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import * as TjanalysisApi from '@/api/tjanalysis' |
||||
|
import { formatDate } from '@/utils/formatTime' |
||||
|
|
||||
|
defineOptions({ name: 'HrElongatorData' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const route = useRoute() // 路由信息 |
||||
|
const routeName = ref() |
||||
|
routeName.value = route.name |
||||
|
const loading = ref(true) |
||||
|
const dataList = ref([]) |
||||
|
const names = ref("热轧108延伸"); |
||||
|
const queryParams = reactive({ |
||||
|
date: formatDate(new Date() , 'YYYY-MM-DD'), |
||||
|
flag: '1' |
||||
|
}) |
||||
|
|
||||
|
const types = reactive({flagList: [ |
||||
|
{name: '热轧108延伸' , value: '1'}, |
||||
|
{name: '热轧90延伸' , value: '2'} |
||||
|
]}) |
||||
|
|
||||
|
const handleQuery = async () => { |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const resetQuery = async () => { |
||||
|
queryParams.date = formatDate(new Date() , 'YYYY-MM-DD') |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const getList = async () => { |
||||
|
const res = await TjanalysisApi.querySizingmillDay(queryParams) |
||||
|
dataList.value = res.dataList |
||||
|
loading.value = false |
||||
|
if(queryParams.flag=='1'){ |
||||
|
names.value = "热轧108延伸" |
||||
|
}else{ |
||||
|
names.value = "热轧90延伸" |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function arraySpanMethod ({ row, column, rowIndex, columnIndex }) { |
||||
|
if (rowIndex == 6) { |
||||
|
if (columnIndex == 0) { |
||||
|
return { |
||||
|
rowspan: 1, |
||||
|
colspan: 10 |
||||
|
} |
||||
|
} else if (columnIndex == 10) { |
||||
|
return { |
||||
|
rowspan: 1, |
||||
|
colspan: 2 |
||||
|
} |
||||
|
} else { |
||||
|
return { |
||||
|
rowspan: 0, |
||||
|
colspan: 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function tableRowClassName({row, rowIndex}) { |
||||
|
if (rowIndex === 7) { |
||||
|
return 'success-row' |
||||
|
} |
||||
|
return '' |
||||
|
} |
||||
|
|
||||
|
function tableCellClassName({row, column, rowIndex, columnIndex}) { |
||||
|
if (columnIndex == 0) { |
||||
|
return 'success-cols' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(async () => { |
||||
|
getList() |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.el-table .success-row { |
||||
|
background: #f0f9eb; |
||||
|
} |
||||
|
|
||||
|
.el-table .success-cols { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
|
|
@ -0,0 +1,145 @@ |
|||||
|
<template> |
||||
|
<ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true"> |
||||
|
<el-form-item label="日期" prop="date"> |
||||
|
<el-date-picker |
||||
|
v-model="queryParams.date" |
||||
|
style="width: 240px; height: 30px" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
type="date" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="位置" prop="flag"> |
||||
|
<el-select v-model="queryParams.flag" placeholder="请选择"> |
||||
|
<el-option |
||||
|
v-for="item in types.flagList" |
||||
|
:key="item.value" |
||||
|
:label="item.name" |
||||
|
:value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button> |
||||
|
<el-button size="mini" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
<!-- 列表 --> |
||||
|
<ContentWrap> |
||||
|
<el-divider content-position="left"><div style="font-size:16px; float: left"><b>{{names}}</b></div></el-divider> |
||||
|
<el-table |
||||
|
v-loading="loading" :data="dataList" border="true" highlight-current-row="true" |
||||
|
header-row-style="height: 50px; text-align: center" :span-method="arraySpanMethod" |
||||
|
:row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"> |
||||
|
<el-table-column label="" prop="name" align="right" :show-overflow-tooltip="true" width="150" /> |
||||
|
<el-table-column label="00:00-08:00" prop="num0008" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="08:00-16:00" prop="num0816" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="16:00-24:00" prop="num1624" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="00:00-12:00" prop="num0012" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="12:00-24:00" prop="num1224" align="center" :show-overflow-tooltip="true" /> |
||||
|
<el-table-column label="总(00:00-24:00)" prop="num0024" align="center" :show-overflow-tooltip="true" /> |
||||
|
</el-table> |
||||
|
</ContentWrap> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import * as TjanalysisApi from '@/api/tjanalysis' |
||||
|
import { formatDate } from '@/utils/formatTime' |
||||
|
|
||||
|
defineOptions({ name: 'HrSizingMillData' }) |
||||
|
|
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
const { t } = useI18n() // 国际化 |
||||
|
|
||||
|
const route = useRoute() // 路由信息 |
||||
|
const routeName = ref() |
||||
|
routeName.value = route.name |
||||
|
const loading = ref(true) |
||||
|
const dataList = ref([]) |
||||
|
const names = ref("热轧108定经"); |
||||
|
const queryParams = reactive({ |
||||
|
date: formatDate(new Date() , 'YYYY-MM-DD'), |
||||
|
flag: '1' |
||||
|
}) |
||||
|
|
||||
|
const types = reactive({flagList: [ |
||||
|
{name: '热轧108定经' , value: '1'}, |
||||
|
{name: '热轧90定经' , value: '2'} |
||||
|
]}) |
||||
|
|
||||
|
const handleQuery = async () => { |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const resetQuery = async () => { |
||||
|
queryParams.date = formatDate(new Date() , 'YYYY-MM-DD') |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const getList = async () => { |
||||
|
const res = await TjanalysisApi.querySizingmillDay(queryParams) |
||||
|
dataList.value = res.dataList |
||||
|
loading.value = false |
||||
|
if(queryParams.flag=='1'){ |
||||
|
names.value = "热轧108定经" |
||||
|
}else{ |
||||
|
names.value = "热轧90定经" |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
function arraySpanMethod ({ row, column, rowIndex, columnIndex }) { |
||||
|
if (rowIndex == 6) { |
||||
|
if (columnIndex == 0) { |
||||
|
return { |
||||
|
rowspan: 1, |
||||
|
colspan: 10 |
||||
|
} |
||||
|
} else if (columnIndex == 10) { |
||||
|
return { |
||||
|
rowspan: 1, |
||||
|
colspan: 2 |
||||
|
} |
||||
|
} else { |
||||
|
return { |
||||
|
rowspan: 0, |
||||
|
colspan: 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function tableRowClassName({row, rowIndex}) { |
||||
|
if (rowIndex === 7) { |
||||
|
return 'success-row' |
||||
|
} |
||||
|
return '' |
||||
|
} |
||||
|
|
||||
|
function tableCellClassName({row, column, rowIndex, columnIndex}) { |
||||
|
if (columnIndex == 0) { |
||||
|
return 'success-cols' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 初始化 **/ |
||||
|
onMounted(async () => { |
||||
|
getList() |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.el-table .success-row { |
||||
|
background: #f0f9eb; |
||||
|
} |
||||
|
|
||||
|
.el-table .success-cols { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue