村民议事

packages/3.0.0/AppVillagerDiscussion/components/Detail.vue

@@ -5,15 +5,29 @@
       </ai-title>
     </template>
     <template slot="content">
-      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <AiSidebar :tabTitle="tabList" v-model="currIndex" @change="onChange"></AiSidebar>
       <ai-card title="议题信息" v-show="currIndex === 0">
         <template #content>
           <ai-wrapper>
-            <ai-info-item label="主题" value="主题"></ai-info-item>
+            <ai-info-item label="主题" :value="info.title" isLine></ai-info-item>
+            <ai-info-item label="发布地区" :value="info.areaName" isLine></ai-info-item>
+            <ai-info-item label="议事截止时间" :value="info.discussDeadline"></ai-info-item>
+            <ai-info-item label="公示截止时间" :value="info.publicityDeadline"></ai-info-item>
+            <ai-info-item label="议事类型" :value="dict.getLabel('discussType', info.type)" isLine></ai-info-item>
+            <ai-info-item label="是否匿名投票" v-if="info.type === '1'" :value="info.anonymous === '1' ? '是' : '否'"></ai-info-item>
+            <ai-info-item label="投票方式" v-if="info.type === '1'" :value="info.voteType === '0' ? '单选' : '多选'"></ai-info-item>
+            <ai-info-item label="图片">
+              <ai-uploader
+                :instance="instance"
+                disabled
+                v-model="info.images"
+                :limit="9">
+              </ai-uploader>
+            </ai-info-item>
           </ai-wrapper>
         </template>
       </ai-card>
-      <ai-card title="意见征集" v-if="false" v-show="currIndex === 1">
+      <ai-card title="意见征集" v-if="info.type === '0'" v-show="currIndex === 1">
         <template #right>
           <el-button type="primary" size="small" @click="isShowAdd = true">发表意见</el-button>
         </template>
@@ -31,14 +45,14 @@
           </ai-table>
         </template>
       </ai-card>
-      <ai-card title="投票统计" v-show="currIndex === 1">
+      <ai-card title="投票统计" v-show="currIndex === 1 && info.type === '1'">
         <template #content>
-          <div id="chart"></div>
+          <div class="chart" style="wdith: 800px; height: 240px; margin: 0 auto;"></div>
           <ai-table
             class="detail-table__table"
             :border="true"
             :tableData="tableData"
-            :col-configs="colConfigs"
+            :col-configs="voteColConfigs"
             :total="total"
             :current.sync="search.current"
             :size.sync="search.size"
@@ -65,6 +79,7 @@
 </template>
 
 <script>
+  import * as echarts from 'echarts'
   export default {
     name: 'Detail',
 
@@ -90,111 +105,92 @@
         currIndex: 0,
         tableData: [],
         colConfigs: [
-          {slot: 'userinfo'},
-          {prop: 'addWay', label: '客户来源', align: 'center', formart: v => this.dict.getLabel('wxCustomerAddWay', v)},
-          {prop: 'createTime', label: '添加时间', align: 'center'}
+          {prop: 'content', label: '发言内容', align: 'center'},
+          {prop: 'suport', label: '获赞次数', align: 'center'},
+          {prop: 'createTime', label: '发言时间', align: 'center'},
+          {prop: 'createUserName', label: '发言人', align: 'center'},
+          {prop: 'createUserId', label: '发言身份', align: 'center', formart: v => v === this.info.createUserId ? '话事人' : '村民'}
         ],
+        voteColConfigs: [
+          {prop: 'createTime', label: '投票时间', align: 'center'},
+          {prop: 'userName', label: '投票人', align: 'center'},
+          {prop: 'item', label: '投票选项', align: 'center'}
+        ],
+        statistic: {},
         tabList: ['议题信息', '意见征集']
       }
     },
 
     created () {
-      if (this.params && this.params.id) {
-        this.id = this.params.id
-        this.getInfo(this.params.id)
-      }
+      this.getInfo(this.params.id)
     },
 
     methods: {
+      onChange (e) {
+        if (e === 1 && this.info.type === '1') {
+
+          this.$nextTick(() => {
+            this.initChart(this.statistic)
+          })
+        }
+      },
+
       getInfo (id) {
-        this.instance.post(`/app/appeveryvillagecode/queryDetailById?id=${id}`).then(res => {
+        this.instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
-            // this.form = res.data
+            this.info = res.data
+            this.info.images = res.data.images ? JSON.parse(res.data.images) : []
+            this.getList(this.params.id, res.data.type)
+
+            if (res.data.type === '1') {
+              this.statistic = res.data.statistic
+              this.tabList = ['议题信息', '投票表决']
+            }
+          }
+        })
+      },
+
+      getList(id, type) {
+        this.instance.post(`${type === '0' ? '/app/appvillagediscussmessage/list' : '/app/appvillagediscussvote/list'}`, null, {
+          params: {
+            discussId: id,
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
           }
         })
       },
 
       initChart(data) {
-        const y = data.map(v => this.$dict.getLabel('fpRiskType', v.risk_type) || '其他')
-        const v = data.map(v => v.c)
+        this.chart = echarts.init(document.querySelector('.chart'))
         const option = {
           tooltip: {},
           color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
-          grid: {
-            top: '4%',
-            left: '4%',
-            right: '6%',
-            bottom: '0%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'value',
-            splitLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                type: 'solid',
-                color: '#f5f5f5'
-              }
-            },
-            axisTick: {
-              length: 1,
-              show: true
-            },
-            axisLabel: {
-              align: 'center',
-              padding: [2, 0, 0, 0],
-              interval: 0,
-              fontSize: 14,
-              color: '#999'
-            },
-            boundaryGap: true,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                type: 'solid',
-                color: '#aaa'
-              }
-            },
-          },
-          yAxis: {
-            type: 'category',
-            data: y,
-            boundaryGap: true,
-            axisTick: {
-              length: 0,
-              show: false
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: ['#e9e9e9'],
-                width: 1,
-                type: 'solid'
-              }
-            },
-            nameTextStyle: {
-              color: '#999',
-              align: 'left'
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                type: 'solid',
-                color: '#aaa'
-              }
-            },
-            axisLabel: {
-              color: '#999'
-            }
+          legend: {
+            right: '5%',
+            top: 'center',
+            orient: 'vertical'
           },
           series: [
             {
-              name: '2011',
-              type: 'bar',
-              data: v
+              type: 'pie',
+              radius: '50%',
+              data: Object.keys(data).map(v => {
+                return {
+                  value: data[v],
+                  name: v
+                }
+              }),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
             }
           ]
         }
@@ -219,10 +215,6 @@
         })
       },
 
-      getList () {
-
-      },
-
       onClose () {
 
       },