-修改BYX首页

ui/src/views/byxhome.vue

@@ -1,328 +1,120 @@
 <template>
-  <div class="app-main" style="background: #11285a">
-    <div class="dashboard-editor-container" style="width:100%;height:100%">
+  <div class="dashboard-editor-container">
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('程序状态') }}</span>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('培训状态') }}</span>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+<!--        <div class="chart-wrapper">-->
+<!--          <bar-chart />-->
+<!--        </div>-->
+<!--      </el-col>-->
+      <el-col :xs="24" :sm="24" :lg="8">
+        <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 style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
 
-      <!--<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]
-    }
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/byx/RaddarChart'
+import PieChart from './dashboard/byx/PieChart'
+import BarChart from './dashboard/BarChart'
+import BrithChart from "./dashboard/byx/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;
-        }
-      },
+}
+
+export default {
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    BrithChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
     }
   }
+}
 </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;
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
+}
 
-  .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;
   }
-
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
-  }
-  body {
-    font-size: 12px !important;
-  }
-
+}
 </style>

ui/src/views/dashboard/BarChart.vue

@@ -22,7 +22,7 @@ export default {
     },
     height: {
       type: String,
-      default: '200px'
+      default: '300px'
     }
   },
   data() {

ui/src/views/dashboard/byx/BrithChart.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <div class="text-container" :style="{height:height,width:width}">
+      <ul class="allBirth">
+        <li v-for="(item,index) in brithstaffmgrList" class="info">
+          <svg-icon icon-class="dangao" class="dangao"></svg-icon>
+          <span style="padding-left: 20px">{{item.name}}</span>
+          <span style="padding-left: 20px">{{item.birthday}}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { listBrithstaffmgr } from "@/api/plant/brithstaffmgr";
+
+  const totalDuration = 2000;
+
+  export default {
+    name: "BrithChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '210px'
+      }
+    },
+    data() {
+      return {
+        // 查询参数
+        queryParams: {},
+        // 生日提醒表格数据
+        brithstaffmgrList: [],
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 生日提醒统计列表 */
+      getList() {
+        this.loading = true;
+        listBrithstaffmgr(this.queryParams).then(response => {
+          this.brithstaffmgrList = response.rows;
+          //判断是否需要滚动
+          if (this.brithstaffmgrList.length > 4) {
+            //设置文字滚动一轮时间
+            let elem = document.querySelector('.allBirth');
+            let state = elem.style['animation'];
+            let time = this.brithstaffmgrList.length * 2
+            elem.style['animation'] = 'myMove ' + time + 's linear infinite';
+            let state1 = elem.style['animation-fill-mode'];
+            elem.style['animation-fill-mode'] = 'forwards';
+            //设置文字无缝滚动高度
+            let param = this.brithstaffmgrList.length * 50
+            let myFirstkeyframes = "@keyframes myMove{0% {transform: translateY(200px);}100% {transform: translateY(-" + param +"px);}}";
+            let style = document.createElement("style");
+            style.setAttribute("type", "text/css");
+            document.head.appendChild(style);
+            const sheet = style.sheet;
+            sheet.insertRule(myFirstkeyframes, 0);
+            this.loading = false;
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style>
+  .text-container {
+    line-height: 30px;
+    overflow: hidden;
+  }
+
+  .dangao {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .info {
+    color: #ffffff;
+    font-weight:bold;
+    list-style: none;
+    display: flex;
+    margin: 10px 0 0 0;
+    align-items: center;     /* 垂直居中 */
+    border-radius:5px 5px 5px 5px ;
+    border: 2px solid rgba(41, 107, 155, 0.71);
+    background-color: #135b976e;
+  }
+
+  .allBirth {
+    margin: -10px 0 0 0;
+    padding: 0 20px 0 20px;
+    /*animation: myMove 10s linear infinite;
+    animation-fill-mode: forwards;*/
+  }
+
+  /*文字无缝滚动*/
+  /*@keyframes myMove {
+    0% {
+      transform: translateY(200px);
+    }
+    100% {
+      transform: translateY(-300px);
+    }
+  }*/
+
+  /*文字停顿滚动*/
+  @keyframes myMove2 {
+    0% {
+      transform: translateY(0);
+    }
+    10% {
+      transform: translateY(-30px);
+    }
+    20% {
+      transform: translateY(-30px);
+    }
+    30% {
+      transform: translateY(-60px);
+    }
+    40% {
+      transform: translateY(-60px);
+    }
+    50% {
+      transform: translateY(-90px);
+    }
+    60% {
+      transform: translateY(-90px);
+    }
+    70% {
+      transform: translateY(-120px);
+    }
+    80% {
+      transform: translateY(-120px);
+    }
+    90% {
+      transform: translateY(-150px);
+    }
+    100% {
+      transform: translateY(-150px);
+    }
+  }
+
+  .info span {
+    padding-top: 5px;
+  }
+</style>

ui/src/views/dashboard/byx/PieChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '210px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: ['10%', '55%'],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

ui/src/views/dashboard/byx/RaddarChart.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '210px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>