23.3.7

.env.production

@@ -14,4 +14,4 @@ VUE_APP_MONITRO_ADMIN = '/admin/login'
 VUE_APP_XXL_JOB_ADMIN = '/xxl-job-admin'
 
 # 若依管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = '/api'

package.json

@@ -76,6 +76,7 @@
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
+    "vue-quill-editor": "^3.0.6",
     "vue-template-compiler": "2.6.12"
   },
   "engines": {

src/components/ImageUpload/index.vue

@@ -21,12 +21,12 @@
     </el-upload>
 
     <!-- 上传提示 -->
-    <div class="el-upload__tip" slot="tip" v-if="showTip">
+    <!-- <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
       <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
       <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
       的文件
-    </div>
+    </div> -->
 
     <el-dialog
       :visible.sync="dialogVisible"

src/components/quillEditor/index.vue

+<template>
+  <div class="vue-quill-editor">
+    <quill-editor ref="mwQuillEditor" v-model="html" :options="editorOption" />
+  </div>
+</template>
+<script>
+  import { quillEditor, Quill } from 'vue-quill-editor'
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  // import SelectImages from '@/components/SelectImages/index'
+  // 设置字体大小
+  const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
+  fontSizeStyle.whitelist = [
+    '12px',
+    '14px',
+    '16px',
+    '18px',
+    '20px',
+    '24px',
+    '28px',
+    '32px',
+    '36px',
+  ]
+  Quill.register(fontSizeStyle, true)
+  // 设置字体样式
+  const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
+  const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
+  Font.whitelist = fonts // 将字体加入到白名单
+  Quill.register(Font, true)
+  // 工具栏
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
+    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
+    [{ align: [] }], // 对齐方式-----[{ align: [] }]
+    [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
+    [{ font: fonts }], // 字体种类-----[{ font: [] }]
+    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+    [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
+    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
+    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
+    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
+    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
+    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
+    ['clean'], // 清除文本格式-----['clean']
+    ['link', 'image', 'video'], // 链接、图片、视频-----['link', 'image', 'video']
+  ]
+  export default {
+    name: 'VueQuillEditor',
+    components: {
+      quillEditor,
+    },
+    props: {
+      value: {
+        type: [Number, Object, Array, String],
+        default:
+          '<p><strong>手术费吧is打工皇帝固定工会的观点是</strong>否VS大哥大哥大哥的股份规范化发过</p>',
+      },
+    },
+    data() {
+      return {
+        html: this.value,
+        editorOption: {
+          modules: {
+            toolbar: {
+              container: toolbarOptions,
+              handlers: {
+                image: this.handleImgUpload,
+              },
+            },
+          },
+        },
+        isShow: false,
+      }
+    },
+    watch: {
+      html: {
+        handler(newValue) {
+          console.log(newValue)
+          this.$emit('input', newValue)
+        },
+        deep: true,
+      },
+      value: {
+        handler(newValue, oldValue) {
+          if (newValue !== oldValue) this.html = newValue
+        },
+        deep: true,
+      },
+    },
+    mounted() {
+      this.initMounted()
+    },
+    methods: {
+      initMounted() {
+        setTimeout(() => {
+          this.isShow = true
+        }, 100)
+      },
+      handleImgUpload() {
+        const { quill } = this.$refs.mwQuillEditor
+        SelectImages({
+          visible: true,
+          multi: true,
+          showButton: true,
+          maxMulti: 18,
+          success: (data, filPath) => {
+            for (const item of data) {
+              const length = quill.getSelection(true).index
+              // 获取光标所在位置
+              // 插入图片，res为服务器返回的图片链接地址
+              quill.insertEmbed(length, 'image', filPath + item)
+              // 调整光标到最后
+              quill.setSelection(length + 1)
+            }
+          },
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .vue-quill-editor {
+    .quill-editor {
+      line-height: normal;
+      .ql-container.ql-snow {
+        line-height: normal !important;
+        height: 550px !important;
+        font-size: 14px;
+      }
+      .ql-snow {
+        .ql-tooltip[data-mode='link']::before {
+          content: '请输入链接地址:';
+        }
+        .ql-tooltip.ql-editing a.ql-action::after {
+          border-right: 0px;
+          content: '保存';
+          padding-right: 0px;
+        }
+        .ql-tooltip[data-mode='video']::before {
+          content: '请输入视频地址:';
+        }
+        .ql-picker.ql-size {
+          .ql-picker-label[data-value='12px']::before,
+          .ql-picker-item[data-value='12px']::before {
+            content: '12px';
+          }
+          .ql-picker-label[data-value='14px']::before,
+          .ql-picker-item[data-value='14px']::before {
+            content: '14px';
+          }
+          .ql-picker-label[data-value='16px']::before,
+          .ql-picker-item[data-value='16px']::before {
+            content: '16px';
+          }
+          .ql-picker-label[data-value='18px']::before,
+          .ql-picker-item[data-value='18px']::before {
+            content: '18px';
+          }
+          .ql-picker-label[data-value='20px']::before,
+          .ql-picker-item[data-value='20px']::before {
+            content: '20px';
+          }
+          .ql-picker-label[data-value='24px']::before,
+          .ql-picker-item[data-value='24px']::before {
+            content: '24px';
+          }
+          .ql-picker-label[data-value='28px']::before,
+          .ql-picker-item[data-value='28px']::before {
+            content: '28px';
+          }
+          .ql-picker-label[data-value='32px']::before,
+          .ql-picker-item[data-value='32px']::before {
+            content: '32px';
+          }
+          .ql-picker-label[data-value='36px']::before,
+          .ql-picker-item[data-value='36px']::before {
+            content: '36px';
+          }
+        }
+        .ql-picker.ql-header {
+          .ql-picker-label::before,
+          .ql-picker-item::before {
+            content: '文本';
+          }
+          .ql-picker-label[data-value='1']::before,
+          .ql-picker-item[data-value='1']::before {
+            content: '标题1';
+          }
+          .ql-picker-label[data-value='2']::before,
+          .ql-picker-item[data-value='2']::before {
+            content: '标题2';
+          }
+          .ql-picker-label[data-value='3']::before,
+          .ql-picker-item[data-value='3']::before {
+            content: '标题3';
+          }
+          .ql-picker-label[data-value='4']::before,
+          .ql-picker-item[data-value='4']::before {
+            content: '标题4';
+          }
+          .ql-picker-label[data-value='5']::before,
+          .ql-picker-item[data-value='5']::before {
+            content: '标题5';
+          }
+          .ql-picker-label[data-value='6']::before,
+          .ql-picker-item[data-value='6']::before {
+            content: '标题6';
+          }
+        }
+        .ql-picker.ql-font {
+          .ql-picker-label[data-value='SimSun']::before,
+          .ql-picker-item[data-value='SimSun']::before {
+            content: '宋体';
+            font-family: 'SimSun' !important;
+          }
+          .ql-picker-label[data-value='SimHei']::before,
+          .ql-picker-item[data-value='SimHei']::before {
+            content: '黑体';
+            font-family: 'SimHei';
+          }
+          .ql-picker-label[data-value='Microsoft-YaHei']::before,
+          .ql-picker-item[data-value='Microsoft-YaHei']::before {
+            content: '微软雅黑';
+            font-family: 'Microsoft YaHei';
+          }
+          .ql-picker-label[data-value='KaiTi']::before,
+          .ql-picker-item[data-value='KaiTi']::before {
+            content: '楷体';
+            font-family: 'KaiTi' !important;
+          }
+          .ql-picker-label[data-value='FangSong']::before,
+          .ql-picker-item[data-value='FangSong']::before {
+            content: '仿宋';
+            font-family: 'FangSong';
+          }
+        }
+      }
+      .ql-align-center {
+        text-align: center;
+      }
+      .ql-align-right {
+        text-align: right;
+      }
+      .ql-align-left {
+        text-align: left;
+      }
+    }
+  }
+</style>

src/main.js

@@ -25,6 +25,8 @@ import Pagination from "@/components/Pagination";
 import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
 import Editor from "@/components/Editor"
+// 富文本组件
+import quillEditor from "@/components/quillEditor"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -56,6 +58,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
+Vue.component('quillEditor', quillEditor)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 

src/views/dynamic/components/modify.vue

 <template>
   <div class="app-container">
     <el-dialog :title='title' :visible.sync="dialogVisibl" width="60%" :before-close="dialog">
-      <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
+      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
         <el-form-item label="动态标题" class="customer" prop="name">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="动态内容" prop="desc">
-          <el-input type="textarea" v-model="form.desc"></el-input>
+          <Editor></Editor>
+
         </el-form-item>
         <el-form-item label="添加图片" class="customer" prop="name">
-         <ImageUpload></ImageUpload>
+          <ImageUpload></ImageUpload>
         </el-form-item>
         <el-form-item>
         </el-form-item>
+        <!-- <quillEditor></quillEditor> -->
       </el-form>
       <el-button type="primary" @click="onSubmit">确认修改</el-button>
     </el-dialog>

src/views/statement/index.vue

+<template>
+  <div class="app-container">
+    <el-row>
+      <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 ref="commandstatst" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+      <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 ref="commandstatsts" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+      <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 ref="commandstatstst" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+      <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 ref="commandstats" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+      <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 ref="usedmemory" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="card-box">
+        <el-button type="primary" size="medium ">导出报表（PDF）</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getCache } from "@/api/monitor/cache";
+import * as echarts from "echarts";
+
+export default {
+  name: "Cache",
+  data() {
+    return {
+      // 统计命令信息
+      commandstats: null,
+      // 使用内存
+      usedmemory: null,
+      // cache信息
+      cache: []
+    }
+  },
+  created() {
+    this.getList();
+    this.openLoading();
+  },
+  methods: {
+    /** 查缓存询信息 */
+    getList() {
+      getCache().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: [
+            {
+              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: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        });
+        this.commandstatst = echarts.init(this.$refs.commandstatst, "macarons");
+        this.commandstatst.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: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        });
+        this.commandstatsts = echarts.init(this.$refs.commandstatsts, "macarons");
+        this.commandstatsts.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: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        });
+        this.commandstatstst = echarts.init(this.$refs.commandstatstst, "macarons");
+        this.commandstatstst.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: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        });
+        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
+        this.usedmemory.setOption({
+          title: {
+            text: 'Referer of a Website',
+            subtext: 'Fake Data',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: '50%',
+              data: [
+                { value: 1048, name: 'Search Engine' },
+                { value: 735, name: 'Direct' },
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        });
+      });
+    },
+    // 打开加载层
+    openLoading() {
+      this.$modal.loading("正在加载缓存监控数据，请稍候！");
+    }
+  }
+};
+</script>