1
This commit is contained in:
@ -9,7 +9,7 @@ VITE_APP_ENV = 'development'
|
||||
# 李陈杰 209
|
||||
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||
# 李陈杰 209
|
||||
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||
# 曾涛
|
||||
VITE_APP_BASE_API = 'http://192.168.110.180:8899'
|
||||
# 罗成
|
||||
|
||||
0
src/views/demo3/bar1.vue
Normal file
0
src/views/demo3/bar1.vue
Normal file
351
src/views/demo3/components/box1/qushi.vue
Normal file
351
src/views/demo3/components/box1/qushi.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!-- 图表标题和时间范围选择器 -->
|
||||
<div class="chart-header">
|
||||
<h2>发电量趋势 (kWh)</h2>
|
||||
<div class="chart-actions">
|
||||
<button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
|
||||
<button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
|
||||
<button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 时间范围状态
|
||||
const timeRange = ref('day');
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 定义颜色常量
|
||||
const ACTUAL_COLOR = '#2A82E4';
|
||||
const THEORETICAL_COLOR = '#67C23A';
|
||||
|
||||
// 根据时间范围返回对应的数据
|
||||
const getChartData = () => {
|
||||
if (timeRange.value === 'day') {
|
||||
return {
|
||||
xAxis: ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
|
||||
actualData: [35, 65, 60, 55, 45, 50, 45, 30],
|
||||
theoreticalData: [30, 70, 85, 80, 65, 60, 65, 95]
|
||||
};
|
||||
} else if (timeRange.value === 'week') {
|
||||
return {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周'],
|
||||
actualData: [280, 360, 320, 400],
|
||||
theoreticalData: [300, 400, 350, 450]
|
||||
};
|
||||
} else {
|
||||
// 月数据
|
||||
return {
|
||||
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
actualData: [1250, 1420, 1380, 1650, 1520, 1780],
|
||||
theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = getChartData();
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// 悬停线相关设置
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
color: '#2A82E4',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#e8e8e8',
|
||||
borderWidth:2 ,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
formatter: function (params) {
|
||||
const date = params[0].axisValue;
|
||||
const actualValue = params[0].value;
|
||||
const theoreticalValue = params[1].value;
|
||||
|
||||
return `
|
||||
<div style="font-weight: bold;">${date}</div>
|
||||
<div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
|
||||
<div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 'center',
|
||||
data: ['实际发电', '理论发电'],
|
||||
top: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'stack',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '25%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#dcdfe6'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize: 12
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed' // 设置分割线为虚线
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#dcdfe6'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize: 12
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //显示分割线
|
||||
lineStyle: {
|
||||
type: 'dashed' // 设置分割线为虚线
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际发电',
|
||||
type: 'line',
|
||||
data: data.actualData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
// 开始不显示拐点， 鼠标经过显示
|
||||
showSymbol: false,
|
||||
// 设置拐点颜色以及边框
|
||||
itemStyle: {
|
||||
color: ACTUAL_COLOR
|
||||
},
|
||||
lineStyle: {
|
||||
color: ACTUAL_COLOR,
|
||||
width: 3
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#2A82E4',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '理论发电',
|
||||
type: 'line',
|
||||
data: data.theoreticalData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: THEORETICAL_COLOR
|
||||
},
|
||||
lineStyle: {
|
||||
color: THEORETICAL_COLOR,
|
||||
width: 3
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#67C23A',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3
|
||||
}
|
||||
},
|
||||
// 开始不显示拐点， 鼠标经过显示
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// 监听时间范围变化，更新图表
|
||||
watch(timeRange, () => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-actions button.active {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
padding: 20px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
</style>
|
||||
225
src/views/demo3/components/box1/statusBox.vue
Normal file
225
src/views/demo3/components/box1/statusBox.vue
Normal file
File diff suppressed because one or more lines are too long
205
src/views/demo3/components/box2/bar.vue
Normal file
205
src/views/demo3/components/box2/bar.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>发电量预测对比</h2>
|
||||
<p>实际发电量与预测值偏差在u±5%以内，处于合理范围，预测模型准确度较高。</p>
|
||||
</div>
|
||||
<div class="chart-content" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = async () => {
|
||||
await nextTick();
|
||||
if (!chartRef.value) return;
|
||||
|
||||
// 销毁已存在的图表实例
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
|
||||
// 创建新的图表实例
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
// 图表配置
|
||||
const option = {
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(13, 64, 71, 0.50)',
|
||||
borderColor: 'rgba(143, 225, 252, 0.60)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
padding: 10,
|
||||
borderRadius: 4,
|
||||
},
|
||||
legend: {
|
||||
data: ['实际发电量', '预测发电量'],
|
||||
itemWidth: 14,
|
||||
itemHeight: 10,
|
||||
itemGap: 4,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['上周', '本周'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 10000,
|
||||
interval: 5000,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际发电量',
|
||||
type: 'bar',
|
||||
data: [4899, 5200],
|
||||
itemStyle: {
|
||||
color: '#1a77dd',
|
||||
borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
|
||||
},
|
||||
barWidth: 60
|
||||
},
|
||||
{
|
||||
name: '预测发电量',
|
||||
type: 'bar',
|
||||
data: [5000, 5300],
|
||||
itemStyle: {
|
||||
color: '#7c3aed',
|
||||
borderRadius: [8, 8, 0, 0] // 设置圆角，上左、上右、下右、下左
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#6d28d9' // 悬停时的颜色
|
||||
}
|
||||
},
|
||||
barWidth: 60
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 设置图表配置
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 窗口大小改变时重新调整图表
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-header p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 70px);
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.chart-header p {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 65px);
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
src/views/demo3/components/box2/pie.vue
Normal file
130
src/views/demo3/components/box2/pie.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="performance-pie-container">
|
||||
<h2>性能比分析</h2>
|
||||
<p>当前系统性能比为82.5%，高于同行水平（78%），表明系统运行状态良好。</p>
|
||||
<div id="performancePieChart" ref="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref<HTMLElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
const initChart = () => {
|
||||
if (chartRef.value) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
radius: '100%',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 20,
|
||||
color: [
|
||||
[0.78, '#2f4554'], // 同行水平78%
|
||||
[0.825, '#1890ff'], // 当前性能比82.5%
|
||||
[1, '#52c41a']
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%',
|
||||
color: '#000',
|
||||
fontSize: 30,
|
||||
fontWeight: 'bold',
|
||||
offsetCenter: [0, '-5%']
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 82.5,
|
||||
name: '性能比'
|
||||
}
|
||||
],
|
||||
// 添加内圆环效果
|
||||
anchor: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
size: 10,
|
||||
itemStyle: {
|
||||
borderWidth: 10,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.performance-pie-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.performance-pie-container h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.performance-pie-container p {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#performancePieChart {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
316
src/views/demo3/components/line1.vue
Normal file
316
src/views/demo3/components/line1.vue
Normal file
@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!-- 图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 定义颜色常量
|
||||
const ACTUAL_COLOR = '#31FBFB';
|
||||
const THEORETICAL_COLOR = '#5158FA';
|
||||
|
||||
|
||||
const dataX = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'];
|
||||
const y = [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53];
|
||||
const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73];
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '逆变器输出与汇流箱电流',
|
||||
top: 5,
|
||||
textStyle: {
|
||||
color: '#111111', // 标题颜色
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 'center',
|
||||
top: 4,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 25,
|
||||
icon: 'stack',
|
||||
textStyle: {
|
||||
color: '#E1E5E6'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '30%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: dataX,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '逆变器输出:KW',
|
||||
position: 'left',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,// y轴分割线
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '汇流箱电流',
|
||||
position: 'right',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: false,// y轴分割线
|
||||
}
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '总流量',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 关联到右侧y轴
|
||||
lineStyle: {
|
||||
width: 4 // 线条宽度，单位是 px
|
||||
},
|
||||
// 填充颜色设置
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
// 拐点
|
||||
showSymbol: true,
|
||||
symbolSize: 10,
|
||||
// 设置拐点颜色以及边框
|
||||
itemStyle: {
|
||||
color: 'rgba(253, 190, 93, 1)'
|
||||
},
|
||||
data: y1
|
||||
},
|
||||
{
|
||||
name: '进园',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
width: 4 // 线条宽度，单位是 px
|
||||
},
|
||||
// 填充颜色设置
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
// 拐点
|
||||
showSymbol: true,
|
||||
symbolSize: 10,
|
||||
// 设置拐点颜色以及边框
|
||||
itemStyle: {
|
||||
color: 'rgba(26, 119, 221, 1)'
|
||||
},
|
||||
data: y
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-actions button.active {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
padding: 20px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
</style>
|
||||
0
src/views/demo3/components/line2.vue
Normal file
0
src/views/demo3/components/line2.vue
Normal file
78
src/views/demo3/index.vue
Normal file
78
src/views/demo3/index.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="model">
|
||||
<!-- 标题栏 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<TitleComponent title="运行参数曲线分析" subtitle="实时监控光伏系统关键运行参数，分析性能趋势" />
|
||||
</el-col>
|
||||
<!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
|
||||
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
|
||||
<!-- 子col1：输入框容器 -->
|
||||
<el-col :span="4">
|
||||
<el-select placeholder="请选择电站">
|
||||
<el-option label="所有电站" value="all"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<!-- 子col2：下拉框容器 -->
|
||||
<el-col :span="4">
|
||||
<el-select placeholder="请选择月份">
|
||||
<el-option label="所有月份" value="all"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary">
|
||||
导出数据
|
||||
<el-icon class="el-icon--right">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<!-- 图示区域 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-card>
|
||||
<statusBox></statusBox>
|
||||
<qushi class="line"></qushi>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card>
|
||||
<bar></bar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="16">
|
||||
<el-card>
|
||||
<line1 class="line"></line1>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card>
|
||||
<bar></bar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import TitleComponent from '../demo/components/TitleComponent.vue';
|
||||
import StatusBox from './components/box1/statusBox.vue'
|
||||
import Qushi from './components/box1/qushi.vue'
|
||||
import Bar from './components/box2/bar.vue'
|
||||
import line1 from './components/line1.vue';
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.model {
|
||||
padding: 20p15px;
|
||||
}
|
||||
</style>
|
||||
@ -163,9 +163,6 @@ const handleTabChange = (tab) => {
|
||||
getVersionNums(false);
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getVersionNums();
|
||||
});
|
||||
|
||||
// 获取版本号
|
||||
async function getVersionNums(isSheet = true) {
|
||||
@ -173,6 +170,7 @@ async function getVersionNums(isSheet = true) {
|
||||
state.loading.versions = true;
|
||||
state.error = null;
|
||||
|
||||
console.log('🚀 ~ handleSheetName ~ currentProject.value?.id:', currentProject.value?.id);
|
||||
const res = await obtainAllVersionNumbers({
|
||||
projectId: currentProject.value?.id,
|
||||
workOrderType: state.work_order_type,
|
||||
@ -378,6 +376,32 @@ const downloadTemplate = (type) => {
|
||||
alert('下载失败，请重试');
|
||||
}
|
||||
};
|
||||
const resetState = () => {
|
||||
state.tableData = [];
|
||||
state.options = [];
|
||||
state.sheets = [];
|
||||
state.queryForm.versions = '';
|
||||
state.queryForm.sheet = '';
|
||||
state.versionsData = {};
|
||||
state.error = null;
|
||||
isExpandAll.value = true;
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getVersionNums();
|
||||
});
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
resetState();
|
||||
state.queryForm.projectId = nid;
|
||||
getVersionNums();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.billof-quantities {
|
||||
|
||||
@ -73,6 +73,7 @@
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="cailiaoshebeiList" @selection-change="handleSelectionChange">
|
||||
<el-table-column label="所属上级" align="center" prop="suppliespricePname" />
|
||||
<el-table-column label="物资名称" align="center" prop="name" />
|
||||
<el-table-column label="质量标准" align="center" prop="qs" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
@ -129,21 +130,21 @@
|
||||
<el-table-column prop="name" align="center" label="物资名称" width="160">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.name" v-if="scope.row.mrpBaseId" placeholder="请输入物资名称" disabled />
|
||||
<el-select
|
||||
<el-cascader
|
||||
v-else
|
||||
:disabled="!scope.row.batchNumber"
|
||||
v-model="scope.row.suppliespriceId"
|
||||
:show-all-levels="false"
|
||||
:options="getAvailableNameList(scope.$index)"
|
||||
placeholder="请选择"
|
||||
@change="(val) => selectName(val, scope.row, scope.$index)"
|
||||
>
|
||||
<!-- 动态过滤：排除当前行外已选中的物资ID -->
|
||||
<el-option
|
||||
v-for="item in getAvailableNameList(scope.$index)"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:props="{
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
emitPath: false
|
||||
}"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 剩余量列 -->
|
||||
@ -412,7 +413,15 @@ const validateDemandQuantity = (row: PlanListItem, index: number) => {
|
||||
const getMrpBaseRemaining = async (suppliespriceId: number, row: PlanListItem) => {
|
||||
try {
|
||||
const res = await mrpBaseRemaining({ suppliespriceId });
|
||||
row.Remaining = res.data || 0;
|
||||
const selected = res.data;
|
||||
console.log('🚀 ~ getMrpBaseRemaining ~ selected:', selected);
|
||||
row.Remaining = selected.remainingQuantity || 0;
|
||||
row.name = selected.name;
|
||||
row.specification = selected.specification;
|
||||
row.unit = selected.unit;
|
||||
row.qs = selected.qs || '';
|
||||
row.remark = selected.remark || '';
|
||||
row.arrivalTime = selected.arrivalTime || '';
|
||||
// 剩余量更新后，重新校验当前数量
|
||||
validateDemandQuantity(row, 0);
|
||||
} catch (error) {
|
||||
@ -426,27 +435,17 @@ const getAvailableNameList = (currentIndex: number) => {
|
||||
// 收集除当前行外已选中的物资ID
|
||||
const selectedIds = form.value.planList
|
||||
.filter((_, index) => index !== currentIndex)
|
||||
.map(item => item.suppliespriceId)
|
||||
.filter(id => id !== undefined && id !== null);
|
||||
.map((item) => item.suppliespriceId)
|
||||
.filter((id) => id !== undefined && id !== null);
|
||||
|
||||
// 过滤掉已选中的物资
|
||||
return nameList.value.filter(item => !selectedIds.includes(item.id));
|
||||
return nameList.value.filter((item) => !selectedIds.includes(item.id));
|
||||
};
|
||||
|
||||
/** 选择物资名称触发 */
|
||||
const selectName = (val: number, row: PlanListItem, index: number) => {
|
||||
// 1. 获取剩余量并更新基础信息
|
||||
getMrpBaseRemaining(val, row).then(() => {
|
||||
const selected = nameList.value.find((item: any) => item.id === val);
|
||||
if (selected) {
|
||||
row.name = selected.name;
|
||||
row.specification = selected.specification;
|
||||
row.unit = selected.unit;
|
||||
row.qs = selected.qs || '';
|
||||
row.remark = selected.remark || '';
|
||||
row.arrivalTime = selected.arrivalTime || '';
|
||||
}
|
||||
});
|
||||
getMrpBaseRemaining(val, row);
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
<el-table v-loading="loading" :data="qualityInspectionList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键id" align="center" prop="id" v-if="false" />
|
||||
<el-table-column label="填报人" align="center" prop="createBy" />
|
||||
<el-table-column label="填报人" align="center" prop="createByName" />
|
||||
<el-table-column label="填报时间" align="center" prop="createTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
|
||||
@ -86,7 +86,7 @@
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建者" align="center" prop="createBy" />
|
||||
<!-- <el-table-column label="创建者" align="center" prop="createBy" /> -->
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<!-- <el-tooltip content="验证" placement="top">
|
||||
@ -145,6 +145,11 @@
|
||||
<el-option v-for="dict in foremanOpt" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否回复" prop="isReply">
|
||||
<el-radio-group v-model="form.isReply">
|
||||
<el-radio v-for="dict in isReply_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="工单状态" prop="inspectionStatus">
|
||||
<el-radio-group v-model="form.inspectionStatus">
|
||||
<el-radio v-for="dict in quality_inspection_status_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
||||
@ -197,6 +202,16 @@ const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const isReply_type = ref([
|
||||
{
|
||||
label: '是',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '否',
|
||||
value: 2
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const qualityInspectionFormRef = ref<ElFormInstance>();
|
||||
@ -246,6 +261,7 @@ const data = reactive<PageData<QualityInspectionForm, QualityInspectionQuery>>({
|
||||
inspectionHeadline: [{ required: true, message: '巡检标题不能为空', trigger: 'blur' }],
|
||||
inspectionResult: [{ required: true, message: '巡检结果不能为空', trigger: 'blur' }],
|
||||
teamId: [{ required: true, message: '班组id不能为空', trigger: 'blur' }],
|
||||
isReply: [{ required: true, message: '是否回复不能为空', trigger: 'change' }],
|
||||
corrector: [{ required: true, message: '整改人不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
<el-table v-loading="loading" :data="safetyInspectionList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" type="index" width="60" align="center" />
|
||||
<el-table-column label="检查项目" align="center" prop="checkProject" />
|
||||
<el-table-column label="处理状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="safety_inspection_type" :value="scope.row.status" />
|
||||
@ -107,8 +108,12 @@
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改安全巡检工单对话框 -->
|
||||
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" append-to-body>
|
||||
<el-form ref="safetyInspectionFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="检查项目" prop="checkProject">
|
||||
<el-input v-model="form.checkProject" placeholder="请输入检查项目" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检查类型" prop="checkType">
|
||||
<el-select v-model="form.checkType" placeholder="请选择检查类型">
|
||||
<el-option v-for="dict in safety_inspection_check_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
@ -137,6 +142,13 @@
|
||||
<el-option v-for="item in foremanOpt" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否回复" prop="isReply">
|
||||
<el-radio-group v-model="form.isReply">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="2">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="问题隐患" prop="hiddenDanger">
|
||||
<el-input v-model="form.hiddenDanger" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
@ -234,7 +246,7 @@ const initFormData: SafetyInspectionForm = {
|
||||
checkTime: undefined,
|
||||
rectificationTime: undefined,
|
||||
rectificationUnit: undefined,
|
||||
|
||||
checkProject: undefined,
|
||||
reviewTime: undefined,
|
||||
checkFile: undefined,
|
||||
rectificationFile: undefined,
|
||||
@ -270,7 +282,9 @@ const data = reactive<PageData<SafetyInspectionForm, SafetyInspectionQuery>>({
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
|
||||
checkType: [{ required: true, message: '检查类型不能为空', trigger: 'blur' }],
|
||||
violationType: [{ required: true, message: '违章类型不能为空', trigger: 'blur' }]
|
||||
violationType: [{ required: true, message: '违章类型不能为空', trigger: 'blur' }],
|
||||
checkProject: [{ required: true, message: '检查项目不能为空', trigger: 'blur' }],
|
||||
isReply: [{ required: true, message: '是否回复不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -50,11 +50,11 @@
|
||||
<span>{{ parseTime(scope.row.meetingDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
|
||||
<template #default="scope">
|
||||
<el-table-column label="上传时间" align="center" prop="createTime" width="180" />
|
||||
<!-- <template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
|
||||
@ -7,15 +7,23 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="中标文件" prop="name">
|
||||
<file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
|
||||
<file-upload
|
||||
v-model="form.costEstimationFile"
|
||||
:fileSize="100"
|
||||
:auto-upload="false"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
|
||||
method="put"
|
||||
ref="fileUploadRef"
|
||||
:data="{
|
||||
projectId: currentProject?.id,
|
||||
type: planType,
|
||||
fileType: '0',
|
||||
bidStatus: '0',
|
||||
id: row.id,
|
||||
winningBidderId: form.winningBidder
|
||||
}" showFileList />
|
||||
}"
|
||||
showFileList
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -75,7 +83,7 @@ const submitForm = () => {
|
||||
fileUploadRef.value.submitUpload().then((res) => {
|
||||
if (res == 'noFile') {
|
||||
ElMessage({
|
||||
message: '请上传招标文件',
|
||||
message: '请上传中标文件',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user