feat:恢复显示设置，仪表盘样式设置等

frontend/src/api/commonAjax.js

+import request from '@/utils/request'
+
+export function post(url, data) {
+  return request({
+    url: url,
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function get(url) {
+  return request({
+    url: url,
+    method: 'get',
+    loading: true
+  })
+}
+
+export function fileUpload(url, file, files, param) {
+  const formData = new FormData()
+  if (file) {
+    formData.append('file', file)
+  }
+  if (files) {
+    files.forEach(f => {
+      formData.append('files', f)
+    })
+  }
+  formData.append('request', new Blob([JSON.stringify(param)], { type: 'application/json' }))
+  return request({
+    method: 'POST',
+    loading: true,
+    url: url,
+    data: formData
+  })
+}
+export default { fileUpload }

frontend/src/components/RightPanel/index.vue

@@ -63,6 +63,7 @@ export default {
     closeSidebar(evt) {
       const parent = evt.target.closest('.rightPanel')
       if (!parent) {
+        debugger
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
       }

frontend/src/components/canvas/components/Toolbar.vue

@@ -12,6 +12,10 @@
         <span>画布比例</span>
         <input v-model="scale" @input="handleScaleChange"> %
       </div>
+
+      <el-tooltip content="样式">
+        <el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
+      </el-tooltip>
       <el-tooltip content="撤消">
         <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
       </el-tooltip>
@@ -38,16 +42,12 @@
         </el-button>
       </span>
     </div>
-
-    <!-- 预览 -->
-    <!--    <PreviewEject v-model="isShowPreview" @change="handlePreviewChange" />-->
   </div>
 </template>
 
 <script>
 import generateID from '@/components/canvas/utils/generateID'
 import toast from '@/components/canvas/utils/toast'
-import PreviewEject from '@/components/canvas/components/Editor/PreviewEject'
 import { mapState } from 'vuex'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import eventBus from '@/components/canvas/utils/eventBus'
@@ -56,7 +56,6 @@ import { post } from '@/api/panel/panel'
 import bus from '@/utils/bus'
 
 export default {
-  components: { PreviewEject },
   data() {
     return {
       isShowPreview: false,
@@ -152,6 +151,9 @@ export default {
       this.$store.commit('redo')
     },
 
+    showPanel() {
+      this.$emit('showPanel', 2)
+    },
     handleFileChange(e) {
       const file = e.target.files[0]
       if (!file.type.includes('image')) {

frontend/src/views/panel/SubjectSetting/BackgroundSelector.vue

+<template>
+  <div>
+    <div style="width: 100%">
+      <el-popover
+        placement="right"
+        width="200"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="backgroundForm" :model="backgroundForm" label-width="80px" size="mini">
+            <el-form-item label="颜色" class="form-item">
+              <colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
+            </el-form-item>
+            <el-form-item label="图片" class="form-item">
+              <colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_BACKGROUND_COLOR } from '@/views/panel/panel'
+
+export default {
+  name: 'BackgroundSelector',
+  props: {
+  },
+  data() {
+    return {
+      backgroundForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+  },
+  methods: {
+    changeBackgroundStyle() {
+      this.$emit('onChangeBackgroundForm', this.backgroundForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>