投票实况

2022-10-21 17:22:38 +08:00
parent a83b4746f9
commit 0d3d163aec
4 changed files with 172 additions and 11 deletions
--- a/project/pingchang/apps/AppGeneralElection/AppGeneralElection.vue
+++ b/project/pingchang/apps/AppGeneralElection/AppGeneralElection.vue
@@ -9,6 +9,7 @@
 <script>
 import electionList from "./components/electionList.vue";
 import electionAdd from "./components/electionAdd.vue";
+import Statistics from "./components/Statistics.vue";

 export default {
  name: "AppGeneralElection",
@@ -17,7 +18,7 @@ export default {
    instance: Function,
    dict: Object,
  },
-  components: {electionAdd, electionList},
+  components: {electionAdd, electionList,Statistics},
  data() {
    return {
      component: "electionList",
@@ -32,6 +33,11 @@ export default {
        this.params = data.params;
      }

+      if (data.type === "Statistics") {
+        this.component = "Statistics";
+        this.params = data.params;
+      }
+
      if (data.type === "electionList") {
        this.component = "electionList";
        this.params = data.params;
@@ -44,9 +50,6 @@ export default {
      }
    },
  },
-  created() {
-    // this.dict.load("portalUserStatus", "enterpriseStatus", "userEnterpriseStatus","enterpriseType")
-  }
 }
 </script>

--- a/project/pingchang/apps/AppGeneralElection/components/Statistics.vue
+++ b/project/pingchang/apps/AppGeneralElection/components/Statistics.vue
@@ -0,0 +1,152 @@
+<template>
+  <section>
+    <ai-detail class="Statistics">
+      <template slot="title">
+        <ai-title title="投票实况" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template slot="content">
+        <ai-title title="本届任职" isShowBottomBorder></ai-title>
+        <div class="basicinfo-box">
+          <div><span>已投人数：</span><span>{{ data.alreadyCount || 0 }}</span></div>
+          <div><span>未投人数：</span><span>{{ data.notYetCount || 0 }}</span></div>
+          <div><span>日期：</span><span>{{ data.dateTime || '' }}</span></div>
+        </div>
+
+        <ai-title title="候选人选票统计" isShowBottomBorder></ai-title>
+
+        <div class="echarts-box">
+          <div id="echarts-bar"></div>
+          <!-- <ai-empty class="empty"></ai-empty> -->
+        </div>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: "Statistics",
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+  },
+  data() {
+    return {
+      data: {},
+      myChart: null,
+    }
+  },
+  created() {
+    this.getStatistics()
+  },
+  mounted() {
+    this.getStaBar()
+  },
+  methods: {
+    cancel (isRefresh) {
+      this.$emit('change', {
+        type: 'electionList',
+        isRefresh: !!isRefresh
+      })
+    },
+    getStatistics() {
+      this.instance.post(`/app/appgeneralelectioninfo/statistics?id=${this.params.id}`).then(res=> {
+        if(res?.data) {
+          this.data = res.data
+          this.statistics = res.data.statistics
+          let xData = res.data.statistics.map(e=> e.candidate_user_name)
+          let yData1 = res.data.statistics.map(e=> e.c1)
+          let yData2 = res.data.statistics.map(e=> e.c2)
+          let yData3 = res.data.statistics.map(e=> e.c3)
+          this.getStaBar(xData,yData1,yData2,yData3)
+        }
+      })
+    },
+    getStaBar(xData,yData1,yData2,yData3) {
+      let chartDom = document.getElementById('echarts-bar')
+      this.myChart = echarts.init(chartDom);
+      this.myChart.setOption({
+        dataZoom: [
+          {
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter",
+          },
+        ],
+        legend: {
+          data: ['支持', '反对', '弃票']
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+        },
+        yAxis: {
+          type: 'value',
+          alignTicks: true,
+        },
+        series: [    // 支持、反对、弃票
+          {
+            name: '支持',
+            data: yData1,
+            type: 'bar',
+            
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            barWidth: 22,
+            barGap: '20%',
+          },
+          {
+            name: '反对',
+            data: yData2,
+            type: 'bar',
+            
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            barWidth: 22,
+            barGap: '20%',
+          },
+          {
+            name: '弃票',
+            data: yData2,
+            type: 'bar',
+            
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            barWidth: 22,
+            barGap: '20%',
+          }
+        ]
+      })
+    }
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.Statistics {
+  .basicinfo-box {
+    display: flex;
+    margin: 20px 0;
+    div {
+      flex: 1;
+    }
+  }
+  .echarts-box {
+    // width: 100%;
+
+    #echarts-bar {
+      width: 1200px;
+      height: 400px;
+    }
+  }
+}
+</style>
--- a/project/pingchang/apps/AppGeneralElection/components/electionAdd.vue
+++ b/project/pingchang/apps/AppGeneralElection/components/electionAdd.vue
@@ -1,6 +1,6 @@
 <template>
  <section class="electionAdd">
-    <ai-detail class="add" v-show="id && !isEdit">
+    <ai-detail v-show="id && !isEdit">
      <template slot="title">
        <ai-title title="换届选举详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
--- a/project/pingchang/apps/AppGeneralElection/components/electionList.vue
+++ b/project/pingchang/apps/AppGeneralElection/components/electionList.vue
@@ -5,7 +5,7 @@
      <template #content>
        <ai-search-bar>
          <template #left>
-            <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('', false)" >添加</el-button>
+            <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')" >添加</el-button>
            <ai-select v-model="search.status" @change=";(page.current = 1), getList()" placeholder="请选择状态" :selectList="dict.getDict('electionStatus')"></ai-select>
          </template>
          <template #right>
@@ -18,9 +18,9 @@
          <el-table-column slot="options" label="操作" fixed="right" align="center">
            <template slot-scope="{ row }">
              <!-- <el-button v-show="row.status==0" type="text" @click.native="toAdd(row.id, true)">编辑</el-button> -->
-              <el-button type="text" @click.native="toAdd(row.id, false)">详情</el-button>
+              <el-button type="text" @click.native="toAdd(row.id)">详情</el-button>
              <el-button type="text" :disabled="row.status==2" @click.native="startEnd(row.id, false)">结束</el-button>
-              <el-button type="text" @click.native="toStatistics">统计</el-button>
+              <el-button type="text" @click.native="toStatistics(row.id)">统计</el-button>
              <el-button type="text" @click.native="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
@@ -87,7 +87,6 @@ export default {
        type: 'electionAdd',
        params: {
          id: id || '',
-          isEdit: flag
        }
      })
    },
@@ -108,7 +107,7 @@ export default {
      }
      this.getList()
    },
-    // 开始结束
+    // 结束
    startEnd(id, status) {
      this.$confirm('投票正在进行中，确定要提前结束吗？').then(() => {
        this.instance.post(`/app/appgeneralelectioninfo/start-end?id=${id}&start=${status}`).then(res=>{
@@ -120,7 +119,14 @@ export default {
      })
    },
    // 统计
-    toStatistics() {},
+    toStatistics(id) {
+      this.$emit('change', {
+        type: 'Statistics',
+        params: {
+          id: id || '',
+        }
+      })
+    },
  }
 }
 </script>