LY

ui/src/views/DangerCloseChart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="app-container-Dangerclose">
+    <div id="DangercloseChart" :style="{height:height,width:width}"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/theme/macarons')
+
+  const animationDuration = 6000
+
+  export default {
+    name: "DangerCloseChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      year: {
+        type: Number,
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        /*this.queryParams.year = this.searchFormField.year;*/
+        this.getList()
+      })
+    },
+    methods: {
+      getList() {
+        this.initChart()
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('DangercloseChart'))
+
+        this.chart.setOption({
+          color: ['#4176f9', '#0848e9', '#0740cf', '#0635aa', '#052987'],
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '1%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            top: '5%',
+            left: 'center',
+            textStyle:{
+              color: '#ffffff'//字体颜色
+            }
+          },
+          series: [
+            {
+              name: this.$t('访问来源'),
+              type: 'pie',
+              radius: ['40%', '75%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+
+                borderWidth: 2
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '30',
+                  color: '#ffffff',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {value: 1048, name: this.$t('按期关闭')},
+                {value: 735, name: this.$t('逾期关闭')},
+                {value: 580, name: this.$t('逾期开项')},
+                {value: 484, name: this.$t('未逾期开项')}
+              ]
+            }
+          ]
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/DangerNumChart.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="app-container-Dangernum">
+    <div id="DangernumChart" :style="{height:height,width:width}"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/theme/macarons')
+
+  const animationDuration = 6000
+
+  export default {
+    name: "DangerNumChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      year: {
+        type: Number,
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        /*this.queryParams.year = this.searchFormField.year;*/
+        this.getList()
+      })
+    },
+    methods: {
+      getList() {
+        this.initChart()
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('DangernumChart'))
+
+        this.chart.setOption({
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '13%',
+            containLabel: true
+          },
+
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['line', 'bar'],
+            textStyle:{
+              color: '#ffffff'//字体颜色
+            }
+          },
+          xAxis: {
+            data: [2021-3-6,2021-3-7,2021-3-8,2021-3-9,2021-3-10,2021-3-11,2021-3-12,2021-3-13,2021-3-14,2021-3-15,2021-3-16,2021-3-17,2021-3-18,2021-3-19,2021-3-20,2021-3-21,2021-3-22,2021-3-23,2021-3-24,2021-3-25],
+            axisLine: {
+              lineStyle: {
+                color: '#ccc'
+              }
+            }
+          },
+          yAxis: {
+            splitLine: {show: false},
+            axisLine: {
+              lineStyle: {
+                color: '#ccc'
+              }
+            }
+          },
+          series: [{
+            name: 'line',
+            type: 'line',
+            smooth: true,
+            showAllSymbol: true,
+            symbol: 'emptyCircle',
+            symbolSize: 15,
+            data: [138.83729599102787,206.01287341873916,153.8822068768843,168.10816924284754,94.23637442817387,216.68651856725197,225.06602494624914,140.25657499532463,97.43329095023562,242.6092944122001,106.73225462321487,163.78524496465718,205.08435793458443,150.03555258986975,118.53532279465551,221.74159944137992,247.75571045211296,280.89661444214255,59.53521809292747,248.30845959407912]
+          }, {
+            name: 'bar',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              barBorderRadius: 5,
+              color: new this.echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  {offset: 0, color: '#14c8d4'},
+                  {offset: 1, color: '#6be5ea'}
+                ]
+              )
+            },
+            data: [41.868199836943276,184.7676430861723,31.76715067530185,166.40048922039688,55.38865478743573,35.123523665656144,117.62860585117996,77.91372506738709,19.92822195908266,103.95617481797035,59.59380792270639,31.795152336229293,151.04067931729793,137.67636308967127,113.0952640593935,80.6589351077684,92.01010823528715,135.0426463664803,1.3723633870805774,178.42978684367003]
+          }, {
+            name: 'line',
+            type: 'bar',
+            barGap: '-100%',
+            barWidth: 10,
+            itemStyle: {
+              color: new this.echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  {offset: 0, color: 'rgba(20,200,212,0.5)'},
+                  {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
+                  {offset: 1, color: 'rgba(20,200,212,0)'}
+                ]
+              )
+            },
+            z: -12,
+            data: [138.83729599102787,206.01287341873916,153.8822068768843,168.10816924284754,94.23637442817387,216.68651856725197,225.06602494624914,140.25657499532463,97.43329095023562,242.6092944122001,106.73225462321487,163.78524496465718,205.08435793458443,150.03555258986975,118.53532279465551,221.74159944137992,247.75571045211296,280.89661444214255,59.53521809292747,248.30845959407912]
+          }, {
+            name: 'dotted',
+            type: 'pictorialBar',
+            symbol: 'rect',
+            itemStyle: {
+              color: '#0f375f'
+            },
+            symbolRepeat: true,
+            symbolSize: [12, 4],
+            symbolMargin: 1,
+            z: -10,
+            data: [138.83729599102787,206.01287341873916,153.8822068768843,168.10816924284754,94.23637442817387,216.68651856725197,225.06602494624914,140.25657499532463,97.43329095023562,242.6092944122001,106.73225462321487,163.78524496465718,205.08435793458443,150.03555258986975,118.53532279465551,221.74159944137992,247.75571045211296,280.89661444214255,59.53521809292747,248.30845959407912]
+          }]
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/DangerStatusChart.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="app-container-Dangerstatus">
+    <div id="DangerstatusChart" :style="{height:height,width:width}"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/theme/macarons')
+
+  const animationDuration = 6000
+
+  export default {
+    name: "DangerStatusChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      year: {
+        type: Number,
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        /*this.queryParams.year = this.searchFormField.year;*/
+        this.getList()
+      })
+    },
+    methods: {
+      getList() {
+        this.initChart()
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('DangerstatusChart'))
+
+        this.chart.setOption({
+          color: ['#4a7cf9', '#6be5ea', '#fff4f4'],
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '13%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: [this.$t('开项数量'),this.$t('关闭数量')],
+            textStyle:{
+              color: '#ffffff'//字体颜色
+            },
+          },
+          calculable: true,
+          xAxis: [
+            {
+              type: 'category',
+              data: [this.$t('1月'),this.$t('2月'),this.$t('3月'),this.$t('4月'),this.$t('5月'),this.$t('6月'),this.$t('7月'),this.$t('8月'),this.$t('9月'),this.$t('10月'),this.$t('11月'),this.$t('12月')]
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          series: [
+            {
+              name: this.$t('开项数量'),
+              type: 'bar',
+              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162, 32.6, 20.0, 6.4, 3.3],
+              markPoint: {
+                data: [
+                  {type: 'max', name: this.$t('最大值')},
+                  {type: 'min', name: this.$t('最小值')}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: this.$t('平均值')}
+                ]
+              }
+            },
+            {
+              name: this.$t('关闭数量'),
+              type: 'bar',
+              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182, 48.7, 18.8, 6.0, 2.3],
+              markPoint: {
+                data: [
+                  {name: this.$t('年最高'), value: 182.2, xAxis: 7, yAxis: 183},
+                  {name: this.$t('年最低'), value: 2.3, xAxis: 11, yAxis: 3}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: this.$t('平均值')}
+                ]
+              }
+            }
+          ]
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/OverdueCloseChart.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="app-container-Overdueclose">
+    <div id="OverduecloseChart" :style="{height:height,width:width}"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/theme/macarons')
+
+  const animationDuration = 6000
+
+  export default {
+    name: "OverdueCloseChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      year: {
+        type: Number,
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        /*this.queryParams.year = this.searchFormField.year;*/
+        this.getList()
+      })
+    },
+    methods: {
+      getList() {
+        this.initChart()
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('OverduecloseChart'))
+
+        this.chart.setOption({
+          color: ['#4176f9', '#0848e9', '#0740cf', '#0635aa', '#052987', '#042372'],
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '13%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          label: {
+            color: '#ffffff'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+            textStyle:{
+              color: '#ffffff'//字体颜色
+            }
+          },
+          series: [
+            {
+              name: this.$t('访问来源'),
+              type: 'pie',
+              radius: '75%',
+              data: [
+                {value: 1048, name: this.$t('一般隐患')},
+                {value: 735, name: this.$t('普通隐患')},
+                {value: 580, name: this.$t('重大隐患')}
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/SortNumChart.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="app-container-Sortnum">
+    <div id="SortnumChart" :style="{height:height,width:width}"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/theme/macarons')
+
+  const animationDuration = 6000
+
+  export default {
+    name: "SortNumChart",
+    props: {
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      year: {
+        type: Number,
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        /*this.queryParams.year = this.searchFormField.year;*/
+        this.getList()
+      })
+    },
+    methods: {
+      getList() {
+        this.initChart()
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('SortnumChart'))
+
+        this.chart.setOption({
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '1%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          visualMap: {
+            show: false,
+            min: 80,
+            max: 600,
+            inRange: {
+              colorLightness: [0, 1]
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '80%',
+              center: ['50%', '50%'],
+              data: [
+                {value: 335, name: this.$t('会议中的EHS开项')},
+                {value: 310, name: this.$t('5S管理')},
+                {value: 274, name: this.$t('风险查勘')},
+                {value: 235, name: this.$t('现场EHS检查')},
+                {value: 400, name: this.$t('政府检查')}
+              ].sort(function (a, b) { return a.value - b.value; }),
+              roseType: 'radius',
+              label: {
+                color: '#ffffff'
+              },
+              labelLine: {
+                lineStyle: {
+                  color: 'rgba(255, 255, 255, 0.3)'
+                },
+                smooth: 0.2,
+                length: 10,
+                length2: 20
+              },
+              itemStyle: {
+                color: '#4a7cf9',
+                shadowBlur: 200,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
+
+              animationType: 'scale',
+              animationEasing: 'elasticOut',
+              animationDelay: function (idx) {
+                return Math.random() * 200;
+              }
+            }
+          ]
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/index.vue

@@ -1,209 +1,221 @@
 <template>
-    <div id="front">
-      <dv-loading v-if="loading">Loading...</dv-loading>
-      <div v-else class="host-body bg">
-        <div class="d-flex jc-center">
-          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
-          <div class="d-flex jc-center">
-            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
-            <div class="title">
-              <span class="title-text">BCC 生产运行总览</span>
-              <dv-decoration-6
-                class="title-bototm"
-                :reverse="true"
-                :color="['#50e3c2', '#67a1e5']"
-                style="width:3.125rem;height:.1rem;"
-              />
-            </div>
-            <dv-decoration-8
-              :reverse="true"
-              :color="['#568aea', '#000000']"
-              style="width:2.5rem;height:.625rem;"
-            />
+  <div class="app-main" style="background: #11285a">
+    <div class="dashboard-editor-container" style="width:100%;height:100%">
+      <el-row :gutter="10">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <div style="text-align: center">
+            <div style="color: white;font-size: 25px;cursor:default">开票系统</div>
+          </div>
+        </el-col>
+      </el-row>
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div >
+          <div class="card-head">
+            <span class="card-name">{{ $t('开票分类比例') }}</span>
           </div>
-          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
         </div>
-
-        <!-- 第二行 -->
-        <div class="d-flex jc-between px-2">
-          <div class="d-flex" style="width: 40%">
-            <div
-              class="react-right ml-4"
-              style="width: 3.25rem; text-align: left;background-color: #0f1325;"
-              @click="changeDashboard(1)"
-            >
-              <span class="react-before"></span>
-              <span class="text"></span>
-            </div>
-            <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(2)">
-              <span class="text colorBlue"></span>
-            </div>
-            <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(3)">
-              <span class="text colorBlue"></span>
-            </div>
+        <div class="chart-wrapper">
+          <sort-num-chart :year=this.nyxhChooseYear />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('开票数量比例') }}</span>
           </div>
-          <div style="width: 40%" class="d-flex">
-            <div class="react-left bg-color-blue mr-3">
-              <span class="text fw-b">北京时间：</span>
-            </div>
-            <div
-              class="react-left mr-4"
-              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
-            >
-              <span class="react-after"></span>
-              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
-            </div>
+        </div>
+        <div class="chart-wrapper">
+          <overdue-close-chart :year=this.cnlylChooseYear />
+        </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">
+          <danger-close-chart />
+        </div>
+      </el-col>
+    </el-row>
 
-        <div class="body-box" v-if="dashboard === 1">
-          <div class="three-content-box">
-            <div>
-              <material-balance />
-            </div>
-            <div>
-              <chart-right />
-            </div>
-          </div>
-          <div class="three-bototm-box">
-            <dv-border-box-12>
-              <nap-tank />
-            </dv-border-box-12>
-            <dv-border-box-12>
-              <ethylene-tank />
-            </dv-border-box-12>
-            <dv-border-box-12>
-              <acrylic-tank />
-            </dv-border-box-12>
-            <dv-border-box-12>
-              <product-tank />
-            </dv-border-box-12>
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="24" :lg="12">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('开票数量对比') }}</span>
           </div>
         </div>
+        <div class="chart-wrapper">
+          <danger-status-chart />
         </div>
-
-        <div class="body-box" v-if="dashboard === 2">
-          <!-- 第三行数据 -->
-          <div>
-            <front-two />
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="12">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('开票关闭数') }}</span>
           </div>
         </div>
+        <div class="chart-wrapper">
+          <danger-num-chart />
+        </div>
+      </el-col>
+    </el-row>
 
-        <div class="body-box" v-if="dashboard === 3">
-          <!-- 第三行数据 -->
-          <div class="frist-content-box">
-            <div>
-              <dv-border-box-12>
-                <center-right2 />
-              </dv-border-box-12>
-            </div>
-            <div>
-              <dv-border-box-12>
-                <center-left2 />
-              </dv-border-box-12>
-            </div>
-            <!-- 中间 -->
-            <div>
-              <center-left1 />
-            </div>
-            <div>
-              <dv-border-box-13>
-                <center-right1 />
-              </dv-border-box-13>
-            </div>
-          </div>
-          <!-- 第四行数据 -->
-          <div class="bototm-box">
-            <dv-border-box-13>
-              <bottom-left />
-            </dv-border-box-13>
-            <dv-border-box-12>
-              <bottom-right />
-            </dv-border-box-12>
-          </div>
-      </div>
+  </div>
   </div>
 </template>
 
 <script>
-  import centerLeft1 from "./front/centerLeft1";
-  import centerLeft2 from "./front/centerLeft2";
-  import centerRight1 from "./front/centerRight1";
-  import centerRight2 from "./front/centerRight2";
-  import center from "./front/center";
-  import bottomLeft from "./front/bottomLeft";
-  import bottomRight from "./front/bottomRight";
-  import frontTwo from "./front/frontTwo";
-  import materialBalance from "./front/materialBalance";
-  import chartRight from "./front/ChartRight";
-  import napTank from "./front/napTank";
-  import ethyleneTank from "./front/ethyleneTank";
-  import acrylicTank from "./front/acrylicTank";
-  import productTank from "./front/productTank";
-  import dayjs from "dayjs";
-  import '@/common/flexible.js';
+import SortNumChart from "./SortNumChart";
+import DangerStatusChart from "./DangerStatusChart";
+import DangerNumChart from "./DangerNumChart";
+import DangerCloseChart from "./DangerCloseChart";
+import OverdueCloseChart from "./OverdueCloseChart";
 
-  export default {
-    data() {
-      return {
-        loading: true,
-        dashboard: 1,
-        dateDay: null,
-        dateYear: null,
-        dateWeek: null,
-        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-        timer:null
-      };
+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: 'Dangerstatistics',
+  components: {
+    SortNumChart,
+    DangerStatusChart,
+    DangerNumChart,
+    DangerCloseChart,
+    OverdueCloseChart
+  },
+  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);
     },
-    components: {
-      centerLeft1,
-      centerLeft2,
-      centerRight1,
-      centerRight2,
-      center,
-      bottomLeft,
-      bottomRight,
-      frontTwo,
-      materialBalance,
-      chartRight,
-      napTank,
-      ethyleneTank,
-      acrylicTank,
-      productTank
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
     },
-    mounted() {
-      this.cancelLoading();
-      this.timer = setInterval(()=>{
-        const date= dayjs(new Date());
-        this.dateDay = date.format('HH:mm:ss');
-        this.dateYear = date.format('YYYY年MM月DD日');
-        this.dateWeek = date.format(this.weekday[date.day()]);
-      },1000);
+    handleRouter(type){
+      this.$router.push({ path: '/production/monthplan', query: { type: type }});
     },
-    beforeDestroy(){
-      if(this.timer){
-        clearInterval(this.timer);
+    //变换年份
+    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;
       }
     },
-    methods: {
-      cancelLoading() {
-        setTimeout(() => {
-          this.loading = false;
-        }, 500);
-      },
-      changeDashboard(val) {
-        if (val === 1) {
-          this.dashboard = 1
-        }else if (val === 2) {
-          this.dashboard = 2
-        }else if (val === 3) {
-          this.dashboard = 3
-        }
+    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>