添加布局

chuanyi_client2/src/assets/icons/svg/bar_chart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670810286293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5233" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M382.6 805H242.2c-6.7 0-12.2-5.5-12.2-12.2V434.3c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v358.6c0 6.6-5.4 12.1-12.2 12.1z" fill="#1E88E5" p-id="5234"></path><path d="M591.1 805H450.7c-6.7 0-12.2-5.5-12.2-12.2V254.9c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v537.9c0 6.7-5.5 12.2-12.2 12.2z" fill="#64B5F6" p-id="5235"></path><path d="M804.4 805H663.9c-6.7 0-12.2-5.5-12.2-12.2v-281c0-6.7 5.5-12.2 12.2-12.2h140.4c6.7 0 12.2 5.5 12.2 12.2v281c0.1 6.7-5.4 12.2-12.1 12.2z" fill="#1E88E5" p-id="5236"></path></svg>

chuanyi_client2/src/assets/icons/svg/line_chart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670810506264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19191" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M640 501.44a32 32 0 0 1-22.72-9.6L384 258.56l-233.28 233.28a32 32 0 0 1-45.44 0 32 32 0 0 1 0-45.12l256-256a32 32 0 0 1 45.44 0L640 424 873.28 192a32 32 0 0 1 45.44 0 32 32 0 0 1 0 45.12l-256 256a32 32 0 0 1-22.72 8.32z" fill="#4A8BFE" p-id="19192"></path><path d="M640 842.56a32 32 0 0 1-22.72-9.28L384 600 150.72 832a32 32 0 0 1-45.44 0 32 32 0 0 1 0-45.12l256-256a32 32 0 0 1 45.44 0L640 765.44l233.28-233.28a32 32 0 0 1 45.44 0 32 32 0 0 1 0 45.12l-256 256a32 32 0 0 1-22.72 9.28z" fill="#3BD5B3" p-id="19193"></path></svg>

chuanyi_client2/src/assets/icons/svg/pie_chart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670810530018" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21721" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384c110.933333 0 211.2-46.933333 279.466667-121.6L512 512V128z" fill="#00BCD4" p-id="21722"></path><path d="M896 512c0-211.2-172.8-384-384-384v384h384z" fill="#448AFF" p-id="21723"></path><path d="M512 512l279.466667 262.4c64-68.266667 104.533333-160 104.533333-262.4H512z" fill="#3F51B5" p-id="21724"></path></svg>

chuanyi_client2/src/components/RulerView/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div :class="rulerPosition == 'horizontal' ? 'jd-ruler' : 'jd-ruler-left'">
+    <template v-if="rulerPosition == 'horizontal'">
+      <div class="ruler-top-txt">
+        <template v-for="i in rulerWidth">
+          <div v-if="i == 1" class="txt-item">0</div>
+          <div v-else-if="i % 10 == 0" class="txt-item">{{ i }}</div>
+        </template>
+      </div>
+      <div class="ruler-top">
+        <template v-for="i in rulerWidth">
+          <div v-if="(i - 1) % 10 == 0 || i == rulerWidth" class="ruler-group"></div>
+          <div v-else-if="(i - 1) % 5 == 0" class="ruler-middle"></div>
+          <div v-else class="ruler-item"></div>
+        </template>
+      </div>
+    </template>
+    <template v-if="rulerPosition == 'vertical'">
+      <div class="ruler-left-txt">
+        <template v-for="i in rulerHeight">
+          <div v-if="i == 1" class="txt-item-left">0</div>
+          <div v-else-if="i % 10 == 0" class="txt-item-left">{{ i }}</div>
+        </template>
+      </div>
+      <div class="ruler-left">
+        <template v-for="i in rulerHeight">
+          <div v-if="(i - 1) % 10 == 0" class="ruler-group-left"></div>
+          <div v-else-if="(i - 1) % 5 == 0" class="ruler-middle-left"></div>
+          <div v-else class="ruler-item-left"></div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RulerView",
+  data() {
+    return {
+      rulerWidth: 210,
+      rulerHeight: 297
+    }
+  },
+  props: ["rulerPosition"],
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.jd-ruler-left {
+  padding: 0 10px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.jd-ruler {
+  padding: 0 10px;
+  width: 100%;
+}
+
+.ruler-top {
+  width: 21cm;
+  height: 23px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.ruler-left {
+  margin-top: 10px;
+  margin-right: 8px;
+  height: 29.7cm;
+}
+
+.ruler-top-txt {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: absolute;
+  font-size: 12px;
+  margin-top: 3px;
+  color: #bebebe;
+}
+
+.ruler-left-txt {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  font-size: 12px;
+  margin-top: 10px;
+  margin-left: -8px;
+  color: #bebebe;
+}
+
+.txt-item:first-child {
+  margin-left: -5mm;
+}
+
+.txt-item {
+  width: 1cm;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.txt-item-left {
+  height: 1cm;
+  margin-right: 3px;
+  transform: rotate(-90deg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.txt-item-left:first-child {
+  margin-top: -6mm;
+}
+
+.ruler-group {
+  width: 1mm;
+  height: 6px;
+  margin-top: 17px;
+  border-left: 1px solid #2c3e50;
+  border-bottom: 1px solid #2c3e50;
+}
+
+.ruler-group-left {
+  width: 6px;
+  height: 1mm;
+  margin-left: 7px;
+  border-right: 1px solid #2c3e50;
+  border-top: 1px solid #2c3e50;
+}
+
+.ruler-group:last-child {
+  width: 1mm;
+  height: 6px;
+  margin-top: 17px;
+  border-left: 1px solid #2c3e50;
+  border-bottom: none;
+}
+
+.ruler-middle {
+  width: 1mm;
+  height: 4px;
+  margin-top: 19px;
+  border-left: 1px solid #2c3e50;
+  border-bottom: 1px solid #2c3e50;
+}
+
+.ruler-middle-left {
+  width: 4px;
+  height: 1mm;
+  margin-left: 9px;
+  border-right: 1px solid #2c3e50;
+  border-top: 1px solid #2c3e50;
+}
+
+.ruler-item {
+  width: 1mm;
+  height: 2px;
+  margin-top: 21px;
+  border-left: 1px solid #2c3e50;
+  border-bottom: 1px solid #2c3e50;
+}
+
+.ruler-item-left {
+  width: 2px;
+  height: 1mm;
+  margin-left: 11px;
+  border-right: 1px solid #2c3e50;
+  border-top: 1px solid #2c3e50;
+}
+</style>

chuanyi_client2/src/permission.js

@@ -3,6 +3,7 @@ import store from './store'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import {getToken} from '@/utils/auth'
+import {Message} from "element-ui";
 
 // NProgress.configure({showSpinner: false})
 
@@ -26,6 +27,15 @@ router.beforeEach(async (to, from, next) => {
                 try {
                     // 获取用户角色信息
                     const {roleList} = await store.dispatch('user/getInfo')
+                    if (roleList && roleList.length == 0) {
+                        Message({
+                            message: '您还没有设置角色，请联系管理员！',
+                            type: 'warning'
+                        })
+                        await store.dispatch('user/resetToken')
+                        next(`/login?redirect=${to.fullPath}`)
+                        return
+                    }
                     // 循环判断角色
                     next({...to, replace: true})
                 } catch (error) {

chuanyi_client2/src/views/group_item/index.vue

@@ -102,7 +102,6 @@ export default {
     },
     /** 获取组详细信息 */
     getGroupById(id) {
-      console.log(this.timeInterval)
       if (this.timeInterval) {
         clearInterval(this.timeInterval)
         this.timeInterval = null

chuanyi_client2/src/views/report_template/index.vue

@@ -1,11 +1,46 @@
 <template>
-
+  <div style="width: 100%; height: calc(100% - 70px);" v-if="false">
+    <div class="cy-report-content">
+      <div class="cy-div0">
+        <div class="cy-report-ruler-unit">mm</div>
+      </div>
+      <div class="cy-div1">
+        <div class="cy-ruler-top">
+          <ruler-view ruler-position="horizontal"></ruler-view>
+        </div>
+        <div class="cy-box">
+          <div class="cy-ruler-left">
+            <ruler-view ruler-position="vertical"></ruler-view>
+          </div>
+          <div class="cy-box-main"></div>
+        </div>
+      </div>
+      <div class="cy-div2">
+        <div class="cy-chart-div">
+          <svg-icon icon-class="bar_chart"/>
+          <span>柱状图</span>
+        </div>
+        <div class="cy-chart-div">
+          <svg-icon icon-class="line_chart"/>
+          <span>折线图</span>
+        </div>
+        <div class="cy-chart-div">
+          <svg-icon icon-class="pie_chart"/>
+          <span>饼状图</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import RulerView from '@/components/RulerView'
 
 export default {
   name: 'index',
+  components: {
+    RulerView
+  },
   data() {
     return {
     }
@@ -20,4 +55,86 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+.cy-report-content {
+  width: 100%;
+  height: 100%;
+  padding-left: 6px;
+  color: #FFFFFF;
+  font-size: 14px;
+  background-color: #2c3e50;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.cy-div0 {
+  width: 30px;
+  height: 30px;
+  background: #767676;
+}
+
+.cy-div1 {
+  width: calc(100% - 90px);
+  height: 100%;
+}
+
+.cy-div2 {
+  width: 60px;
+  height: 100%;
+}
+
+.cy-report-ruler-unit {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  border-right: 1px solid #2c3e50;
+  border-bottom: 1px solid #2c3e50;
+}
+
+.cy-ruler-top {
+  background: #767676;
+  width: 100%;
+  height: 30px;
+}
+
+.cy-box {
+  height: calc(100% - 50px);
+  display: flex;
+  margin-left: -30px;
+  overflow: auto;
+
+  .cy-ruler-left {
+    background: #767676;
+    width: 30px;
+    height: calc(297mm + 20px);
+  }
+
+  .cy-box-main {
+    width: 209mm;
+    height: 297mm;
+    margin: 10px;
+    background: #FFFFFF;
+  }
+}
+
+.cy-chart-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 15px;
+
+  .svg-icon {
+    width: 50px;
+    height: 50px;
+  }
+
+  span {
+    font-size: 12px;
+    margin-top: -5px;
+  }
+}
 </style>