demo提交

package.json

@@ -5,7 +5,7 @@
   "author": "若依",
   "license": "MIT",
   "scripts": {
-    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
@@ -59,7 +60,9 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/main.js

@@ -13,6 +13,7 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import dataV from '@jiaminghi/data-view'
 
 import './assets/icons' // icon
 import './permission' // permission control
@@ -59,6 +60,8 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+
+Vue.use(dataV)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

src/router/index.js

@@ -74,16 +74,29 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: '/bigData',
+  //   component: Layout,
+  //   redirect: 'noredirect',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/bigData/index1'),
+  //       name: 'Index',
+  //       meta: { title: '大数据', icon: 'dashboard'}
+  //     }
+  //   ]
+  // },
   {
-    path: '/bigData',
+    path: '/data',
     component: Layout,
     redirect: 'noredirect',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/bigData'),
+        component: () => import('@/views/datav/index'),
         name: 'Index',
-        meta: { title: '大数据', icon: 'dashboard'}
+        meta: { title: '我是大数据', icon: 'dashboard'}
       }
     ]
   },
@@ -174,7 +187,7 @@ export const dynamicRoutes = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
-  }
+  },
 ]
 
 // 防止连续点击多次路由报错

src/views/bigData.vue

@@ -1,17 +0,0 @@
-<template>
-  <div>123456</div>
-</template>
-
-<script>
-export default {
-    name: 'bigData',
-    data() {
-        return {
-            
-        }
-    },
-}
-
-</script>
-<style scoped>
-</style>

src/views/datav/BottomCharts.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="bottom-charts">
+    <div class="bc-chart-item">
+      <div class="bcci-header">赵钱收费站</div>
+      <dv-active-ring-chart :config="config1" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">孙李收费站</div>
+      <dv-active-ring-chart :config="config2" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+
+    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">周吴收费站</div>
+      <dv-active-ring-chart :config="config3" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+
+    <dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">郑王收费站</div>
+      <dv-active-ring-chart :config="config4" />
+      <Label-Tag :config="labelConfig" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+import LabelTag from './LabelTag'
+
+export default {
+  name: 'BottomCharts',
+  components: {
+    LabelTag
+  },
+  data () {
+    return {
+      config1: {
+        data: [
+          {
+            name: '收费站',
+            value: 356
+          },
+          {
+            name: '监控中心',
+            value: 215
+          },
+          {
+            name: '道路外场',
+            value: 90
+          },
+          {
+            name: '其他',
+            value: 317
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        radius: '65%',
+        activeRadius: '70%'
+      },
+
+      config2: {
+        data: [
+          {
+            name: '收费站',
+            value: 615
+          },
+          {
+            name: '监控中心',
+            value: 322
+          },
+          {
+            name: '道路外场',
+            value: 198
+          },
+          {
+            name: '其他',
+            value: 80
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        radius: '65%',
+        activeRadius: '70%'
+      },
+
+      config3: {
+        data: [
+          {
+            name: '收费站',
+            value: 452
+          },
+          {
+            name: '监控中心',
+            value: 512
+          },
+          {
+            name: '道路外场',
+            value: 333
+          },
+          {
+            name: '其他',
+            value: 255
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        radius: '65%',
+        activeRadius: '70%'
+      },
+
+      config4: {
+        data: [
+          {
+            name: '收费站',
+            value: 156
+          },
+          {
+            name: '监控中心',
+            value: 415
+          },
+          {
+            name: '道路外场',
+            value: 90
+          },
+          {
+            name: '其他',
+            value: 210
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        radius: '65%',
+        activeRadius: '70%'
+      },
+
+      labelConfig: {
+        data: ['收费站', '监控中心', '道路外场', '其他']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.bottom-charts {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .bc-chart-item {
+    width: 25%;
+    height: 100%;
+    padding-top: 20px;
+    box-sizing: border-box;
+  }
+
+  .bcci-header {
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+  }
+
+  .dv-active-ring-chart {
+    height: calc(~"100% - 80px");
+  }
+
+  .label-tag {
+    height: 30px;
+  }
+
+  .active-ring-name {
+    font-size: 18px !important;
+  }
+
+  .decoration-1, .decoration-2, .decoration-3 {
+    display: absolute;
+    left: 0%;
+  }
+}
+</style>

src/views/datav/CenterCmp.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="center-cmp">
+    <div class="cc-header">
+      <dv-decoration-1 style="width:200px;height:50px;" />
+      <div>机电设备总数</div>
+      <dv-decoration-1 style="width:200px;height:50px;" />
+    </div>
+
+    <div class="cc-details">
+      <div>设备总数</div>
+      <div class="card">2</div>
+      <div class="card">1</div>
+      <div class="card">3</div>
+      <div class="card">7</div>
+    </div>
+
+    <div class="cc-main-container">
+      <div class="ccmc-left">
+        <div class="station-info">
+          收费站<span>1315</span>
+        </div>
+        <div class="station-info">
+          监控中心<span>415</span>
+        </div>
+      </div>
+
+      <dv-active-ring-chart class="ccmc-middle" :config="config" />
+
+      <div class="ccmc-right">
+        <div class="station-info">
+          <span>90</span>道路外场
+        </div>
+        <div class="station-info">
+          <span>317</span>其他
+        </div>
+      </div>
+
+      <LabelTag :config="labelConfig" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from './LabelTag'
+
+export default {
+  name: 'CenterCmp',
+  components: {
+    LabelTag
+  },
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '收费站',
+            value: 1315
+          },
+          {
+            name: '监控中心',
+            value: 415
+          },
+          {
+            name: '道路外场',
+            value: 90
+          },
+          {
+            name: '其他',
+            value: 317
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        lineWidth: 30,
+        radius: '55%',
+        activeRadius: '60%'
+      },
+
+      labelConfig: {
+        data: ['收费站', '监控中心', '道路外场', '其他']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.center-cmp {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+
+  .cc-header {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+  }
+
+  .cc-details {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    font-size: 32px;
+    align-items: center;
+
+    .card {
+      background-color: rgba(4,49,128,.6);
+      color: #08e5ff;
+      height: 70px;
+      width: 70px;
+      font-size: 45px;
+      font-weight: bold;
+      line-height: 70px;
+      text-align: center;
+      margin: 10px;
+    }
+  }
+
+  .cc-main-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+
+    .ccmc-middle {
+      width: 50%;
+      height: 90%;
+
+      .active-ring-name {
+        font-size: 20px !important;
+      }
+    }
+
+    .ccmc-left, .ccmc-right {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 24px;
+
+      span {
+        font-size: 40px;
+        font-weight: bold;
+      }
+
+      .station-info {
+        height: 80px;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ccmc-left {
+      align-items: flex-end;
+
+      span {
+        margin-left: 20px;
+      }
+    }
+
+    .ccmc-right {
+      align-items: flex-start;
+
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .label-tag {
+    position: absolute;
+    width: 500px;
+    height: 30px;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/datav/LabelTag.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="label-tag">
+    <template v-if="mergedConfig">
+      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
+        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'LabelTag',
+  props: {
+    config: {
+      type: Object,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultConfig: {
+        /**
+         * @description Label data
+         * @type {Array<String>}
+         * @default data = []
+         * @example data = ['label1', 'label2']
+         */
+        data: [],
+        /**
+         * @description Label color (Hex|Rgb|Rgba|color keywords)
+         * @type {Array<String>}
+         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+      },
+
+      mergedConfig: null
+    }
+  },
+  watch: {
+    config () {
+      const { mergeConfig } = this
+
+      mergeConfig()
+    }
+  },
+  methods: {
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    }
+  },
+  mounted () {
+    const { mergeConfig } = this
+
+    mergeConfig()
+  }
+}
+</script>
+
+<style lang="less">
+.label-tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .label-item {
+    margin: 5px;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+
+    div {
+      width: 12px;
+      height: 12px;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

src/views/datav/LeftChart1.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="left-chart-1">
+    <div class="lc1-header">张三收费站</div>
+    <div class="lc1-details">设备运行总数<span>430</span></div>
+    <dv-capsule-chart class="lc1-chart" :config="config" />
+    <dv-decoration-2 style="height:10px;" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftChart1',
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '收费系统',
+            value: 167
+          },
+          {
+            name: '通信系统',
+            value: 67
+          },
+          {
+            name: '监控系统',
+            value: 123
+          },
+          {
+            name: '供配电系统',
+            value: 55
+          },
+          {
+            name: '其他',
+            value: 98
+          }
+        ],
+        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        unit: '件'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.left-chart-1 {
+  width: 100%;
+  height: 37%;
+  display: flex;
+  flex-grow: 0;
+  flex-direction: column;
+
+  .lc1-header {
+    text-align: center;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    margin-bottom: 20px;
+  }
+
+  .lc1-details {
+    height: 50px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc1-chart {
+    flex: 1;
+  }
+}
+</style>

src/views/datav/LeftChart2.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="left-chart-2">
+    <div class="lc2-header">李四收费站</div>
+    <div class="lc2-details">设备运行总数<span>245</span></div>
+    <dv-charts class="lc2-chart" :option="option" />
+    <dv-decoration-2 style="height:10px;" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftChart2',
+  data () {
+    return {
+      option: {
+        series: [
+          {
+            type: 'pie',
+            data: [
+              { name: '收费系统', value: 93 },
+              { name: '通信系统', value: 32 },
+              { name: '监控系统', value: 65 },
+              { name: '供配电系统', value: 44 },
+              { name: '其他', value: 52 }
+            ],
+            radius: ['45%', '65%'],
+            insideLabel: {
+              show: false
+            },
+            outsideLabel: {
+              labelLineEndLength: 10,
+              formatter: '{percent}%\n{name}',
+              style: {
+                fontSize: 14,
+                fill: '#fff'
+              }
+            }
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.left-chart-2 {
+  width: 100%;
+  height: 30%;
+  display: flex;
+  flex-direction: column;
+
+  .lc2-header {
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+
+  .lc2-details {
+    height: 40px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc2-chart {
+    height: calc(~"100% - 80px");
+  }
+}
+</style>

src/views/datav/LeftChart3.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="left-chart-3">
+    <div class="lc3-header">王五收费站</div>
+    <div class="lc3-details">设备运行总数<span>245</span></div>
+    <dv-capsule-chart class="lc3-chart" :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LeftChart3',
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '收费系统',
+            value: 78
+          },
+          {
+            name: '通信系统',
+            value: 54
+          },
+          {
+            name: '监控系统',
+            value: 123
+          },
+          {
+            name: '供配电系统',
+            value: 167
+          },
+          {
+            name: '其他',
+            value: 77
+          }
+        ],
+        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
+        unit: '件'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.left-chart-3 {
+  width: 100%;
+  height: 33%;
+  display: flex;
+  flex-direction: column;
+
+  .lc3-header {
+    height: 20px;
+    line-height: 20px;
+    font-size: 16px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+
+  .lc3-details {
+    height: 40px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    text-indent: 20px;
+
+    span {
+      color: #096dd9;
+      font-weight: bold;
+      font-size: 35px;
+      margin-left: 20px;
+    }
+  }
+
+  .lc3-chart {
+    flex: 1;
+  }
+}
+</style>

src/views/datav/RightChart1.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="right-chart-1">
+    <div class="rc1-header">赵六收费站</div>
+
+    <div class="rc1-chart-container">
+      <div class="left">
+        <div class="number">262</div>
+        <div>设备运行总数</div>
+      </div>
+
+      <dv-capsule-chart class="right" :config="config" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightChart1',
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '收费系统',
+            value: 25
+          },
+          {
+            name: '通信系统',
+            value: 66
+          },
+          {
+            name: '监控系统',
+            value: 123
+          },
+          {
+            name: '供配电系统',
+            value: 72
+          },
+          {
+            name: '其他',
+            value: 99
+          }
+        ],
+        unit: '件'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.right-chart-1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .rc1-header {
+    font-size: 24px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .rc1-chart-container {
+    flex: 1;
+    display: flex;
+  }
+
+  .left {
+    width: 30%;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .number {
+      font-size: 34px;
+      color: #096dd9;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/datav/RightChart2.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="right-chart-2">
+    <div class="rc1-header">孙七收费站</div>
+
+    <div class="rc1-chart-container">
+      <div class="left">
+        <div class="number">267</div>
+        <div>设备运行总数</div>
+      </div>
+
+      <dv-charts class="right" :option="option" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightChart2',
+  data () {
+    return {
+      option: {
+        series: [
+          {
+            type: 'pie',
+            data: [
+              { name: '收费系统', value: 93 },
+              { name: '通信系统', value: 66 },
+              { name: '监控系统', value: 52 },
+              { name: '供配电系统', value: 34 },
+              { name: '其他', value: 22 }
+            ],
+            radius: ['45%', '65%'],
+            insideLabel: {
+              show: false
+            },
+            outsideLabel: {
+              labelLineEndLength: 10,
+              formatter: '{percent}%\n{name}',
+              style: {
+                fontSize: 14,
+                fill: '#fff'
+              }
+            }
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.right-chart-2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .rc1-header {
+    font-size: 24px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .rc1-chart-container {
+    flex: 1;
+    display: flex;
+  }
+
+  .left {
+    width: 30%;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .number {
+      font-size: 34px;
+      color: #096dd9;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/views/datav/index.vue

@@ -0,0 +1,176 @@
+<template>
+ <div class="app-container">
+  <div id="data-view">
+    <dv-full-screen-container>
+      <div class="main-header">
+        <div class="mh-middle">机电设备电子档案</div>
+        <!-- <div class="mh-right">
+          <dv-border-box-2
+            style="width: 120px; height: 50px; line-height: 50px; text-align:center;margin-left:200px;"
+          >
+            综合管理台
+          </dv-border-box-2>
+        </div> -->
+      </div>
+
+      <dv-border-box-1 class="main-container">
+        <dv-border-box-3 class="left-chart-container">
+
+          <Left-Chart-1 />
+          <Left-Chart-2 />
+          <Left-Chart-3 />
+
+        </dv-border-box-3>
+
+        <div class="right-main-container">
+          <div class="rmc-top-container">
+            <dv-border-box-3 class="rmctc-left-container">
+
+              <Center-Cmp />
+
+            </dv-border-box-3>
+
+            <div class="rmctc-right-container">
+              <dv-border-box-3 class="rmctc-chart-1">
+
+                <Right-Chart-1 />
+
+              </dv-border-box-3>
+
+              <dv-border-box-4 class="rmctc-chart-2" :reverse="true">
+
+                <Right-Chart-2 />
+
+              </dv-border-box-4>
+            </div>
+          </div>
+
+          <dv-border-box-4 class="rmc-bottom-container">
+
+            <Bottom-Charts />
+
+          </dv-border-box-4>
+        </div>
+      </dv-border-box-1>
+
+    </dv-full-screen-container>
+  </div>
+ </div>
+</template>
+
+<script>
+import LeftChart1 from './LeftChart1'
+import LeftChart2 from './LeftChart2'
+import LeftChart3 from './LeftChart3'
+
+import CenterCmp from './CenterCmp'
+
+import RightChart1 from './RightChart1'
+import RightChart2 from './RightChart2'
+
+import BottomCharts from './BottomCharts'
+
+export default {
+  name: 'DataView',
+  components: {
+    LeftChart1,
+    LeftChart2,
+    LeftChart3,
+    CenterCmp,
+    RightChart1,
+    RightChart2,
+    BottomCharts
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url('./img/bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+
+    .mh-left {
+      font-size: 20px;
+      color: rgb(1,134,187);
+
+      a:visited {
+        color: rgb(1,134,187);
+      }
+    }
+
+    .mh-middle {
+      font-size: 30px;
+    }
+
+    .mh-left, .mh-right {
+      width: 450px;
+    }
+  }
+
+  .main-container {
+    height: calc(~"100% - 80px");
+
+    .border-box-content {
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+    }
+  }
+
+  .left-chart-container {
+    width: 22%;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .border-box-content {
+      flex-direction: column;
+    }
+  }
+
+  .right-main-container {
+    width: 78%;
+    padding-left: 5px;
+    box-sizing: border-box;
+  }
+
+  .rmc-top-container {
+    height: 65%;
+    display: flex;
+  }
+
+  .rmctc-left-container {
+    width: 65%;
+  }
+
+  .rmctc-right-container {
+    width: 35%;
+  }
+
+  .rmc-bottom-container {
+    height: 35%;
+  }
+
+  .rmctc-chart-1, .rmctc-chart-2 {
+    height: 50%;
+  }
+}
+</style>