From 248a7bb07db2005da8e0d4e8cb99de751339a293 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Wed, 22 Feb 2023 16:18:44 +0800
Subject: [PATCH] 2023-2-22

---
 src/views/dashboard/components/AreaChat.vue   | 100 +++++++
 .../dashboard/components/DoughnutChart.vue    | 106 +++++++
 src/views/dashboard/components/Map.vue        | 271 +++++++++---------
 src/views/dashboard/index.vue                 |  47 ++-
 .../recruitment/component/addRecruit.vue      |  24 +-
 .../recruitment/component/addTemplateItem.vue |   2 +-
 .../component/importRecruitInfo.vue           |  29 +-
 src/views/recruitment/recruit.vue             |  67 +++--
 8 files changed, 448 insertions(+), 198 deletions(-)
 create mode 100644 src/views/dashboard/components/AreaChat.vue
 create mode 100644 src/views/dashboard/components/DoughnutChart.vue

diff --git a/src/views/dashboard/components/AreaChat.vue b/src/views/dashboard/components/AreaChat.vue
new file mode 100644
index 0000000..8aac652
--- /dev/null
+++ b/src/views/dashboard/components/AreaChat.vue
@@ -0,0 +1,100 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+import geoJson from "@/assets/china.json";
+require("echarts/theme/macarons"); // echarts theme
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "500px",
+    },
+    chartData: {
+      type: [Object,Array],
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions() {
+      let arr = []
+      for(let key in this.chartData){
+        arr.push(this.chartData[key])
+      }
+      // 绘制图表
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: arr.map(item => item.year)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name:"历年统招人数环比",
+            data: arr.map(item => item.total),
+            type: 'line',
+            areaStyle: {
+              color:"#8b9bd3"
+            },
+            lineStyle:{
+              color:"#8b9bd3"
+            }
+          }
+        ]
+      });
+    },
+  },
+  computed: {},
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/dashboard/components/DoughnutChart.vue b/src/views/dashboard/components/DoughnutChart.vue
new file mode 100644
index 0000000..3feec25
--- /dev/null
+++ b/src/views/dashboard/components/DoughnutChart.vue
@@ -0,0 +1,106 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+import geoJson from "@/assets/china.json";
+require("echarts/theme/macarons"); // echarts theme
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "500px",
+    },
+    chartData: {
+      type: [Object,Array],
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions(chartdata) {
+      // 绘制图表
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '3%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '统招生源占比',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.chartData.map(item => {
+              return {
+                value:item.rate,
+                name:item.province_name
+              }
+            })
+          }
+        ]
+      });
+    },
+  },
+  computed: {},
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/dashboard/components/Map.vue b/src/views/dashboard/components/Map.vue
index a40e4b6..44867cd 100644
--- a/src/views/dashboard/components/Map.vue
+++ b/src/views/dashboard/components/Map.vue
@@ -1,137 +1,136 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-
-</template>
-
-<script>
-  import echarts from 'echarts'
-  require('echarts/theme/macarons') // echarts theme
-  import resize from './mixins/resize'
-  import geoJson from '@/assets/china.json'
-
-  const animationDuration = 6000
-
-  export default {
-    mixins: [resize],
-    props: {
-      className: {
-        type: String,
-        default: 'chart'
-      },
-      width: {
-        type: String,
-        default: '100%'
-      },
-      height: {
-        type: String,
-        default: '500px'
-      },
-      chartData: {
-        type: Object
-      }
-    },
-    data() {
-      return {
-        chart: null,
-        statusArr: {
-          "1": "待投档",
-          "2": "录取中",
-          "3": "录取结束",
-          "4": "已邮寄通知书"
-        }
-
-      }
-    },
-    mounted() {
-
-      console.log(geoJson)
-      this.$nextTick(() => {
-        this.initChart()
-      })
-    },
-    watch: {
-      chartData: {
-        deep: true,
-        handler(val) {
-          this.setOptions(val)
-        }
-      }
-    },
-    beforeDestroy() {
-      if (!this.chart) {
-        return
-      }
-      this.chart.dispose()
-      this.chart = null
-    },
-    methods: {
-
-      initChart() {
-        this.chart = echarts.init(this.$el, 'macarons');
-        this.setOptions(this.chartData);
-      },
-      setOptions(chartdata) {
-        echarts.registerMap('CHINA', geoJson);
-        let statusArr=this.statusArr;
-        // 绘制图表
-        this.chart.setOption({
-          backgroundColor: "#c3e2ee",
-          zoom: 5,
-
-          tooltip: {
-            trigger: "item",
-            formatter: function(val) {
-              return "省份:"+val.name+"<br>当前进度: " + statusArr[val.data.itemStyle.status]; //
-            },
-          },
-          toolbox: {
-            show: true,
-            orient: "vertical",
-            left: "right",
-            top: "center",
-            feature: {
-              dataView: {
-                readOnly: false
-              },
-              restore: {},
-              saveAsImage: {},
-            },
-          },
-          series: [{
-            type: "map",
-            map: "CHINA", //这里需要注意呀,
-            // 是否开启鼠标缩放和平移漫游 默认不开启
-            itemStyle: {
-              normal: {
-                areaColor: "#e0e0e0",
-                borderColor: "#fff",
-                label: {
-                  show: false,
-                  color: "blue",
-                },
-              },
-              emphasis: {
-                areaColor: "#fd5d02",
-                label: {
-                  show: true,
-                  color: "white",
-                },
-              },
-            },
-            roam: true,
-            top: 70,
-            label: {
-              show: true, // 是否显示对应地名
-            },
-            data: chartdata
-          }],
-        });
-        this.chart.on("click", function(params) { //地图添加点击事件，当点击区域块的时候，params.name能够取到区域的名称：云南，北京...
-          alert(params.data.code);
-          console.log(JSON.stringify(params));
-        });
-
-      }
-    }
-  }
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+import geoJson from "@/assets/china.json";
+
+const animationDuration = 6000;
+
+export default {
+  //mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "500px",
+    },
+    chartData: {
+      type: [Object,Array],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      statusArr:new Map([
+        [1,"待投档"],
+        [2,"录取中"],
+        [3,"录取结束"],
+        [4,"已邮寄通知书"]
+      ])
+    };
+  },
+  mounted() {
+    //console.log(geoJson);
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions(chartdata) {
+      echarts.registerMap("CHINA", geoJson);
+      // 绘制图表
+      this.chart.setOption({
+        backgroundColor: "#c3e2ee",
+        zoom: 5,
+
+        tooltip: {
+          trigger: "item",
+          formatter:  (val) => {
+            return (
+              `省份：${val.name} <br>当前进度：${ this.statusArr.get(val.data?.itemStyle?.status) || "无" }`
+            ); //
+          },
+        },
+        toolbox: {
+          show: true,
+          orient: "vertical",
+          left: "right",
+          top: "center",
+          feature: {
+            dataView: {
+              readOnly: false,
+            },
+            restore: {},
+            saveAsImage: {},
+          },
+        },
+        series: [
+          {
+            type: "map",
+            map: "CHINA", //这里需要注意呀,
+            // 是否开启鼠标缩放和平移漫游 默认不开启
+            itemStyle: {
+              normal: {
+                areaColor: "#e0e0e0",
+                borderColor: "#fff",
+                label: {
+                  show: false,
+                  color: "blue",
+                },
+              },
+              emphasis: {
+                areaColor: "#fd5d02",
+                label: {
+                  show: true,
+                  color: "white",
+                },
+              },
+            },
+            roam: true,
+            top: 70,
+            label: {
+              show: true, // 是否显示对应地名
+            },
+            data: chartdata,
+          },
+        ],
+      });
+      this.chart.on("click", function (params) {
+        //地图添加点击事件，当点击区域块的时候，params.name能够取到区域的名称：云南，北京...
+        alert(params.data.code);
+        console.log(JSON.stringify(params));
+      });
+    },
+  },
+};
 </script>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ed6ffbc..c7fb9bf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,51 +1,46 @@
 <template>
   <div>
 
-    <div class="statistics">
-
-
-    </div>
-
     <el-row :gutter="20">
       <el-col :span="12">
         <Map :chartData="chartData" />
       </el-col>
       <el-col :span="12">
-        <div class="grid-content bg-purple"></div>
+        <DoughnutChart :chart-data="homeData.rate_list"></DoughnutChart>
       </el-col>
     </el-row>
 
-    <div class="chart">
-
-    </div>
+    <el-row>
+      <el-col :span="24">
+        <AreaChat :chart-data="homeData.year_list"></AreaChat>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-  import echarts from "echarts"
-  import PanelGroup from './components/PanelGroup'
   import Map from './components/Map'
+  import DoughnutChart from "./components/DoughnutChart.vue";
+  import AreaChat from "./components/AreaChat.vue";
   import {
     getChartsHome
-  } from "../../api/dashboard.js"
+  } from "@/api/dashboard.js"
 
   import {
     index as indexprogress
-  } from "../../api/unifiedRecruitment/progress"
+  } from "@/api/unifiedRecruitment/progress"
   export default {
     components: {
-      PanelGroup,
-      Map
+      DoughnutChart,
+      Map,
+      AreaChat
     },
     data() {
       return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
-        list: {},
-        customerArr: [],
-        orderArr: [],
+        homeData:{
+          rate_list:[],
+          year_list:[]
+        },
         chartData: {},
         colorArr: {
           "1": "#dbebf8",
@@ -61,6 +56,10 @@
     methods: {
       async loadData() {
         this.loadPress()
+        this.loadHomeData()
+      },
+      loadHomeData(){
+        getChartsHome().then(res => this.homeData = res)
       },
       loadPress() {
         indexprogress({
@@ -72,7 +71,7 @@
             arr.push({
               name: mod.province.name,
               itemStyle: {
-                areaColor: this.colorArr[mod.status_id],
+                areaColor: this.colorArr[mod.status_id],
                 status:mod.status_id
               }
             })
@@ -203,4 +202,4 @@
 
 
   }
-</style>
+</style>
diff --git a/src/views/recruitment/component/addRecruit.vue b/src/views/recruitment/component/addRecruit.vue
index 59d3053..9e4bc5f 100644
--- a/src/views/recruitment/component/addRecruit.vue
+++ b/src/views/recruitment/component/addRecruit.vue
@@ -1,4 +1,5 @@
 <script>
+import { index as filedIndex} from "@/api/unifiedRecruitment/templateFiled"
 import { show as templateShow } from "@/api/unifiedRecruitment/template";
 import { show, save } from "@/api/unifiedRecruitment/recruit";
 
@@ -6,7 +7,7 @@ export default {
   render(h) {
     return (
       <Modal
-        title={this.type === "add" ? "新增统招生" : "编辑统招生"}
+        title={this.type === "add" ? "新增信息" : "编辑信息"}
         width="54"
         value={this.isShow}
         on={{
@@ -85,7 +86,7 @@ export default {
                 v-model={this.originalForm.province_id}
                 placeholder="请选择省份"
               >
-                {this.province_ids.map((item) => {
+                {this.provincesFormat.map((item) => {
                   return (
                     <el-option
                       value={item.id}
@@ -248,14 +249,17 @@ export default {
   },
   methods: {
     async getTemplate() {
-      const res = await templateShow(
+      const res = await filedIndex(
         {
-          year: this.originalForm.year,
+          template_item_id: this.originalForm.template_item_id,
+          template_id:this.originalForm.template_id,
+          page:1,
+          page_size:999
         },
         true
       );
-      if (res?.fileds) {
-        res?.fileds.forEach((item) => {
+      if (res?.data) {
+        res?.data.forEach((item) => {
           Object.defineProperty(this.form, item.en, {
             value: "",
             writable: true,
@@ -277,10 +281,16 @@ export default {
         });
       }
 
-      this.formInfo = res?.fileds ?? [];
+      this.formInfo = res?.data ?? [];
+
       this.$forceUpdate();
     },
   },
+  computed:{
+    provincesFormat(){
+      return this.$route.meta.params.type == 2 ? this.province_ids.filter(item => item.name == '江苏') : this.province_ids
+    }
+  },
   watch: {
     async isShow(newVal) {
       if (newVal) {
diff --git a/src/views/recruitment/component/addTemplateItem.vue b/src/views/recruitment/component/addTemplateItem.vue
index 713e743..bc9fd7f 100644
--- a/src/views/recruitment/component/addTemplateItem.vue
+++ b/src/views/recruitment/component/addTemplateItem.vue
@@ -42,7 +42,7 @@
             :transfer="true"
             confirm
             title="确认要删除吗"
-            @on-ok="destroy">
+            @on-ok="destroy"
             <Button type="error" ghost>删除</Button>
           </Poptip>
         </template>
diff --git a/src/views/recruitment/component/importRecruitInfo.vue b/src/views/recruitment/component/importRecruitInfo.vue
index ee410bb..5b8990f 100644
--- a/src/views/recruitment/component/importRecruitInfo.vue
+++ b/src/views/recruitment/component/importRecruitInfo.vue
@@ -21,11 +21,17 @@
           </el-select>
         </div>
 
-        <div class="select__item">
+        <div class="select__item" v-if="$route.meta.params.type == 1">
           <span></span>
           <span>更新统招进度为录取结束</span>
           <el-checkbox v-model="select.isEnd" :true-label="1" :false-label="0"></el-checkbox>
         </div>
+
+        <div class="select__item">
+          <span></span>
+          <span>更新邮寄信息</span>
+          <el-checkbox v-model="select.isEnd" :true-label="1" :false-label="0"></el-checkbox>
+        </div>
       </div>
 
       <div class="upload">
@@ -66,6 +72,7 @@ import {
 } from '@/utils/auth'
 import {show as templateShow} from "@/api/unifiedRecruitment/template";
 import { imports } from '@/api/unifiedRecruitment/recruit'
+import {index as filedIndex} from "@/api/unifiedRecruitment/templateFiled";
 export default {
   props: {
     isShow: {
@@ -130,23 +137,21 @@ export default {
     },
 
     async getTemplate() {
-      const res = await templateShow(
-        {
-          year: this.select.year,
-          type: this.$route.meta.params?.type,
-        },
-        true
-      );
-      this.select.template_id = res.id;
-      this.newTable =
-        res?.fileds?.map((item) => {
+      const res = await filedIndex({
+        template_item_id:this.select.template_item_id,
+        template_id:this.select.template_id,
+        page:1,
+        page_size:999
+      });
+      let temp =
+        res?.data?.map((item) => {
           return {
             prop: item.en,
             label: item.name,
             width: 140,
           };
         }) ?? [];
-      this.table = [...this.originalTable, ...this.newTable];
+      this.table = [...this.originalTable, ...temp];
     },
 
     submit(){
diff --git a/src/views/recruitment/recruit.vue b/src/views/recruitment/recruit.vue
index b2536c5..13298d4 100644
--- a/src/views/recruitment/recruit.vue
+++ b/src/views/recruitment/recruit.vue
@@ -24,6 +24,7 @@
                 ></el-date-picker>
 
                 <el-select
+                  ref="templateSelect"
                   v-model="select.template_item_id"
                   size="small"
                   placeholder="模板类型"
@@ -57,8 +58,8 @@
               <Button
                 type="primary"
                 @click="
-                  ($refs['addRecruit'].form.template_id = select.template_id),
-                    ($refs['addRecruit'].form.template_item_id =
+                  ($refs['addRecruit'].originalForm.template_id = select.template_id),
+                    ($refs['addRecruit'].originalForm.template_item_id =
                       select.template_item_id),
                     ($refs['addRecruit'].type = 'add'),
                     (isShowAdd = true)
@@ -90,11 +91,12 @@
               <Button
                 type="primary"
                 @click="
+                isShowTip = true,
                 ($refs['importRecruitInfo'].select.template_item_id = select.template_item_id),
                   ($refs['importRecruitInfo'].select.year = select.year),
                     (isShowImportRecruitInfo = true)
                 "
-                >导入录取信息</Button
+                >导入信息</Button
               >
             </template>
           </header-content>
@@ -134,6 +136,17 @@
       :is-show.sync="isShowImportRecruitInfo"
       @refresh="getList"
     ></importRecruitInfo>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="isShowTip"
+      width="30%"
+      center>
+      <span>当前选择导入的模板为：{{ getTemplateItemName() }}</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="isShowTip = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -141,6 +154,7 @@
 import { index, destroy, exports } from "@/api/unifiedRecruitment/recruit";
 import { authMixin } from "@/mixin/authMixin";
 import { index as provinceIndex } from "@/api/manage/province";
+import { index as filedIndex } from "@/api/unifiedRecruitment/templateFiled"
 import {
   show as templateShow,
   index as templateIndex,
@@ -161,6 +175,8 @@ export default {
   },
   data() {
     return {
+      isShowTip:false,
+      tipTemplate:"",
       isShowImportRecruitInfo: false,
       isShowAdd: false,
       provinces: [],
@@ -219,6 +235,9 @@ export default {
     index,
     destroy,
 
+    getTemplateItemName(){
+      return this.$refs['templateSelect']?.selected?.label
+    },
     async getTemplateItemDetail() {
       if (!this.select.template_item_id) {
         this.$message({
@@ -227,20 +246,14 @@ export default {
         });
         return;
       }
-      // const res = await templateItemShow({
-      //   id: this.select.template_item_id,
-      // });
-
-      const res = await templateShow(
-        {
-          year: this.select.year,
-          type: this.$route.meta.params?.type,
-        },
-        false
-      );
-      this.select.template_id = res.id;
+      const res = await filedIndex({
+        template_item_id:this.select.template_item_id,
+        template_id:this.select.template_id,
+        page:1,
+        page_size:999
+      });
       let temp =
-        res?.fileds?.map((item) => {
+        res?.data?.map((item) => {
           return {
             prop: item.en,
             label: item.name,
@@ -248,6 +261,24 @@ export default {
           };
         }) ?? [];
       this.table = [...this.originalTable, ...temp];
+
+      // const res = await templateShow(
+      //   {
+      //     year: this.select.year,
+      //     type: this.$route.meta.params?.type,
+      //   },
+      //   false
+      // );
+      // this.select.template_id = res.id;
+      // let temp =
+      //   res?.fileds?.map((item) => {
+      //     return {
+      //       prop: item.en,
+      //       label: item.name,
+      //       width: 140,
+      //     };
+      //   }) ?? [];
+      // this.table = [...this.originalTable, ...temp];
     },
     async getList() {
       this.$refs["xyTable"].loading = true;
@@ -308,7 +339,7 @@ export default {
 
     async search() {
       //await this.getTemplate();
-      //await this.getTemplateItemDetail();
+      await this.getTemplateItemDetail();
       await this.getList();
     },
 
@@ -330,7 +361,7 @@ export default {
     await this.getTemplateItemDetail();
     await this.getProvinces();
     await this.getList();
-  },
+  }
 };
 </script>