updata

src/views/message/MessageAnalyse.vue

@@ -74,33 +74,55 @@ a {
         font-weight: 600;
     }
 }
+// 新
+.item{
+  font-size:14px;
+  margin-bottom:20px;
+  .item-title{
+    margin-bottom:10px;
+    color:#606266;
+    .title-num{
+      display: inline-block;
+      width:60px;
+    }
+    .title-type{
+      margin-left:50px;
+    }
+  }
+  .item-content{
+    margin-left:60px;
+    display:flex;
+    .el-table,div{
+      flex:1;
+    }
+  }
+}
 </style>
 <template>
   <section>
     <p><span>信息管理></span>问卷统计</p>
     <div class="content">
-      <div>
-        <p>第1题<span>姓名</span><span>[填空题]</span></p>
-        <div>张三、李四、王五</div>
-      </div>
-      <div>
-        <p>第2题<span>你喜欢的期刊是？</span><span>[多选题]</span></p>
-        <div>
-          <el-row>
-            <el-col :span="14">
-              <el-table>
-                <el-table-column prop="realname" label="选项1"> </el-table-column>
-                <el-table-column prop="realname" label="次数"> </el-table-column>
-                <el-table-column prop="realname" label="比例"> </el-table-column>
-              </el-table>
-            </el-col>
-            <el-col :span="10">
-              一个柱状图、一个饼图
-            </el-col>
-          </el-row>
-          
+      <div class='item' v-for='(item,index) in results' :key='index'>
+        <div class='item-title'>
+          <span class='title-num'>第{{index+1}}题</span>
+          <span class='title-header'>{{item.header}}</span>
+          <span class='title-type'>{{item.type|getType}}</span>
+        </div>
+        <div class='item-content' v-if='item.type=="input"'>{{item.content}}</div>
+        <div class='item-content' v-if='item.type=="radio"'>
+          <el-table :data="item.content">
+            <el-table-column prop="name" label="选项"> </el-table-column>
+            <el-table-column prop="count" label="次数"> </el-table-column>
+            <el-table-column prop="sale" label="比例"> </el-table-column>
+          </el-table>
+          <el-button v-show='!item.echartShow' type='primary' style='height:40px;margin-left:10px;' @click='item.echartShow = true'>查看图表</el-button>
+          <div v-show='item.echartShow'>查看柱状图
+            <div :ref='index' style="width:100%;height:250px;"></div>
+          </div>
+          <!-- <div>查看饼图</div> -->
         </div>
       </div>
+      
     </div>
   </section>
 </template>
@@ -113,286 +135,32 @@ export default {
   data() {
     return {
     //   checked: [],
-      cur_message_id:null,
-      cur_post_type:null,
-      postResult:{},
-      analyseDataList:[],
-      title: "",
-      widgetList: [],
-      form: { name: "", page: 1, page_size: 20 },
-      form1: {},
-      form2: {
-      },
-      total: 1,
-      list: [{ name: "2333" }],
-      loading: false,
-      input: "",
-      dialogVisible: false,
-      dialogVisible1: false,
-      dialogVisible2: false,
-      dialogVisible3:false,
-      dialogTitle: "",
-      dialogTitle2:"",
-      dialogTitle3:"",
-      defaultProps: {},
-      data: [],
-      templateList: [],
-      userList: [],
-      checkList: [],
-      rules: {
-        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
-      },
-      props: { multiple: true },
-      options: [
-        {
-          value: 1,
-          label: "东南",
-          children: [
-            {
-              value: 2,
-              label: "上海",
-              children: [
-                { value: 3, label: "普陀" },
-                { value: 4, label: "黄埔" },
-                { value: 5, label: "徐汇" },
-              ],
-            },
-            {
-              value: 7,
-              label: "江苏",
-              children: [
-                { value: 8, label: "南京" },
-                { value: 9, label: "苏州" },
-                { value: 10, label: "无锡" },
-              ],
-            },
-            {
-              value: 12,
-              label: "浙江",
-              children: [
-                { value: 13, label: "杭州" },
-                { value: 14, label: "宁波" },
-                { value: 15, label: "嘉兴" },
-              ],
-            },
-          ],
-        },
-        {
-          value: 17,
-          label: "西北",
-          children: [
-            {
-              value: 18,
-              label: "陕西",
-              children: [
-                { value: 19, label: "西安" },
-                { value: 20, label: "延安" },
-              ],
-            },
-            {
-              value: 21,
-              label: "新疆维吾尔族自治区",
-              children: [
-                { value: 22, label: "乌鲁木齐" },
-                { value: 23, label: "克拉玛依" },
-              ],
-            },
-          ],
-        },
+      results:[
+        {header:'请输入您的姓名',content:"张东升 李来喜",type:'input'},
+        {header:'标题222',type:'radio',echartShow:false,content:[
+            {name:'选项1',count:'1',sale:'25%'},
+            {name:'选项2',count:'1',sale:'25%'},
+            {name:'选项3',count:'2',sale:'50%'}
+        ],}
       ],
+      
     };
   },
+  filters:{
+    getType(val){
+      if(val=='input' | val=='textara' ){
+        return '[填空题]'
+      }else if(val== 'radio'){
+        return '[单选题]'
+      }else if(val == 'checkbox'){
+        return '[多选题]'
+      }
+    }
+  },
   computed() {},
   methods: {
-    downloadExcel(){
-      this.$api.downloadSurveyResult({message_id:this.cur_message_id,type:this.cur_post_type}).then((res)=>{
-          var elink = document.createElement('a');
-          let blob=new Blob([res.data], {type: 'application/vnd.ms-excel,charset=UTF-8'});
-          let objUrl=URL.createObjectURL(blob);
-          let file_name=decodeURIComponent(res.headers['content-disposition'].split('=')[1]);
-          console.log(file_name)
-          elink.download = file_name;
-          elink.style.display = 'none';                
-          elink.href = objUrl;
-          document.body.appendChild(elink);
-          elink.click();
-          document.body.removeChild(elink);      
-          this.download_loading = false;
-      })
-    },
-    showPostResult(row){
-        this.postResult = row.post_result
-        this.dialogTitle3 = "填报结果"
-        this.dialogVisible3 = true
-    },
-    analyseData(type,message_id) {
-      this.dialogTitle2 = "统计结果"
-      this.dialogVisible2 = true;
-      this.$api.getMessageSurveyAnalyse({type:type,message_id:message_id}).then((res)=>{
-          this.analyseDataList = res.data.data.list
-          this.cur_message_id = message_id
-          this.cur_post_type = type
-      })
-    },
-    handleSuccess(res, file) {
-      this.form2[res.data.type] = res.data.url;
-    },
-    change(i, label) {
-      this.form2[label] = i;
-    },
-    changeMul(i, label) {
-      this.form2[label] = i;
-    },
-    showSurvey(row) {
-        let _this = this;
-      this.title = row.name;
-      this.message_id = row.id;
-      this.$api.getMessageInfo({ id: row.id }).then((res) => {
-        if (res.data.code == 0) {
-          this.widgetList = res.data.data.widget;
-          this.widgetList.forEach((i) => {
-            if (i.type == "checkbox") {
-            //   _this.form2[i.label] = [] ;
-              _this.$set(_this.form2,i.label,[])
-            } 
-          });
-        console.log(this.form2)
-        //   debugger
-          this.dialogVisible1 = true;
-        }
-      });
-    },
-    upload(type) {
-      var file = document.getElementById(type).files;
-      var data = new FormData();
-      data.append("file", file[0]);
-      this.$api.uploadFile(data).then((res) => {
-        if (res.data.code == 0) {
-          this.$set(this.form1, type, res.data.data.url);
-          this.$set(this.form1, "filename", res.data.data.name);
-          this.$message({ message: "上传成功！", type: "success" });
-        } else {
-          this.$message.error(res.data.message);
-        }
-      });
-    },
-    handleChange(value) {
-      console.log(value);
-    },
-    search() {
-      let parm = this.form;
-      this.getData();
-    },
-    openDiag() {
-      this.form1 = {};
-      this.dialogVisible = true;
-      this.dialogTitle = "发送消息";
-    },
-    gopage(size) {
-      if (size) {
-        this.form.page_size = size;
-      }
-      this.form.page = this.$refs.pageButton.page;
-      this.getData();
-    },
-    getData() {
-      var parm = this.form;
-      this.loading = true;
-      this.$api.getAllTemplateList().then((res) => {
-        this.templateList = res.data.data;
-      });
-      this.$api.getAllSysUserList().then((res) => {
-        this.userList = res.data.data;
-      });
-      this.$api.getMessageList(parm).then((res) => {
-        this.list = res.data.data.list;
-        this.total = res.data.data.total;
-        this.loading = false;
-      });
-      this.$api.getMessageReceiverList().then((res) => {
-        this.options = res.data.data;
-      });
-    },
-    del(id) {
-      this.$confirm("确定删除吗", "提示", {
-        type: "warning",
-      }).then(() => {
-        this.$api.delMessageInfo({ id: id }).then((res) => {
-          this.$message({
-            message: "删除成功",
-            type: "success",
-          });
-          this.getData();
-        });
-      });
-    },
-    edit(row) {
-      this.form1 = row;
-      let receiver_ids = this.form1.receiver_id;
-      console.log(receiver_ids, 33333333333333);
-      if (typeof receiver_ids == "string") {
-        receiver_ids = JSON.parse(receiver_ids);
-      }
-      // receiver_ids.forEach((element,index) => {
-      //     receiver_ids[index] = parseInt(element)
-      // });
-      this.form1.receiver_id = receiver_ids;
-      this.dialogVisible = true;
-    },
-    saveResult() {
-      let result = JSON.stringify(this.form2);
-      this.$api
-        .saveSurveyResult({
-          message_id: this.message_id,
-          result: result,
-        })
-        .then((res) => {
-          if (res.data.code == 0) {
-            this.$message({
-              type: "success",
-              message: "保存成功!",
-            });
-          } else {
-            this.$message.error("保存失败!");
-          }
-          this.dialogVisible1 = false;
-        });
-    },
-    save() {
-      this.$refs["form1"].validate((valid) => {
-        if (valid) {
-          let parm = this.form1;
-          let id = this.form1.id;
-          parm.receiver_id = JSON.stringify(parm.receiver_id);
-          if (id) {
-            this.$api.editMessage(parm).then((res) => {
-              if (res.data.code == 0) {
-                this.$message({
-                  type: "success",
-                  message: "保存成功!",
-                });
-              } else {
-                this.$message.error("保存失败!");
-              }
-              this.getData();
-              this.dialogVisible = false;
-            });
-          } else {
-            this.$api.addMessage(parm).then((res) => {
-              if (res.data.code == 0) {
-                this.$message({
-                  type: "success",
-                  message: "保存成功!",
-                });
-              } else {
-                this.$message.error("保存失败!");
-              }
-              this.getData();
-              this.dialogVisible = false;
-            });
-          }
-        }
-      });
+    getEcharts(){
+      var myChart = this.$echarts.init(this.$refs.subject);
     },
   },
   created() {