|
|
@@ -0,0 +1,474 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="日期" prop="dataDate">
|
|
|
+ <el-date-picker clearable
|
|
|
+ v-model="queryParams.dataDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小时" prop="hour">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.hour"
|
|
|
+ placeholder="请输入小时"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产线编号" prop="line">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.line"
|
|
|
+ placeholder="请输入产线编号"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="产量" prop="length">-->
|
|
|
+ <!-- <el-input-->
|
|
|
+ <!-- v-model="queryParams.length"-->
|
|
|
+ <!-- placeholder="请输入产量"-->
|
|
|
+ <!-- clearable-->
|
|
|
+ <!-- @keyup.enter="handleQuery"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- <el-row :gutter="10" class="mb8">-->
|
|
|
+ <!-- <el-col :span="1.5">-->
|
|
|
+ <!-- <el-button-->
|
|
|
+ <!-- type="primary"-->
|
|
|
+ <!-- plain-->
|
|
|
+ <!-- icon="Plus"-->
|
|
|
+ <!-- @click="handleAdd"-->
|
|
|
+ <!-- v-hasPermi="['dye:line:add']"-->
|
|
|
+ <!-- >新增</el-button>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- <el-col :span="1.5">-->
|
|
|
+ <!-- <el-button-->
|
|
|
+ <!-- type="success"-->
|
|
|
+ <!-- plain-->
|
|
|
+ <!-- icon="Edit"-->
|
|
|
+ <!-- :disabled="single"-->
|
|
|
+ <!-- @click="handleUpdate"-->
|
|
|
+ <!-- v-hasPermi="['dye:line:edit']"-->
|
|
|
+ <!-- >修改</el-button>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- <el-col :span="1.5">-->
|
|
|
+ <!-- <el-button-->
|
|
|
+ <!-- type="danger"-->
|
|
|
+ <!-- plain-->
|
|
|
+ <!-- icon="Delete"-->
|
|
|
+ <!-- :disabled="multiple"-->
|
|
|
+ <!-- @click="handleDelete"-->
|
|
|
+ <!-- v-hasPermi="['dye:line:remove']"-->
|
|
|
+ <!-- >删除</el-button>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- <el-col :span="1.5">-->
|
|
|
+ <!-- <el-button-->
|
|
|
+ <!-- type="warning"-->
|
|
|
+ <!-- plain-->
|
|
|
+ <!-- icon="Download"-->
|
|
|
+ <!-- @click="handleExport"-->
|
|
|
+ <!-- v-hasPermi="['dye:line:export']"-->
|
|
|
+ <!-- >导出</el-button>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>-->
|
|
|
+ <!-- </el-row>-->
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="lineList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center"/>
|
|
|
+ <!-- <el-table-column label="产线小时统计ID" align="center" prop="hourLineId" />-->
|
|
|
+ <el-table-column label="日期" align="center" prop="dataDate" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.dataDate, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小时" align="center" prop="hour"/>
|
|
|
+ <el-table-column label="产线编号" align="center" prop="line"/>
|
|
|
+ <!-- <el-table-column label="稼动率" align="center" prop="uptime" />-->
|
|
|
+ <!-- <el-table-column label="产量" align="center" prop="length" />-->
|
|
|
+ <el-table-column label="速度" align="center" prop="speed"/>
|
|
|
+ <el-table-column label="电量" align="center" prop="energy"/>
|
|
|
+ <el-table-column label="电流" align="center" prop="amp"/>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" icon="View" @click="handleView(scope.row)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 查看产线小时统计数据对话框 -->
|
|
|
+ <el-dialog :title="title" v-model="open" width="1200px" append-to-body>
|
|
|
+ <el-form ref="lineRef" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="日期" prop="dataDate">
|
|
|
+ <el-date-picker clearable
|
|
|
+ v-model="form.dataDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ disabled>
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="小时" prop="hour">
|
|
|
+ <el-input v-model="form.hour" placeholder="请输入小时" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="产线编号" prop="line">
|
|
|
+ <el-input v-model="form.line" placeholder="请输入产线编号" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="速度" prop="speed">
|
|
|
+ <el-input v-model="form.speed" placeholder="请输入速度" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 速度分钟级数据图表 -->
|
|
|
+ <el-form-item label-width="0">
|
|
|
+ <div ref="speedChartRef" style="width: 100%; height: 300px;"></div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="电量" prop="energy">
|
|
|
+ <el-input v-model="form.energy" placeholder="请输入电量" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="电流" prop="amp">
|
|
|
+ <el-input v-model="form.amp" placeholder="请输入电流" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- 电量分钟级数据图表 -->
|
|
|
+ <el-form-item label-width="0">
|
|
|
+ <div ref="energyChartRef" style="width: 100%; height: 300px;"></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- 电流分钟级数据图表 -->
|
|
|
+ <el-form-item label-width="0">
|
|
|
+ <div ref="ampChartRef" style="width: 100%; height: 300px;"></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Line">
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import {addLine, delLine, getLine, listLine, updateLine} from "@/api/dye/line";
|
|
|
+
|
|
|
+const {proxy} = getCurrentInstance();
|
|
|
+
|
|
|
+const lineList = ref([]);
|
|
|
+const open = ref(false);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const title = ref("");
|
|
|
+
|
|
|
+// 图表引用
|
|
|
+const lengthChartRef = ref(null);
|
|
|
+const speedChartRef = ref(null);
|
|
|
+const energyChartRef = ref(null);
|
|
|
+const ampChartRef = ref(null);
|
|
|
+
|
|
|
+// 图表实例
|
|
|
+let lengthChartInstance = null;
|
|
|
+let speedChartInstance = null;
|
|
|
+let energyChartInstance = null;
|
|
|
+let ampChartInstance = null;
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: {},
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ dataDate: null,
|
|
|
+ hour: null,
|
|
|
+ line: null,
|
|
|
+ length: null,
|
|
|
+ },
|
|
|
+ rules: {}
|
|
|
+});
|
|
|
+
|
|
|
+const {queryParams, form, rules} = toRefs(data);
|
|
|
+
|
|
|
+/** 查询产线小时统计数据列表 */
|
|
|
+function getList() {
|
|
|
+ loading.value = true;
|
|
|
+ listLine(queryParams.value).then(response => {
|
|
|
+ lineList.value = response.rows;
|
|
|
+ total.value = response.total;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 取消按钮
|
|
|
+function cancel() {
|
|
|
+ open.value = false;
|
|
|
+ reset();
|
|
|
+}
|
|
|
+
|
|
|
+// 表单重置
|
|
|
+function reset() {
|
|
|
+ form.value = {
|
|
|
+ hourLineId: null,
|
|
|
+ dataDate: null,
|
|
|
+ hour: null,
|
|
|
+ line: null,
|
|
|
+ uptime: null,
|
|
|
+ length: null,
|
|
|
+ lengthM: null,
|
|
|
+ speed: null,
|
|
|
+ speedM: null,
|
|
|
+ energy: null,
|
|
|
+ energyM: null,
|
|
|
+ amp: null,
|
|
|
+ ampM: null,
|
|
|
+ createdBy: null,
|
|
|
+ createdTime: null,
|
|
|
+ updatedBy: null,
|
|
|
+ updatedTime: null,
|
|
|
+ remark: null
|
|
|
+ };
|
|
|
+ proxy.resetForm("lineRef");
|
|
|
+
|
|
|
+ // 销毁图表实例
|
|
|
+ if (speedChartInstance) {
|
|
|
+ speedChartInstance.dispose();
|
|
|
+ speedChartInstance = null;
|
|
|
+ }
|
|
|
+ if (energyChartInstance) {
|
|
|
+ energyChartInstance.dispose();
|
|
|
+ energyChartInstance = null;
|
|
|
+ }
|
|
|
+ if (ampChartInstance) {
|
|
|
+ ampChartInstance.dispose();
|
|
|
+ ampChartInstance = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery() {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery() {
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ handleQuery();
|
|
|
+}
|
|
|
+
|
|
|
+// 多选框选中数据
|
|
|
+function handleSelectionChange(selection) {
|
|
|
+ ids.value = selection.map(item => item.hourLineId);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+}
|
|
|
+
|
|
|
+/** 查看按钮操作 */
|
|
|
+function handleView(row) {
|
|
|
+ reset();
|
|
|
+ const _hourLineId = row.hourLineId || ids.value
|
|
|
+ getLine(_hourLineId).then(response => {
|
|
|
+ form.value = response.data;
|
|
|
+ open.value = true;
|
|
|
+ title.value = "查看产线小时统计数据";
|
|
|
+ // 等待DOM更新后初始化图表
|
|
|
+ nextTick(() => {
|
|
|
+ initCharts();
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化所有图表
|
|
|
+function initCharts() {
|
|
|
+ // 先初始化各个图表
|
|
|
+ initChart(speedChartRef.value, form.value.speedM, '速度分钟级数据', 'speed');
|
|
|
+ initChart(energyChartRef.value, form.value.energyM, '电量分钟级数据', 'energy');
|
|
|
+ initChart(ampChartRef.value, form.value.ampM, '电流分钟级数据', 'amp');
|
|
|
+
|
|
|
+ // 建立图表联动
|
|
|
+ echarts.connect([
|
|
|
+ speedChartInstance,
|
|
|
+ energyChartInstance,
|
|
|
+ ampChartInstance
|
|
|
+ ]);
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化单个图表
|
|
|
+function initChart(chartRef, dataStr, title, chartType) {
|
|
|
+ // 销毁之前的图表实例
|
|
|
+ let chartInstance = echarts.getInstanceByDom(chartRef);
|
|
|
+ if (chartInstance) {
|
|
|
+ chartInstance.dispose();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化图表
|
|
|
+ chartInstance = echarts.init(chartRef);
|
|
|
+
|
|
|
+ // 根据图表类型保存实例
|
|
|
+ switch (chartType) {
|
|
|
+ case 'speed':
|
|
|
+ speedChartInstance = chartInstance;
|
|
|
+ break;
|
|
|
+ case 'energy':
|
|
|
+ energyChartInstance = chartInstance;
|
|
|
+ break;
|
|
|
+ case 'amp':
|
|
|
+ ampChartInstance = chartInstance;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 解析数据
|
|
|
+ let chartData = [];
|
|
|
+ try {
|
|
|
+ chartData = JSON.parse(dataStr || '[]');
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析分钟级数据出错:', e);
|
|
|
+ chartData = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提取时间和数值
|
|
|
+ const times = chartData.map(item => item.time);
|
|
|
+ const values = chartData.map(item => item.value);
|
|
|
+
|
|
|
+ // 图表配置
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: title
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ animation: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: times,
|
|
|
+ name: '分钟'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '数值'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: values,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 8,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置图表配置
|
|
|
+ chartInstance.setOption(option);
|
|
|
+
|
|
|
+ // 监听窗口大小变化，自适应图表
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ chartInstance.resize();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+function handleAdd() {
|
|
|
+ reset();
|
|
|
+ open.value = true;
|
|
|
+ title.value = "添加产线小时统计数据";
|
|
|
+}
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+function handleUpdate(row) {
|
|
|
+ reset();
|
|
|
+ const _hourLineId = row.hourLineId || ids.value
|
|
|
+ getLine(_hourLineId).then(response => {
|
|
|
+ form.value = response.data;
|
|
|
+ open.value = true;
|
|
|
+ title.value = "修改产线小时统计数据";
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ proxy.$refs["lineRef"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (form.value.hourLineId != null) {
|
|
|
+ updateLine(form.value).then(response => {
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addLine(form.value).then(response => {
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+function handleDelete(row) {
|
|
|
+ const _hourLineIds = row.hourLineId || ids.value;
|
|
|
+ proxy.$modal.confirm('是否确认删除产线小时统计数据编号为"' + _hourLineIds + '"的数据项？').then(function () {
|
|
|
+ return delLine(_hourLineIds);
|
|
|
+ }).then(() => {
|
|
|
+ getList();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 导出按钮操作 */
|
|
|
+function handleExport() {
|
|
|
+ proxy.download('dye/line/export', {
|
|
|
+ ...queryParams.value
|
|
|
+ }, `line_${new Date().getTime()}.xlsx`)
|
|
|
+}
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
