.env.dev

@@ -1,8 +1,8 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-06-11 08:33:19
+ # @LastEditTime: 2024-06-17 09:01:32
- # @LastEditors: zhp
+ # @LastEditors: DY
  # @Description:
 ###
 # 开发环境配置
@@ -14,6 +14,8 @@ VUE_APP_TITLE = 发电玻璃智能管控平台
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://192.168.1.70:30307'
 VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# 郭
+# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
 # sara
 # VUE_APP_BASE_API = 'http://192.168.1.63:48080'
 # 张一丁

src/assets/icons/svg/factoryWorkOrder.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 15</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-714.000000, -131.000000)">
+            <g id="编组-15" transform="translate(714.000000, 131.000000)">
+                <g id="编组-13备份" fill="#0B58FF" opacity="0.227236793">
+                    <rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect>
+                </g>
+                <g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect>
+                    <path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/workProcess.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工单管理" transform="translate(-474.000000, -131.000000)">
+            <g id="编组-13" transform="translate(474.000000, 131.000000)">
+                <rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect>
+                <g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/produce/target/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-06-04 16:45:52
+ * @LastEditTime: 2024-06-07 14:44:22
  * @LastEditors: DY
  * @Description:
 -->
@@ -170,6 +170,11 @@
               <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
             </el-form-item>
           </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准组件转化效率" prop="componentConversionEfficiency">
+              <el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-divider></el-divider>
 
@@ -293,7 +298,8 @@ export default {
         bipvInsideMaterialCost: undefined,
         bipvOeeMaterialCost: undefined,
         bipvComprehensiveMaterialCost: undefined,
-        molybdenumElectrodeInput: undefined
+        molybdenumElectrodeInput: undefined,
+        componentConversionEfficiency: undefined
       },
       // materialList: [],
       dataRule: {

src/views/produce/target/detail-or-updata.vue

@@ -1,14 +1,15 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-04 16:54:46
+ * @LastEditTime: 2024-06-14 10:41:23
  * @LastEditors: DY
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
+  <el-drawer class="drawer" :visible.sync="visible" size="70%" @closed="$emit('destroy')">
     <small-title slot="title" :no-padding="true">
-      {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
+      <!-- {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} -->
+      生产目标详情
     </small-title>
     <div class="detailBox">
       <el-row :gutter="24">
@@ -113,6 +114,10 @@
           <p class="title">标准组件平均功率(W)</p>
           <p class="text">{{ dataForm.componentAveragePower }}</p>
         </el-col>
+        <el-col :span="6">
+          <p class="title">标准组件转化效率</p>
+          <p class="text">{{ dataForm.componentConversionEfficiency }}</p>
+        </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
         {{ 'BIPV产品' }}
@@ -197,35 +202,9 @@ export default {
       ],
       sectionList: [],
       visible: false,
-      dataForm: {
+      dataForm: {}
-        id: undefined,
-        logTime: undefined,
-        source: 1,
-        detId: undefined,
-        workOrderId: null,
-        teamId: undefined,
-        num: undefined,
-        lineId: undefined,
-        description: undefined,
-        // description: undefined,
-        remark: undefined,
-      },
-      // materialList: [],
-      dataRule: {
-        // materialId: [{ required: true, message: "", trigger: "blur" }],
-        workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
-        num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
-        detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
-
-        logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
-      }
     };
   },
-  mounted() {
-    this.getDict()
-    console.log('我看看', this.dataForm)
-    // this.getCurrentTime()
-  },
   methods: {
     init(id) {
       this.visible = true
@@ -235,102 +214,7 @@ export default {
           this.dataForm = res.data
         })
       }
-    },
+    }
-    // getCurrentTime() {
-    //   // new Date().Format("yyyy-MM-dd HH:mm:ss")
-    //   this.dataForm.logTime = new Date()
-    //   // this.dataForm.logTime = year + "-" + month + "-" + day;
-    //   console.log(this.dataForm.logTime);
-    // },
-    async getDict() {
-    //   // 物料列表
-    //   const res = await getList()
-    //   this.typeList = res.data
-    //   getWorkOrderList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.workOrderList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getLineList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.lineList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getDetList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.detList = res.data.map((item) => {
-    //       return {
-    //         name: item.content,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    //   getTeamList().then((res) => {
-    //     console.log(res);
-    //     // console.log(response);
-    //     this.teamList = res.data.map((item) => {
-    //       return {
-    //         name: item.name,
-    //         id: item.id
-    //       }
-    //     })
-    //     // console.log(this.formConfig[0].selectOptions);
-    //     // this.listQuery.total = response.data.total;
-    //   })
-    // },
-    // async getWorksectionById(lineId) {
-    //   if (lineId) {
-    //     const { code, data } = await this.$axios({
-    //       url: '/base/core-workshop-section/listByParentId',
-    //       method: 'get',
-    //       params: {
-    //         id: lineId,
-    //       },
-    //     });
-    //     if (code == 0) {
-    //       console.log(data)
-    //       this.sectionList = data.map((item) => {
-    //         return {
-    //           name: item.name,
-    //           id: item.id,
-    //         };
-    //       });
-    //     }
-    //   } else {
-    //     this.$axios({
-    //       url: '/base/core-workshop-section/listAll',
-    //       method: 'get',
-    //       // params: {
-    //       //   id: lineId,
-    //       // },
-    //     }).then((res) => {
-    //       // console.log(data)
-    //       this.sectionList = res.data.map((item) => {
-    //         return {
-    //           name: item.name,
-    //           id: item.id,
-    //         };
-    //       });
-    //     })
-    //   }
-    },
   },
 };
 </script>

src/views/produce/workOrder/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-06-07 14:15:00
+ * @LastEditTime: 2024-06-14 10:55:21
  * @LastEditors: DY
  * @Description:
 -->
@@ -308,7 +308,7 @@ export default {
       this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
       this.equipmentLineChart.setOption({
         title: {
-          text: '在制品分布',
+          text: '待制品分布',
           left: 'center'
           // subtext: 'Fake Data'
         },
@@ -339,7 +339,7 @@ export default {
           {
             data: yAxisList,
             type: 'bar',
-            barWidth: '40px'
+            barWidth: '50%'
           }
         ]
       }, true)
@@ -351,6 +351,9 @@ export default {
           text: '历史趋势',
           left: 'center' // 设置标题居中
         },
+        tooltip: {
+          trigger: 'item'
+        },
         xAxis: {
           type: 'category',
           data: xAxisList,

src/views/produce/workOrder/index.vue

@@ -1,28 +1,56 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-06-07 10:35:48
+ * @LastEditTime: 2024-06-14 11:04:04
  * @LastEditors: DY
  * @Description:
 -->
 <template>
   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
-    <div class="app-container" style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
+    <el-row :gutter="10">
-      <p style="margin-bottom: 0">数据概览</p>
+      <el-col :span="4">
+        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
+        <!-- <p style="margin-bottom: 0">数据概览</p> -->
           <div class="view">
-        <div v-for="(item, index) in data" :key="index">
+            <div style="padding: 10px 0; width: 100%">
-          <p style="color: rgb(194,128,255)">{{ item }}</p>
+              <div class="topDiv">
-          <p>{{ index }}</p>
+                <div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div>
+                <div class="centerDiv">
+                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span>
+                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span>
+                </div>
+                <svg-icon icon-class="workProcess" style="width: 26px; height: 26px" />
               </div>
             </div>
           </div>
-    <div class="app-container" style="margin-top: 8px; height: auto;">
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
+        <!-- <p style="margin-bottom: 0">数据概览</p> -->
+          <div class="view">
+            <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
+              <div class="topDiv">
+                <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
+                <div class="centerDiv">
+                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
+                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
+                </div>
+                <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- <div class="app-container" style="margin-top: 8px; height: auto;">
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+    </div> -->
+    <div class="app-container" style="margin-top: 8px;flex-grow: 1;">
+      <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
-    </div>
-    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
-      <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" />
       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
-        :table-data="tableData">
+        :table-data="tableData" :max-height="tableH">
         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
           :method-list="tableBtn" @clickBtn="handleClick" />
       </base-table>
@@ -43,6 +71,7 @@ import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/or
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
+import tableHeightMixin from "@/mixins/tableHeightMixin";
 // import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
 import AddOrUpdate from './add-or-updata';
@@ -53,9 +82,13 @@ import { publicFormatter } from "@/utils/dict";
 // import * as XLSX from 'xlsx'
 export default {
   components: { lineChart, AddOrUpdate },
-  mixins: [basicPage],
+  mixins: [basicPage, tableHeightMixin],
 	data() {
     return {
+      factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'],
+      factoryNum: [0, 0, 0, 0, 0, 0, 0],
+      inputNum: 0,
+      heightNum: 210,
       factoryList,
       factoryArray,
       listQuery: {
@@ -179,6 +212,8 @@ export default {
         {
           prop: 'workOrderNumber',
           label: '工单号',
+          minWidth: 120,
+          showOverflowtooltip: true
           // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
         },
         {
@@ -211,8 +246,8 @@ export default {
         {
           prop: 'orderStatus',
           label: '工单状态',
-          filter: publicFormatter('workorder_status')
+          // filter: publicFormatter('workorder_status')
-          // filter: (val) => ['未开始', '生产中', '已完成'][val],
+          filter: (val) => ['未开始', '生产中', '已完成'][val],
         },
         {
           prop: 'startTime',
@@ -229,15 +264,15 @@ export default {
       ],
       tableData: [],
       xAxis: [],
-      lineData: {},
+      lineData: {}
-      data: {}
+      // data: {}
 			// proLineList: [],
 			// all: {}
 		};
   },
 	created() {
     const today = new Date()
-    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
+    const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
     this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
     this.formConfig[2].defaultSelect = this.listQuery.time
 	},
@@ -247,8 +282,19 @@ export default {
   methods: {
     getOverView() {
       getOverView().then(res => {
-        this.data = res.data
+        // this.data = res.data
-        console.log('aa', res.data)
+        if (res.code === 0) {
+          for(const i in res.data) {
+            if (i === '在制工单数量') {
+              this.inputNum = res.data[i]
+            } else {
+              const index = this.factorys.indexOf(i)
+              if (index > -1) {
+                this.factoryNum[index] = res.data[i]
+              }
+            }
+          }
+        }
       })
     },
     otherMethods(val) {
@@ -317,10 +363,18 @@ export default {
 </script>
 
 <style scoped>
-/* .blueTip { */
+.centerDiv {
-	/* padding-bottom: 10px; */
+  display: flex;
-/* } */
+  flex-direction: column;
-/* .blueTi */
+  justify-content: flex-start;
+}
+.topDiv {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  flex: 1;
+}
 .view {
   display: flex;
   justify-content: space-around;
@@ -342,7 +396,7 @@ export default {
   background-color: #fff;
   border-radius: 4px;
   padding: 16px 16px 0;
-  height: calc(100vh - 134px);
+  height: calc(100vh - 80px);
   overflow: auto;
 }
 </style>