newcpms/ui/src/views/index2.vue

<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-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>