帮助中心

package.json

@@ -8,12 +8,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^1.7.11",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^1.7.8",
     "axios": "^1.2.6",
     "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
     "element-resize-detector": "^1.2.4",
+    "highlight.js": "^11.8.0",
     "hikvs-web": "^1.0.4",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",

public/static/help/cantingpositon.md

@@ -0,0 +1,2 @@
+- 点击左上角导航
+- 点击智享生活下智慧餐厅

public/static/help/hkwscjdownload.md

@@ -0,0 +1 @@
+- 插件下载地址： <a href = '/static/VideoWebPlugin.exe'>点击下载</a>

public/static/help/shuangtanposition.md

@@ -0,0 +1,2 @@
+- 点击左上角导航
+- 点击数智双碳下各双碳模块

src/api/dashboard/apiNotice.js

@@ -35,6 +35,11 @@ const getFeedBack = (param) => {
     return Request.get('/feedback/getFeedBack', param)
 }
 
+// 新增反馈
+const addFeedback = (param) => {
+  return Request.post('/feedback/addFeedBack', param)
+}
+
 // 删除反馈
 const delFeedBack = (param) => {
     return Request.post('/feedback/delFeedBack', param)
@@ -51,6 +56,7 @@ export default {
     readFeedBack,
     getFeedBack,
     delFeedBack,
+    addFeedback,
 
 
 }

src/components/help/commonHelp.vue

@@ -1,21 +1,147 @@
 <template>
-  <div class="commonHelp">
-
-  </div>
+    <div class="commonHelp">
+        <a-row :gutter="12" style="height: 100%">
+            <a-col :span="6" style="height: 100%">
+                <div class="commonHelp-left">
+                    <div style="font-size: 16px;font-family: PingFangSC-Bold, serif;margin-bottom: 8px">常见问题</div>
+                    <a-input-search placeholder="请输入关键词" @search="search"/>
+                    <a-list item-layout="horizontal" :data-source="data" style="margin-top: 15px">
+                        <a-list-item slot="renderItem" slot-scope="item, index">
+                            <span style="color: #333333;padding-left: 15px;cursor: pointer" @click="handleClick(item)" :style="currItem==item?{color: '#0368dd'}:{}">{{
+                                item.title
+                                }}</span>
+                        </a-list-item>
+                    </a-list>
+                </div>
+            </a-col>
+            <a-col :span="18" style="height: 100%">
+                <div class="commonHelp-right">
+                    <div style="height: 500px">
+                        <div style="font-size: 16px;font-family: PingFangSC-Bold, serif;margin-bottom: 8px">解决方法</div>
+                        <markdownView :url="currItem.url" />
+                    </div>
+                    <div style="height: 300px">
+                        <div style="font-size: 16px;font-family: PingFangSC-Bold, serif;margin-bottom: 8px">问题反馈</div>
+                        <a-form-model ref="feedbackForm" layout="inline" :model="feedbackForm" :rules="feedbackFormRules">
+                            <a-form-model-item label="模块" prop="module">
+                                <a-select v-model="feedbackForm.module" style="width: 200px">
+                                    <a-select-option v-for="(val, key, index) in moduleIds" :key="index" :value="key">{{ val }}</a-select-option>
+                                </a-select>
+                            </a-form-model-item> <br/>
+                            <a-form-model-item label="问题" prop="content">
+                                <a-input v-model="feedbackForm.content" type="textarea" :rows="4" style="width: 600px"></a-input>
+                            </a-form-model-item> <br/><br/>
+                            <a-form-model-item style="padding-left: 40px">
+                                <a-button @click="submitFeedback">提交反馈</a-button>
+                            </a-form-model-item>
+                        </a-form-model>
+                    </div>
+                </div>
+            </a-col>
+        </a-row>
+    </div>
 </template>
 <script>
+import markdownView from "@/components/help/markdownView.vue";
+import apiNotice from "@/api/dashboard/apiNotice";
 export default {
+    components: {markdownView},
     data() {
-        return {}
+        return {
+            moduleIds: {
+                '1': '智能看板',
+                '2': '智享生活',
+                '3': '智慧办公',
+                '4': '数智双碳',
+                '5': '智慧运营',
+                '6': '智慧安防',
+                '7': '智慧场景',
+                '8': '报表报告',
+                '9': '统一鉴权',
+            },
+            feedbackForm: {},
+            feedbackFormRules: {
+                module: [
+                    {required: true, message: '请选择模块', trigger: 'blur'}
+                ],
+                content: [
+                    {required: true, message: '请输入问题', trigger: 'blur'},
+                    {min: 10, message: '至少10个字', trigger: 'blur'}
+                ]
+            },
+            data: [
+                {
+                    title: '海康威视播放插件下载',
+                    url: '/static/help/hkwscjdownload.md'
+                }, {
+                    title: '如何查看餐厅数据',
+                    url: '/static/help/cantingpositon.md'
+                }, {
+                    title: '如何查看双碳数据',
+                    url: '/static/help/shuangtanposition.md'
+                },
+            ],
+            currItem: {},
+            oriData: [],
+        }
     },
     mounted() {
+        this.oriData = JSON.parse(JSON.stringify(this.data))
     },
     methods: {
-
+        search(val) {
+            if (val && val != '') {
+                this.data = this.oriData.filter(item => {
+                    if (item.title.indexOf(val) > -1) {
+                        return true;
+                    }
+                    return false;
+                })
+            } else {
+                this.data = JSON.parse(JSON.stringify(this.oriData));
+            }
+        },
+        handleClick(item) {
+            this.currItem = item;
+            this.currItem.url = item.url;
+        },
+        submitFeedback() {
+            this.$refs.feedbackForm.validate(valid=>{
+                if (valid) {
+                    apiNotice.addFeedback(this.feedbackForm).then(res=>{
+                        this.feedbackForm = {};
+                        this.$message.success('提交成功，非常感谢您的反馈')
+                    })
+                }
+            })
+        }
     }
 }
 </script>
 
 <style lang="less" scoped>
+.commonHelp {
+  border-radius: 4px;
+  width: 100%;
+  height: 800px;
+
+  .commonHelp-left {
+    background-color: #FFFFFF;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 12px 15px;
+    border-radius: 4px;
+  }
 
+  .commonHelp-right {
+    background-color: #FFFFFF;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 12px 15px;
+    border-radius: 4px;
+  }
+    /deep/ .ant-form-inline .ant-form-item-with-help {
+        margin-bottom: 0;
+    }
+}
 </style>

src/components/help/markdownView.vue

@@ -0,0 +1,58 @@
+<template>
+    <div id="mdContent">
+        <v-md-preview :text="md.content"></v-md-preview>
+    </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+    data() {
+        return {
+            md: {}
+        }
+    },
+    watch: {
+      url: function (val) {
+          this.getContent(val)
+      }
+    },
+    props: {
+        url: String,
+        pics: Array,
+    },
+    created() {
+    },
+    mounted() {
+        this.md.url = this.url;
+        this.getContent(this.url)
+    },
+    methods: {
+        getContent(url) {
+            if (!url || url=='') {
+                this.md = {};
+                return ;
+            }
+            let app = this;
+            request.getFile(url,{}).then(res=>{
+                if (res.status===200) {
+                    let reader = new FileReader();
+                    reader.readAsText(res.data,'utf-8');
+                    reader.onload = function (e) {
+                        app.md.content = e.target.result;
+                        app.$forceUpdate();
+                    };
+                }
+
+            }).catch(err=>{
+                this.md.content = ''
+            })
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -24,6 +24,17 @@ Vue.prototype.$util = util
 Vue.prototype.$constant = constant
 Vue.prototype.$echarts = echarts
 Vue.prototype.$moment = moment
+// markdown
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
+import '@kangc/v-md-editor/lib/style/preview.css';
+import mdTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import '@kangc/v-md-editor/lib/theme/style/github.css';
+import hljs from 'highlight.js';
+
+VMdPreview.use(mdTheme, {
+  Hljs: hljs,
+});
+Vue.use(VMdPreview)
 
 import hikComp from 'hikvs-web'
 Vue.use(hikComp)

src/utils/request.js

@@ -131,6 +131,7 @@ export default {
   getFile(url, params) {
     return new Promise((resolve, reject) => {
       service({
+        baseURL: '/',
         method: 'GET',
         url,
         params,