cq

ui/src/views/dashboard/KpiChart.vue

@@ -4,7 +4,7 @@
               :height="height"
               border
               :row-class-name="tableRowClassName"
-              :header-cell-style="headerCellStyle">
+              ><!--:header-cell-style="headerCellStyle"-->
       <el-table-column v-if="lang == 'zh'" :label="$t('KPI名称')" align="center" prop="kpiname" width="180" :formatter="kpinameFormat" />
       <el-table-column v-if="lang == 'en'" :label="$t('KPI名称')" align="center" prop="kpinameen" width="180" :formatter="kpinameenFormat" />
       <el-table-column :label="$t('一季度')" align="center" prop="spring" :show-overflow-tooltip="true"/>
@@ -92,46 +92,46 @@ export default {
       }
       return '';
     },
-    headerCellStyle({ row, rowIndex }) {
+    /*headerCellStyle({ row, rowIndex }) {
       return 'background-color: #0f1325;color: #FFFFFF;border: none'
-    }
+    }*/
   }
 }
 </script>
 
 <style scoped>
-  /deep/.el-table .warning-row {
-    background: #171c33;
+  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(0, 0, 0, 0.01) !important;
   }
 
-  /deep/.el-table .success-row {
-    background: #0f1325;
+  /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    font-size: 12px;
+    height: 10px;
+    background-color: #11285a;
+    color: #ffffff;
   }
 
-  .el-table {
-    background-color: #0f1325;
-    text-align: center;
-    color: #FFFFFF;
-    border: 0px;
+  /deep/.el-table--group, .el-table--border {
+    border: 1px solid #11285a;
   }
 
-  /deep/.el-table__row>td{
-    border: none;
+  /deep/.el-table--group::after, .el-table--border::after, .el-table::before {
+    background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
   }
 
-  .el-table::before {
-    height: 0px;
+  /deep/.el-table--border th, .el-table--border td {
+    border-right: 1px solid #11285a;
   }
 
-  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+  /deep/.el-table--border th, .el-table--border td {
+    border-right: 1px solid #11285a;
   }
-  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
-    background-color: #171c33;
-    border-radius: 3px;
+
+  /deep/.el-table {
+    color: #ffffff;
   }
-  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
-    background-color: #0f1325;
+
+  /deep/.el-table tr {
+    background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
   }
 </style>

ui/src/views/dashboard/NyxhChart.vue

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: '180px'
+      default: '200px'
     },
     year: {
       type: Number,

ui/src/views/dashboard/WarnChart.vue

@@ -28,7 +28,7 @@
       },
       height: {
         type: String,
-        default: '410px'
+        default: '200px'
       }
     },
     data() {

ui/src/views/homepage.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="app-main" style="background: #11285a">
+    <div class="dashboard-editor-container" style="width:100%;height:100%">
+
+      <!--<panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+        <line-chart :chart-data="lineChartData" />
+      </el-row>-->
+
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div>
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter('first')">{{ $t('乙烯产量及OAE') }}</span>
+              <el-dropdown placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                <i class="el-icon-date"></i>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="chooseOne(1)">{{this.searchFormField.year - 2}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseTwo(1)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseThree(1)">{{this.searchFormField.year}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <yx-chart :year=this.yxChooseYear />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div>
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter('second')">{{ $t('芳烃产量及OAE') }}</span>
+              <el-dropdown placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                <i class="el-icon-date"></i>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="chooseOne(2)">{{this.searchFormField.year - 2}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseTwo(2)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseThree(2)">{{this.searchFormField.year}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <qzft-chart :year=this.qzftChooseYear />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="6">
+          <div>
+            <div class="card-head">
+              <span class="card-name">{{ $t('生日提醒') }}</span>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <brith-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div >
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter('fourth')">{{ $t('能源消耗') }}</span>
+              <el-dropdown placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                <i class="el-icon-date"></i>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="chooseOne(3)">{{this.searchFormField.year - 2}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseTwo(3)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseThree(3)">{{this.searchFormField.year}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <nyxh-chart :year=this.nyxhChooseYear />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div>
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter('third')">{{ $t('产能利用率/工厂损失') }}</span>
+              <el-dropdown placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                <i class="el-icon-date"></i>
+              </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="chooseOne(4)">{{this.searchFormField.year - 2}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseTwo(4)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                  <el-dropdown-item @click.native="chooseThree(4)">{{this.searchFormField.year}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <cnlyl-chart :year=this.cnlylChooseYear />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="6">
+          <div >
+            <div class="card-head">
+              <span class="card-name">{{ $t('预警信息') }}</span>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <warn-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div>
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter2('')">{{ $t('能耗管理统计') }}</span>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <nhtj-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="9">
+          <div>
+            <div class="card-head">
+              <span class="card-name" @click="handleRouter3('')">{{ $t('KPI考核') }}</span>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <kpi-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="6">
+          <div>
+            <div class="card-head">
+              <span class="card-name">{{ $t('隐患排查') }}</span>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <yhpc-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import PanelGroup from './dashboard/PanelGroup'
+  import LineChart from './dashboard/LineChart'
+  import YxChart from './dashboard/YxChart'
+  import QzftChart from './dashboard/QzftChart'
+  import BarChart from './dashboard/BarChart'
+  import CnlylChart from './dashboard/CnlylChart'
+  import NyxhChart from './dashboard/NyxhChart'
+  import NhtjChart from './dashboard/NhtjChart'
+  import KpiChart from './dashboard/KpiChart'
+  import YhpcChart from "./dashboard/YhpcChart"
+  import WarnChart from "./dashboard/WarnChart"
+  import BrithChart from "./dashboard/BrithChart";
+
+  const lineChartData = {
+    newVisitis: {
+      expectedData: [100, 120, 161, 134, 105, 160, 165],
+      actualData: [120, 82, 91, 154, 162, 140, 145]
+    },
+    messages: {
+      expectedData: [200, 192, 120, 144, 160, 130, 140],
+      actualData: [180, 160, 151, 106, 145, 150, 130]
+    },
+    purchases: {
+      expectedData: [80, 100, 121, 104, 105, 90, 100],
+      actualData: [120, 90, 100, 138, 142, 130, 130]
+    },
+    shoppings: {
+      expectedData: [130, 140, 141, 142, 145, 150, 160],
+      actualData: [120, 82, 91, 154, 162, 140, 130]
+    }
+  }
+
+  export default {
+    name: 'Index',
+    components: {
+      PanelGroup,
+      LineChart,
+      YxChart,
+      QzftChart,
+      BarChart,
+      CnlylChart,
+      NyxhChart,
+      NhtjChart,
+      KpiChart,
+      YhpcChart,
+      WarnChart,
+      BrithChart
+    },
+    data() {
+      return {
+        lineChartData: lineChartData.newVisitis,
+        heightObj: {
+          height: document.body.clientHeight -50 + "px"
+        },
+        // 获取当前年份
+        searchFormField: {
+          year: this.getNowTime(),
+        },
+        yxChooseYear: 0,
+        qzftChooseYear: 0,
+        nyxhChooseYear: 0,
+        cnlylChooseYear: 0,
+      }
+    },
+    created() {
+      this.$i18n.locale = 'zh'
+      this.$store.dispatch('app/setLanguage', 'zh')
+    },
+    methods: {
+      /** 获取当前年份 */
+      getNowTime() {
+        var now = new Date();
+        var year = now.getFullYear(); //得到年份
+        var defaultDate = `${year}`;
+        defaultDate = `${year}`
+        return defaultDate;
+        this.$set(this.searchFormField, "year", defaultDate);
+      },
+      handleSetLineChartData(type) {
+        this.lineChartData = lineChartData[type]
+      },
+      handleRouter(type){
+        this.$router.push({ path: '/production/monthplan', query: { type: type }});
+      },
+      handleRouter2(type){
+        this.$router.push({ path: '/production/lbnhjstj', query: { type: type }});
+      },
+      handleRouter3(type){
+        this.$router.push({ path: '/ehs/ehskpinew', query: { type: type }});
+      },
+
+      //变换年份
+      chooseOne (index) {
+        if (index === 1) {
+          this.yxChooseYear = this.searchFormField.year - 2;
+        }else if (index === 2) {
+          this.qzftChooseYear = this.searchFormField.year - 2;
+        }else if (index === 3) {
+          this.nyxhChooseYear = this.searchFormField.year - 2;
+        }else if (index === 4) {
+          this.cnlylChooseYear = this.searchFormField.year - 2;
+        }
+      },
+      chooseTwo (index) {
+        if (index === 1) {
+          this.yxChooseYear = this.searchFormField.year - 1;
+        }else if (index === 2) {
+          this.qzftChooseYear = this.searchFormField.year - 1;
+        }else if (index === 3) {
+          this.nyxhChooseYear = this.searchFormField.year - 1;
+        }else if (index === 4) {
+          this.cnlylChooseYear = this.searchFormField.year - 1;
+        }
+      },
+      chooseThree (index) {
+        if (index === 1) {
+          this.yxChooseYear = this.searchFormField.year - 0;
+        }else if (index === 2) {
+          this.qzftChooseYear = this.searchFormField.year - 0;
+        }else if (index === 3) {
+          this.nyxhChooseYear = this.searchFormField.year - 0;
+        }else if (index === 4) {
+          this.cnlylChooseYear = this.searchFormField.year - 0;
+        }
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dashboard-editor-container {
+    padding: 10px;
+    background-color: #182e62;
+    position: relative;
+
+    .chart-wrapper {
+      background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
+      padding: 10px 0 0;
+      margin-bottom: 10px;
+    }
+  }
+
+  /deep/.el-dropdown {
+    color: #ffffff;
+    margin-right: 10px;
+    margin-top: 2px;
+  }
+
+  .card-time {
+    float: right;
+  }
+
+  .card-name {
+    cursor: pointer;
+    font-size: 12px;
+    font-weight:bold;
+    color: #ffffff;
+    padding: 2px 0 2px 5px;
+  }
+
+  .card-head {
+    background: rgba(253, 245, 245, 0) linear-gradient(to right, #4a7cf9, #628fff) repeat scroll 0% 0%;
+  }
+
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
+  }
+
+</style>

ui/src/views/index.vue

@@ -1,11 +1,13 @@
 <template>
 
-  <bcchome v-if="homeType== 1"></bcchome>
+  <!--<bcchome v-if="homeType== 1"></bcchome>-->
+  <homepage v-if="homeType== 1"></homepage>
   <semshome v-else-if="homeType == 2"></semshome>
 </template>
 
 <script>
   import bcchome from "./bccHome";
+  import homepage from "./homepage";
   import semshome from "./sems/specanalysis/index";
   import dayjs from "dayjs";
   import '@/common/flexible.js';
@@ -18,6 +20,7 @@
     },
     components: {
       bcchome,
+      homepage,
       semshome
     },
     mounted() {