0721

src/views/business/conversion/index.vue

@@ -9,11 +9,12 @@
                 </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-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="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>
@@ -27,19 +28,23 @@
 </template>
 
 <script setup name="Conversion">
-import { listConversion,addConversion } from '@/api/business/conversion'
-import { ref, onMounted, nextTick, reactive, computed } from 'vue'
+import { listConversion, addConversion } from '@/api/business/conversion'
+import { ref, onMounted, reactive, computed } from 'vue'
 import * as echarts from 'echarts'
 import { getProcuctDrawing } from '@/api/business/drawing'
+import { markRaw } from "vue"
 const { proxy } = getCurrentInstance();
 const disabled = ref(false)
 const echartInstance = ref(null)
+const itemNum = ref(0)
 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 { conversion_mes } = proxy.useDict("conversion_mes");
 const data = reactive({
     queryParams: {
         year: new Date().getFullYear().toString()
@@ -47,91 +52,141 @@ const data = reactive({
 })
 
 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(); // 获取月份索引
+        const monthIndex = recordDate.getMonth();
+        if(selectedYear < 2024 ){
+            itemNum.value =0
+                }else if(selectedYear === 2024 && monthIndex == 2){
+                    itemNum.value = 78
+                }else if(selectedYear === 2024 && monthIndex == 3){
+                    itemNum.value = 82
+                }else if(selectedYear === 2024 && monthIndex == 4){
+                    itemNum.value = 85
+                }else if(selectedYear === 2024 && monthIndex == 5){
+                    itemNum.value = 88
+                }else if(selectedYear === 2024 && monthIndex == 6){
+                    itemNum.value = 90
+                }else if(selectedYear <= 2024 && monthIndex <= 1){
+                    itemNum.value =0
+                }
+                else{
+                    itemNum.value = procuctDrawing.value;
+                }
 
-        // 检查年份是否匹配，并设置数据
         if (recordYear === selectedYear) {
-            monthlyData[monthIndex] = (procuctDrawing.value / parseInt(record.number) * 100).toFixed(2);
+
+            monthlyData[monthIndex] = (itemNum.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));
+        if (monthlyData[i] === null) {
+            // 如果选择的年份是2024年，且月份是3月或之后，或者年份晚于2024年，则使用默认值100
+            monthlyData[i] = (selectedYear >= 2024 && (i >= 2 || selectedYear > 2024)) ? itemNum.value : 0;
         }
+        // 转换为百分比形式
+        monthlyData[i] = parseInt(monthlyData[i]);
     }
-
-    // 如果有数据则使用实际数据，否则使用默认值
-    return monthlyData.map(value => value || 0);
+    console.log(monthlyData)
+    return monthlyData;
 }
-function handleEdit(){
-    disabled.value = !disabled.value
+
+function handleEdit() {
+    disabled.value = !disabled.value;
 }
 
-function handleCancel(){
-    disabled.value = !disabled.value
-    getList()
+function handleCancel() {
+    disabled.value = !disabled.value;
+    getList();
 }
 
-function handleSave(){
-    console.log(number.value)
-    addConversion({number:number.value}).then(res=>{
-        if(res.code ==200){
+function handleSave() {
+    console.log(number.value);
+    addConversion({ number: number.value }).then(res => {
+        if (res.code == 200) {
             proxy.$modal.msgSuccess("操作成功");
-            disabled.value = !disabled.value
-            getList()
+            disabled.value = !disabled.value;
+            getList();
         }
-    })
+    });
 }
-function updateChart(monthlyData, displayMonths) {
+
+function updateChart(monthlyData, displayMonths, selectedYear, currentYear){
     echartInstance.value.setOption({
         title: { text: '工艺图纸电子化率' },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
+                type: 'shadow'
+            },
+            formatter: function (params) {
+                const param = params[0];
+                const monthIndex = param.dataIndex;
+                const month = displayMonths[monthIndex];
+                let requiredDocumentsThisMonth = 0;
+                var uploadedProducts = 0;
+                if(selectedYear<2024){
+                    requiredDocumentsThisMonth = 0
+                }else if (rawData.value[(monthIndex-2)]) {
+                    
+                    requiredDocumentsThisMonth = rawData.value[(monthIndex-2)].number;
+                }else if  ((selectedYear > 2023 || (selectedYear === 2024 && monthIndex >= 2)) && !rawData.value[monthIndex]) {
+                    requiredDocumentsThisMonth = 100; // 2024年3月及以后默认值为100
+                } 
+
+                if(selectedYear < 2024 ){
+                    uploadedProducts =0
+                }else if(selectedYear === 2024 && monthIndex == 2){
+                    uploadedProducts = 78
+                }else if(selectedYear === 2024 && monthIndex == 3){
+                    uploadedProducts = 82
+                }else if(selectedYear === 2024 && monthIndex == 4){
+                    uploadedProducts = 85
+                }else if(selectedYear === 2024 && monthIndex == 5){
+                    uploadedProducts = 88
+                }else if(selectedYear === 2024 && monthIndex == 6){
+                    uploadedProducts = 90
+                }else if(selectedYear <= 2024 && monthIndex <= 1){
+                    uploadedProducts =0
+                }
+                else{
+                    uploadedProducts = procuctDrawing.value;
+                }
+
+                if(requiredDocumentsThisMonth>0){
+                   var rate = (uploadedProducts/requiredDocumentsThisMonth*100).toFixed(2)
+                }else{
+                    var rate =  0
                 }
+                const mes1 = conversion_mes.value[0].label;
+                const mes2 = conversion_mes.value[1].label  ;
+                console.log(mes1)
+                return `${month}:${mes1}${requiredDocumentsThisMonth}，${mes2}${uploadedProducts}，电子化率：${rate}%`;
             }
         },
         xAxis: {
             type: 'category',
-            data: displayMonths,
-            axisPointer: {
-                type: 'shadow'
-            }
+            data: displayMonths
         },
         yAxis: {
             type: 'value'
         },
         series: [{
-            name: '数量',
+            name: '电子化率',
             type: 'line',
-            data: displayMonths.map((month, index) => monthlyData[index] || 0), // 如果没有数据则显示0
-            label: {
-                show: true,
-                position: 'top',
-                formatter: function (param) {
-                    return (param.value) + "%";
-                }
-            }
+            data: monthlyData
         }]
     });
 }
-
 function initChart() {
-    echartInstance.value = echarts.init(echartDom.value);
+    echartInstance.value = markRaw(echarts.init(echartDom.value));
     updateChart([], months.value); // 使用空数据初始化图表
 }
 
@@ -140,16 +195,12 @@ function handleQuery() {
 }
 
 function handleYearChange(year) {
-    // 获取当前年份
     const currentYear = new Date().getFullYear();
-    // 如果选择的年份大于当前年份，则重置为当前年份
     if (parseInt(year) > currentYear) {
         queryParams.value.year = currentYear.toString();
     } else {
-        // 否则，更新 queryParams 的年份
         queryParams.value.year = year;
     }
-    // 根据新的年份获取数据
     getList();
 }
 
@@ -159,31 +210,34 @@ function resetQuery() {
 }
 
 function getList() {
+    // 解构 queryParams 和 currentMonthIndex 为局部变量
+    const { queryParams } = toRefs(data);
+    const currentMonthIndex = computed(() => new Date().getMonth());
 
-    listConversion(queryParams.value.year).then(res => {
+    // 获取当前选择的年份和当前年份
+    const selectedYear = parseInt(queryParams.value.year);
+    const currentYear = new Date().getFullYear();
+
+    listConversion(selectedYear).then(res => {
         rawData.value = res.data;
-        number.value = res.data[0].number
+        number.value = res.data[0].number;
         getProcuctDrawing().then(res => {
-            procuctDrawing.value = res.data
-            const selectedYear = parseInt(queryParams.value.year);
-            const currentYear = new Date().getFullYear();
-
+            procuctDrawing.value = res.data;
             // 处理图表数据
             const monthlyData = processChartData(rawData.value, selectedYear);
-
-            // 根据选择的年份确定要显示的月份
             const displayMonths = selectedYear === currentYear ?
                 months.value.slice(0, currentMonthIndex.value + 1) :
                 months.value;
 
-            // 更新图表
-            updateChart(monthlyData, displayMonths);
-        })
-
+            // 将selectedYear和currentYear传递给updateChart
+            updateChart(monthlyData, displayMonths, selectedYear, currentYear);
+        });
     });
 }
+
+
 onMounted(() => {
     initChart();
     getList();
 });
-</script>
+</script>