|
|
@@ -4,8 +4,13 @@
|
|
|
<el-col :span="12">
|
|
|
<div class="generalTitle"> 现代牧业设备管理系统 </div>
|
|
|
</el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="date"> {{ row1.date }} </div>
|
|
|
+ <el-col :span="6">
|
|
|
+ <!-- <div class="date"> {{ row1.date }} </div> -->
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" justify="end">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-date-picker popper-class="jlpMySelectPopper" style="width: 100%;" v-model="row1.month" type="monthrange"range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" class="month" :clearable="false"> </el-date-picker>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
@@ -188,13 +193,15 @@ import { parseTime } from '@/utils/index.js'
|
|
|
import echarts from 'echarts'
|
|
|
import 'echarts/map/js/china'
|
|
|
import $ from 'jquery'
|
|
|
+import 'element-ui/lib/theme-chalk/index.css'
|
|
|
require('echarts/theme/macarons')
|
|
|
export default {
|
|
|
name: 'DashboardEditor',
|
|
|
data() {
|
|
|
return {
|
|
|
row1: {
|
|
|
- date: parseTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ date: parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ month:[new Date(),new Date()]
|
|
|
},
|
|
|
|
|
|
row2: {
|
|
|
@@ -725,7 +732,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- { type: 'value', name: '', min: 0, max: 100, interval: 20, splitLine:{show: false}, axisLabel: { formatter: '{value} %' }, axisLine: { lineStyle: { color: '#ffff00' }} }
|
|
|
+ { type: 'value', name: '', min: 0, max: 200, interval: 20, splitLine:{show: false}, axisLabel: { formatter: '{value} %' }, axisLine: { lineStyle: { color: '#ffff00' }} }
|
|
|
],
|
|
|
series: [
|
|
|
{ type: 'bar', barWidth: 15, data: chart_data1.data2, name:'设备指标迄今预算' },
|
|
|
@@ -1164,5 +1171,84 @@ export default {
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
+ // 单个
|
|
|
+ .month /deep/ .el-date-editor .el-range-input{
|
|
|
+ background: #031951;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #235fa7;
|
|
|
+ }
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/input::-moz-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
+ /deep/input::-ms-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ // 多个
|
|
|
+ /deep/ .el-range-editor.el-input__inner{
|
|
|
+ background: #031951;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #235fa7;
|
|
|
+ }
|
|
|
+ /deep/ .el-range-input{
|
|
|
+ background: #031951;
|
|
|
+ }
|
|
|
+ /deep/.el-date-editor .el-range-input{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/input::-moz-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/input::-ms-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ /deep/.el-input__icon{
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ /deep/ .el-date-editor .el-range-separator{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ .jlpMySelectPopper {
|
|
|
+ background: #031951;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #0d2f6b;
|
|
|
+ /deep/.cell{
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .el-date-picker__header-label {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-picker-panel__icon-btn{
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .el-month-table td .cell {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-month-table td.start-date .cell{
|
|
|
+ background: #031951;
|
|
|
+ }
|
|
|
+ .el-month-table td.end-date .cell{
|
|
|
+ background: #031951;
|
|
|
+ }
|
|
|
+ .el-month-table td.in-range div{
|
|
|
+ background: #b9c8ee;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|