|
@@ -0,0 +1,189 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container row-container">
|
|
|
+ <section class="list-part-container" style="flex: 2">
|
|
|
+ <!-- 搜索区 -->
|
|
|
+ <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
|
|
|
+ <el-form-item label="年份:" prop="year">
|
|
|
+ <el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" :editable="false"
|
|
|
+ :clearable="false" placeholder="请选择时间" @change="handleYearChange" style="width: 130px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工艺图纸电子化基数:" v-hasPermi="['business:conversion:query']" prop="number">
|
|
|
+ <span v-if="!disabled">{{ number }}</span>
|
|
|
+ <el-input v-if="disabled" v-model.trim="number" style="width: 220px; margin-left: 0px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button v-if="!disabled" type="primary" v-hasPermi="['business:conversion:add']" @click="handleEdit">编辑</el-button>
|
|
|
+ <el-button v-if="disabled" type="success" @click="handleSave" >保存</el-button>
|
|
|
+ <el-button v-if="disabled" type="info" @click="handleCancel">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 列表区 -->
|
|
|
+ <div ref="echartDom" style="width: 100%; height: 100%;"></div>
|
|
|
+
|
|
|
+ <!-- 表单 -->
|
|
|
+
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Conversion">
|
|
|
+import { listConversion,addConversion } from '@/api/business/conversion'
|
|
|
+import { ref, onMounted, nextTick, reactive, computed } from 'vue'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import { getProcuctDrawing } from '@/api/business/drawing'
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const disabled = ref(false)
|
|
|
+const echartInstance = ref(null)
|
|
|
+const echartDom = ref(null)
|
|
|
+const procuctDrawing = ref(0)
|
|
|
+const number = ref(0)
|
|
|
+const rawData = ref([])
|
|
|
+const months = ref(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
|
|
+const currentMonthIndex = computed(() => new Date().getMonth())
|
|
|
+const data = reactive({
|
|
|
+ queryParams: {
|
|
|
+ year: new Date().getFullYear().toString()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const { queryParams } = toRefs(data)
|
|
|
+function processChartData(rawData, selectedYear) {
|
|
|
+ // 初始化每月数据为null
|
|
|
+ const monthlyData = new Array(12).fill(null);
|
|
|
+
|
|
|
+ rawData.forEach(record => {
|
|
|
+ const recordDate = new Date(record.date);
|
|
|
+ const recordYear = recordDate.getFullYear();
|
|
|
+ const monthIndex = recordDate.getMonth(); // 获取月份索引
|
|
|
+
|
|
|
+ // 检查年份是否匹配,并设置数据
|
|
|
+ if (recordYear === selectedYear) {
|
|
|
+ monthlyData[monthIndex] = (procuctDrawing.value / parseInt(record.number) * 100).toFixed(2);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 根据选择的年份和月份设置默认值
|
|
|
+ // 如果是2024年7月之后,且在所选年份之内的月份没有数据,则赋予默认值100
|
|
|
+ for (let i = 0; i < 12; i++) {
|
|
|
+ const isAfterJuly2024 = (selectedYear === 2024 && i >= 6) || (selectedYear > 2024);
|
|
|
+ if (monthlyData[i] === null && isAfterJuly2024) {
|
|
|
+ monthlyData[i] = parseInt((procuctDrawing.value / 100 * 100).toFixed(2));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果有数据则使用实际数据,否则使用默认值
|
|
|
+ return monthlyData.map(value => value || 0);
|
|
|
+}
|
|
|
+function handleEdit(){
|
|
|
+ disabled.value = !disabled.value
|
|
|
+}
|
|
|
+
|
|
|
+function handleCancel(){
|
|
|
+ disabled.value = !disabled.value
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+function handleSave(){
|
|
|
+ console.log(number.value)
|
|
|
+ addConversion({number:number.value}).then(res=>{
|
|
|
+ if(res.code ==200){
|
|
|
+ proxy.$modal.msgSuccess("操作成功");
|
|
|
+ disabled.value = !disabled.value
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function updateChart(monthlyData, displayMonths) {
|
|
|
+ echartInstance.value.setOption({
|
|
|
+ title: { text: '工艺图纸电子化率' },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: displayMonths,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '数量',
|
|
|
+ type: 'line',
|
|
|
+ data: displayMonths.map((month, index) => monthlyData[index] || 0), // 如果没有数据则显示0
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ formatter: function (param) {
|
|
|
+ return (param.value) + "%";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function initChart() {
|
|
|
+ echartInstance.value = echarts.init(echartDom.value);
|
|
|
+ updateChart([], months.value); // 使用空数据初始化图表
|
|
|
+}
|
|
|
+
|
|
|
+function handleQuery() {
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+function handleYearChange(year) {
|
|
|
+ // 获取当前年份
|
|
|
+ const currentYear = new Date().getFullYear();
|
|
|
+ // 如果选择的年份大于当前年份,则重置为当前年份
|
|
|
+ if (parseInt(year) > currentYear) {
|
|
|
+ queryParams.value.year = currentYear.toString();
|
|
|
+ } else {
|
|
|
+ // 否则,更新 queryParams 的年份
|
|
|
+ queryParams.value.year = year;
|
|
|
+ }
|
|
|
+ // 根据新的年份获取数据
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+function resetQuery() {
|
|
|
+ queryParams.value.year = new Date().getFullYear().toString();
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+function getList() {
|
|
|
+
|
|
|
+ listConversion(queryParams.value.year).then(res => {
|
|
|
+ rawData.value = res.data;
|
|
|
+ number.value = res.data[0].number
|
|
|
+ getProcuctDrawing().then(res => {
|
|
|
+ procuctDrawing.value = res.data
|
|
|
+ const selectedYear = parseInt(queryParams.value.year);
|
|
|
+ const currentYear = new Date().getFullYear();
|
|
|
+
|
|
|
+ // 处理图表数据
|
|
|
+ const monthlyData = processChartData(rawData.value, selectedYear);
|
|
|
+
|
|
|
+ // 根据选择的年份确定要显示的月份
|
|
|
+ const displayMonths = selectedYear === currentYear ?
|
|
|
+ months.value.slice(0, currentMonthIndex.value + 1) :
|
|
|
+ months.value;
|
|
|
+
|
|
|
+ // 更新图表
|
|
|
+ updateChart(monthlyData, displayMonths);
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ initChart();
|
|
|
+ getList();
|
|
|
+});
|
|
|
+</script>
|