修改

src/api/orderform/index.js

@@ -91,9 +91,9 @@ export function exportReportFormsPOST(data) {
 // 报表接口
 export function reportFormsGET(query) {
   return request({
-    url: '/xinrenli/order/reportForms',
+    url: `/xinrenli/order/reportForms?startTime=${query.startTime}&endTime=${query.endTime}`,
     method: 'get',
-    params: query
+    // params: query
   })
 }
 // 营销活动列表
@@ -135,4 +135,12 @@ export function couponlePUT(data) {
     method: 'put',
     data: data
   })
+}
+// 累计成交额
+export function accumulatedTransactionVolumeGET(query) {
+  return request({
+    url: `/xinrenli/order/accumulatedTransactionVolume?year=${query.year}`,
+    method: 'get',
+    // params: query
+  })
 }
\ No newline at end of file

src/views/orderform/components/index.vue

 <template>
   <div class="app-container">
-    <el-dialog :title='title' :visible.sync="dialogVisibl" width="30%" :before-close="dialog" center>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisibl"
+      width="30%"
+      :before-close="dialog"
+      center
+    >
       <div v-if="control != 4">
         <!-- 图片说明 -->
-        <el-image v-if="control == '1'" style="width:100%;" :src="idt" >
+        <el-image v-if="control == '1'" style="width: 100%" :src="idt">
         </el-image>
         <!-- 视频说明 -->
-        <comvideo  v-if="control == '2'" :videoUrl="idt" :videoCover="videoCover"></comvideo>
+        <comvideo
+          v-if="control == '2'"
+          :videoUrl="idt"
+          :videoCover="videoCover"
+        ></comvideo>
         <!-- 语音说明 -->
         <audio v-if="control == '3'" controls ref="audio" class="aud">
           <source :src="idt" />
         </audio>
       </div>
       <!-- 沟通后金额 -->
-      <div v-if="control == '4' || control == '9' ">
+      <div v-if="control == '4' || control == '9'">
         <el-form :model="form">
           <el-form-item label="沟通后金额">
-            <el-input class="delInput" type='number' v-model="form.money" placeholder="请输入沟通后金额"></el-input>
+            <el-input
+              class="delInput"
+              type="number"
+              v-model="form.money"
+              placeholder="请输入沟通后金额"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="管理员备注" v-if="control == '4'">
+            <el-input
+              type="textarea"
+              :rows="2"
+              placeholder="请输入管理员备注"
+              v-model="form.adminRemark"
+              maxlength="500"
+              show-word-limit
+              :autosize="{ minRows: 4}"
+            >
+            </el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -24,11 +51,19 @@
       <div v-if="control == '5'">
         <el-form :model="form">
           <el-form-item label="驳回理由">
-            <el-input v-model="form.name" type="textarea" placeholder="请输入驳回理由"></el-input>
+            <el-input
+              v-model="form.name"
+              type="textarea"
+              placeholder="请输入驳回理由"
+            ></el-input>
           </el-form-item>
         </el-form>
       </div>
-      <span v-if="control == '4' || control == '5' || control == '9' " slot="footer" class="dialog-footer">
+      <span
+        v-if="control == '4' || control == '5' || control == '9'"
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button type="primary" @click="clickDialog">确 定</el-button>
       </span>
     </el-dialog>
@@ -36,97 +71,104 @@
 </template>
 
 <script>
-import comvideo from './video.vue'
+import comvideo from "./video.vue";
 
 export default {
   name: "orderform",
   components: {
-    comvideo
+    comvideo,
   },
   props: {
     dialogVisibl: {
-      type: Boolean
+      type: Boolean,
     },
     control: {
-      type: String
+      type: String,
     },
     bindex: {
-      type: Array
+      type: Array,
     },
     idt: {
-      type: [String, Number]
+      type: [String, Number],
+    },
+    videoCover: {
+      type: [String, Number],
     },
-    videoCover:{
-      type: [String, Number]
-    }
   },
   data() {
     return {
-      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       // srcList: [
       //   'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
       //   'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
       // ],
       form: {
-        name: '',
-        money:''
+        name: "",
+        money: "",
       },
-      title: '',
-      id:''
+      title: "",
+      id: "",
     };
   },
   watch: {
     control(st, old) {
-      let self = this
+      let self = this;
 
-      if (st == '4') {
-        this.title = '生成支付订单'
+      if (st == "4") {
+        this.title = "生成支付订单";
         if (self.dialogVisibl) {
-          this.bindex.forEach(element => {
-               if(self.idt == element.id){
-                self.form.money = element.dataName
-                console.log(self.form.money,element.dataName,'element.dataName')
-               }
-            });
-      }
-      } else if (st == '1') {
-        this.title = ''
-      } else if (st == '5') {
-        this.title = '订单驳回'
-      }else if(st == '9'){
-        this.title = '生成退款订单'
+          this.bindex.forEach((element) => {
+            if (self.idt == element.id) {
+              self.form.money = element.dataName;
+              console.log(
+                self.form.money,
+                element.dataName,
+                "element.dataName"
+              );
+            }
+          });
+        }
+      } else if (st == "1") {
+        this.title = "";
+      } else if (st == "5") {
+        this.title = "订单驳回";
+      } else if (st == "9") {
+        this.title = "生成退款订单";
         if (self.dialogVisibl) {
-          this.bindex.forEach(element => {
-               if(self.idt == element.id){
-                self.form.money = element.dataName
-                console.log(self.form.money,element.dataName,'element.dataName')
-               }
-            });
-      }
+          this.bindex.forEach((element) => {
+            if (self.idt == element.id) {
+              self.form.money = element.dataName;
+              console.log(
+                self.form.money,
+                element.dataName,
+                "element.dataName"
+              );
+            }
+          });
+        }
       }
     },
-    idt(val,old){
-         this.$nextTick(() => {
-          this.$refs.audio.src = val;
-        });
+    idt(val, old) {
+      this.$nextTick(() => {
+        this.$refs.audio.src = val;
+      });
     },
     bindex(st, old) {
-      console.log(st, old,this.idt, '000000000000')
-
-    }
+      console.log(st, old, this.idt, "000000000000");
+    },
   },
-  created() { },
+  created() {},
   methods: {
     dialog() {
-      this.$emit('visivie')
+      this.$emit("visivie");
     },
     clickDialog() {
-      this.$emit('clickDialog')
-    }
-  }
+      this.$emit("clickDialog");
+    },
+  },
 };
 </script>
-<style scoped  lang="scss">
+<style scoped lang="scss">
 ::v-deep .delInput input::-webkit-outer-spin-button,
 ::v-deep .delInput input::-webkit-inner-spin-button {
   -webkit-appearance: none !important;
@@ -135,4 +177,4 @@ export default {
 ::v-deep .delInput input[type="number"] {
   -moz-appearance: textfield;
 }
-</style>
\ No newline at end of file
+</style>

src/views/orderform/index.vue

@@ -71,6 +71,8 @@
       </el-table-column>
       <el-table-column prop="remark" label="备注说明" :show-overflow-tooltip="true" align="center">
       </el-table-column>
+      <el-table-column prop="adminRemark" label="管理员备注" :show-overflow-tooltip="true" align="center">
+      </el-table-column>
       <el-table-column label="操作" width="150">
         <template slot-scope="scope">
           <el-button v-if="scope.row.status == 0" @click="imageCaption(scope.row, '4')" type="text"
@@ -343,12 +345,14 @@ export default {
         if (this.$refs['refIndex'].form.money) {
           var params = {
             actualAmount: this.$refs['refIndex'].form.money,
+            adminRemark: this.$refs['refIndex'].form.adminRemark,
             status: 2,
             id: this.id
           }
           createPayPOST(params).then((res) => {
             if (res.code == 200) {
               this.$refs['refIndex'].form.money = ''
+              this.$refs['refIndex'].form.adminRemark = ''
               this.dialogVisible = false
               this.listth()
             }

src/views/statement/index.vue

@@ -4,7 +4,22 @@
       <el-col :span="12" class="card-box">
         <el-card>
           <div slot="header"><span>已完成订单量</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
+          <div
+            class="el-table el-table--enable-row-hover el-table--medium timkdos"
+          >
+            <div class="timkdos-time">
+              <el-date-picker
+                v-model="valueTime"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+                style="width: 20em"
+                @change="changeTimes"
+              >
+              </el-date-picker>
+            </div>
             <div ref="commandstatst" style="height: 420px" />
           </div>
         </el-card>
@@ -29,7 +44,33 @@
         <el-card>
           <div slot="header"><span>累计成交额</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="commandstats" style="height: 420px" />
+            <!-- <div ref="commandstats" style="height: 420px" /> -->
+            <div class="ccumulated">
+              <div class="ccumulated-year">
+                <el-date-picker
+                  v-model="valueYear"
+                  type="year"
+                  placeholder="选择年"
+                  @change="checkYear"
+                  value-format="yyyy"
+                >
+                </el-date-picker>
+              </div>
+              <div
+                class="ccumulated-item"
+                v-for="(item, index) in ccumulatedList"
+                :key="index"
+              >
+                <span>{{ item.month }}月：￥{{ item.transactionVolume }}</span>
+                <el-progress
+                  :text-inside="false"
+                  :stroke-width="26"
+                  :percentage="100"
+                  :color="colorF"
+                  :show-text="false"
+                ></el-progress>
+              </div>
+            </div>
           </div>
         </el-card>
       </el-col>
@@ -44,7 +85,9 @@
         </el-card>
       </el-col>
       <el-col :span="12" class="card-box">
-        <el-button type="primary" size="medium " @click="clickStatement">导出报表</el-button>
+        <el-button type="primary" size="medium " @click="clickStatement"
+          >导出报表</el-button
+        >
       </el-col>
     </el-row>
   </div>
@@ -53,8 +96,10 @@
 <script>
 // import { getCache } from "@/api/monitor/cache";
 import * as echarts from "echarts";
-import { reportFormsGET} from '@/api/orderform/index'
-
+import {
+  reportFormsGET,
+  accumulatedTransactionVolumeGET,
+} from "@/api/orderform/index";
 
 export default {
   name: "Cache",
@@ -65,163 +110,284 @@ export default {
       // 使用内存
       usedmemory: null,
       // cache信息
-      cache: {}
-    }
+      cache: {},
+      ccumulatedList: [],
+      valueYear: "",
+      valueTime: "",
+    };
   },
   created() {
     this.getList();
+    this.accumulatedTransactionVolumeAxios();
     this.openLoading();
   },
   methods: {
+    changeTimes(e) {
+      console.log(e, "====changeTimes");
+      this.valueTime = e;
+      if (this.valueTime != null && this.valueTime.length > 0) {
+        this.getList({
+          startTime: e[0],
+          endTime: e[1],
+        });
+      }else{
+        this.getList({
+          startTime: '',
+          endTime: '',
+        });
+      }
+    },
+    checkYear(e) {
+      // console.log(e,"=======checkYear")
+      this.valueYear = e;
+      this.accumulatedTransactionVolumeAxios();
+    },
+    async accumulatedTransactionVolumeAxios() {
+      let self = this;
+      const data_back = await accumulatedTransactionVolumeGET({
+        year: self.valueYear,
+      });
+      // console.log(
+      //   data_back,
+      //   "=============accumulatedTransactionVolumeGET back"
+      // );
+      const { code, data } = data_back;
+      if (code === 200) {
+        self.ccumulatedList = data;
+      }
+    },
+    monthNow() {
+      var date = new Date();
+      var month = date.getMonth() + 1;
+      return month;
+    },
+    colorF() {
+      //十六进制颜色随机
+      const r = Math.floor(Math.random() * 256);
+      const g = Math.floor(Math.random() * 256);
+      const b = Math.floor(Math.random() * 256);
+      const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+      return color;
+    },
     //导出报表
-    clickStatement(){
-      this.download('/xinrenli/order/exportReportForms', { }, `role_${new Date().getTime()}.xlsx`)
+    clickStatement() {
+      this.download(
+        "/xinrenli/order/exportReportForms",
+        {},
+        `role_${new Date().getTime()}.xlsx`
+      );
     },
     /** 查缓存询信息 */
-    getList() {
-      reportFormsGET().then((response) => {
+    getList(values) {
+      reportFormsGET({
+        startTime: values && values.startTime ? values.startTime : "",
+        endTime: values && values.endTime ? values.endTime : "",
+      }).then((response) => {
         this.cache = response.data;
         this.$modal.closeLoading();
 
-        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
-        this.commandstats.setOption({
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            top: '5%',
-            left: 'center'
-          },
-          series: [
+        // this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
+        // this.commandstats.setOption({
+        //   tooltip: {
+        //     trigger: 'item'
+        //   },
+        //   legend: {
+        //     top: '5%',
+        //     left: 'center'
+        //   },
+        //   series: [
+        //     {
+        //       // name: 'Access From',
+        //       type: 'pie',
+        //       radius: ['40%', '70%'],
+        //       avoidLabelOverlap: false,
+        //       label: {
+        //         show: false,
+        //         position: 'center'
+        //       },
+        //       emphasis: {
+        //         label: {
+        //           show: false,
+        //           fontSize: 40,
+        //           fontWeight: 'bold'
+        //         }
+        //       },
+        //       labelLine: {
+        //         show: false
+        //       },
+        //       data: [
+        //         { value: this.cache.money, name: '累计成交额' }
+        //       ]
+        //     }
+        //   ]
+        // });
+        this.commandstatst = echarts.init(this.$refs.commandstatst, "macarons");
+        this.commandstatst.setOption({
+          title: [
             {
-              // name: 'Access From',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: false,
-                  fontSize: 40,
-                  fontWeight: 'bold'
-                }
+              text: `{name|已完成订单量}\n{val|${this.cache.accomplish}}`,
+              top: "center",
+              left: "center",
+              textStyle: {
+                rich: {
+                  name: {
+                    fontSize: 14,
+                    color: "#666666",
+                    padding: [10, 0],
+                  },
+                  val: {
+                    fontSize: 32,
+                    fontWeight: "bold",
+                    color: "#333333",
+                  },
+                },
               },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: this.cache.money, name: '累计成交额' }
-              ]
             }
-          ]
-        });
-        this.commandstatst = echarts.init(this.$refs.commandstatst, "macarons");
-        this.commandstatst.setOption({
+          ],
           tooltip: {
-            trigger: 'item'
+            trigger: "item",
           },
           legend: {
-            top: '5%',
-            left: 'center'
+            top: "5%",
+            left: "center",
           },
           series: [
             {
               // name: 'Access From',
-              type: 'pie',
-              radius: ['40%', '70%'],
+              type: "pie",
+              radius: ["40%", "70%"],
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: "center",
               },
               emphasis: {
                 label: {
                   show: false,
                   fontSize: 40,
-                  fontWeight: 'bold'
-                }
+                  fontWeight: "bold",
+                },
               },
               labelLine: {
-                show: false
+                show: false,
               },
-              data: [
-                { value: this.cache.accomplish, name: '已完成订单量' }
-              ]
-            }
-          ]
+              data: [{ value: this.cache.accomplish, name: "已完成订单量" }],
+            },
+          ],
         });
-        this.commandstatsts = echarts.init(this.$refs.commandstatsts, "macarons");
+        this.commandstatsts = echarts.init(
+          this.$refs.commandstatsts,
+          "macarons"
+        );
         this.commandstatsts.setOption({
+          title: [
+            {
+              text: `{name|已驳回订单量}\n{val|${this.cache.reject}}`,
+              top: "center",
+              left: "center",
+              textStyle: {
+                rich: {
+                  name: {
+                    fontSize: 14,
+                    color: "#666666",
+                    padding: [10, 0],
+                  },
+                  val: {
+                    fontSize: 32,
+                    fontWeight: "bold",
+                    color: "#333333",
+                  },
+                },
+              },
+            }
+          ],
           tooltip: {
-            trigger: 'item'
+            trigger: "item",
           },
           legend: {
-            top: '5%',
-            left: 'center'
+            top: "5%",
+            left: "center",
           },
           series: [
             {
               // name: 'Access From',
-              type: 'pie',
-              radius: ['40%', '70%'],
+              type: "pie",
+              radius: ["40%", "70%"],
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: "center",
               },
               emphasis: {
                 label: {
                   show: false,
                   fontSize: 40,
-                  fontWeight: 'bold'
-                }
+                  fontWeight: "bold",
+                },
               },
               labelLine: {
-                show: false
+                show: false,
               },
-              data: [
-                { value: this.cache.reject, name: '已驳回订单量' }
-              ]
-            }
-          ]
+              data: [{ value: this.cache.reject, name: "已驳回订单量" }],
+            },
+          ],
         });
-        this.commandstatstst = echarts.init(this.$refs.commandstatstst, "macarons");
+        this.commandstatstst = echarts.init(
+          this.$refs.commandstatstst,
+          "macarons"
+        );
         this.commandstatstst.setOption({
+          title: [
+            {
+              text: `{name|已退款订单量}\n{val|${this.cache.refund}}`,
+              top: "center",
+              left: "center",
+              textStyle: {
+                rich: {
+                  name: {
+                    fontSize: 14,
+                    color: "#666666",
+                    padding: [10, 0],
+                  },
+                  val: {
+                    fontSize: 32,
+                    fontWeight: "bold",
+                    color: "#333333",
+                  },
+                },
+              },
+            }
+          ],
           tooltip: {
-            trigger: 'item'
+            trigger: "item",
           },
           legend: {
-            top: '5%',
-            left: 'center'
+            top: "5%",
+            left: "center",
           },
           series: [
             {
               // name: 'Access From',
-              type: 'pie',
-              radius: ['40%', '70%'],
+              type: "pie",
+              radius: ["40%", "70%"],
               avoidLabelOverlap: false,
               label: {
                 show: false,
-                position: 'center'
+                position: "center",
               },
               emphasis: {
                 label: {
                   show: false,
                   fontSize: 40,
-                  fontWeight: 'bold'
-                }
+                  fontWeight: "bold",
+                },
               },
               labelLine: {
-                show: false
+                show: false,
               },
-              data: [
-                { value: this.cache.refund, name: '已退款订单量' }
-              ]
-            }
-          ]
+              data: [{ value: this.cache.refund, name: "已退款订单量" }],
+            },
+          ],
         });
         this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
         this.usedmemory.setOption({
@@ -231,37 +397,64 @@ export default {
           //   left: 'center'
           // },
           tooltip: {
-            trigger: 'item'
+            trigger: "item",
           },
           legend: {
-            orient: 'vertical',
-            left: 'left'
+            orient: "vertical",
+            left: "left",
           },
           series: [
             {
               // name: 'Access From',
-              type: 'pie',
-              radius: '50%',
+              type: "pie",
+              radius: "50%",
               data: [
-                { value: this.cache.accomplish, name: '已完成订单' },
-                { value: this.cache.noAccomplish, name: '未完成订单' },
+                { value: this.cache.accomplish, name: "已完成订单" },
+                { value: this.cache.noAccomplish, name: "未完成订单" },
               ],
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              }
-            }
-          ]
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
         });
       });
     },
     // 打开加载层
     openLoading() {
       this.$modal.loading("正在加载缓存监控数据，请稍候！");
-    }
-  }
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.ccumulated {
+  height: 420px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  &-year {
+    width: 100%;
+  }
+  &-item {
+    width: 48%;
+    height: 30px;
+    margin: 0px;
+  }
+}
+
+.timkdos {
+  position: relative;
+  &-time {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999999999;
+  }
+}
+</style>