调整

src/assets/style/public.scss

@@ -104,7 +104,11 @@ $el-bg-color-4: #F2F6FC;
 
 
 
-
+// 选中
+.isActive {
+  background: #4cb527 !important;
+  border: transparent 1px solid !important;
+}
 
 
 

src/pages/analysis/fault/index.vue

@@ -3,24 +3,14 @@ card-warp(title="故障报警分析", height="45px", showBackground)
   div(slot="content")
     el-form(:inline="true", size="mini")
       el-form-item(label="时间范围：")
-        el-date-picker(
+        el-button(
           size="mini",
-          v-model="startTime",
-          align="right",
-          type="date",
-          placeholder="选择日期",
-          :picker-options="pickerOptions"
-        )
-        span(style="padding: 0 10px") 至
-        el-date-picker(
-          size="mini",
-          v-model="endTime",
-          align="right",
-          type="date",
-          placeholder="选择日期",
-          :picker-options="pickerOptions"
-        )
-      el-button(size="mini", type="primary") 查询
+          type="primary",
+          @click="handleDate(index)",
+          v-for="(item, index) in typeList",
+          :key="index",
+          :class="[index == currentActive ? 'isActive' : '']"
+        ) {{ item.name }}
     .echartsWarp(width="100%", flex)
       //- div
       //-     .title 设备故障统计
@@ -50,45 +40,23 @@ export default {
   },
   data() {
     return {
-      startTime: '',
-      endTime: '',
+      typeList: [
+        { name: '当日' },
+        { name: '本周' },
+        { name: '当月' },
+        { name: '今年' }
+      ],
+      currentActive: '0'
 
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', [start, end])
-            }
-          },
-          {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              picker.$emit('pick', [start, end])
-            }
-          },
-          {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              picker.$emit('pick', [start, end])
-            }
-          }
-        ]
-      }
     }
   },
   methods: {
     tabClick(tab, event) {
       console.log(tab, event)
+    },
+            // 当日 ，本周
+    handleDate(i) {
+      this.currentActive = i
     }
   }
 }

src/pages/kb/indoor/history.vue

@@ -6,8 +6,14 @@
         el-form-item(label='设备编号', prop='name')
             el-input(v-model='dataForm.name', placeholder='设备编号' )
         el-form-item(label='数据起止阶段', prop='name')
-
-        el-button(type='primary' size='mini') 查询
+          el-button(
+            size="mini",
+            type="primary",
+            @click="handleDate(index)",
+            v-for="(item, index) in typeList",
+            :key="index",
+            :class="[index == currentActive ? 'isActive' : '']"
+          ) {{ item.name }}
     span(v-if="type==1")
         el-table( :data='dataList'  size="mini" ,style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
             el-table-column( :resizable="false" type='index', header-align='center', align='center', label='序号')
@@ -42,6 +48,13 @@ export default {
 },
   data () {
     return {
+            typeList: [
+        { name: '当日' },
+        { name: '本周' },
+        { name: '当月' },
+        { name: '今年' }
+      ],
+      currentActive: '0',
         type: null,
         pageSize: 10,
         totalPage: 0,
@@ -99,6 +112,10 @@ export default {
     },
     getDataList() {
 
+    },
+        // 当日 ，本周
+    handleDate(i) {
+      this.currentActive = i
     },
     // 表单提交
     dataFormSubmit () {

src/pages/kb/outdoor/history.vue

@@ -20,12 +20,18 @@ el-dialog(
     el-form-item(label="设备编号", prop="name")
       el-input(v-model="dataForm.name", placeholder="设备编号")
     el-form-item(label="数据起止阶段", prop="name")
-
-    el-button(type="primary", size="mini") 查询
+      el-button(
+        size="mini",
+        type="primary",
+        @click="handleDate(index)",
+        v-for="(item, index) in typeList",
+        :key="index",
+        :class="[index == currentActive ? 'isActive' : '']"
+      ) {{ item.name }}
   span(v-if="type == 1")
     el-table(
       :data="dataList",
-      size='mini',
+      size="mini",
       style="width: 100%",
       :header-cell-style="{ background: '#EEF8FF', color: '#333333' }"
     )
@@ -114,6 +120,13 @@ export default {
         name: '',
         dateValue: ''
       },
+      typeList: [
+        { name: '当日' },
+        { name: '本周' },
+        { name: '当月' },
+        { name: '今年' }
+      ],
+      currentActive: '0',
       dataList: [],
       chartList: [
         { id: '11', title: '温度', color: '#21ACFC' },
@@ -160,6 +173,10 @@ export default {
         })
       }
     },
+    // 当日 ，本周
+    handleDate(i) {
+      this.currentActive = i
+    },
     getDataList() {},
     showParams(data, type) {
       console.log(111)

src/pages/kb/power/components/historyDataModal.vue

@@ -4,6 +4,7 @@
     :visible.sync="historyDataModalVisible"
     :append-to-body="true"
     @close="cancelhandle"
+    width="1200px"
   >
     <el-form :inline="true">
       <el-form-item label="设备名称：" style="margin-bottom:0">
@@ -13,17 +14,25 @@
         <el-input size="mini" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="数据起止阶段：" >
-        <el-date-picker style="width:172px" size="mini" type="date" placeholder="">
+        <!-- <el-date-picker style="width:172px" size="mini" type="date" placeholder="">
         </el-date-picker>
         <span style="padding:0 10px">至</span>
         <el-date-picker style="width:172px"  size="mini" type="date" placeholder="">
-        </el-date-picker>
+        </el-date-picker> -->
+        <el-button
+          size="mini"
+          type="primary"
+          @click="handleDate(index)"
+          v-for="(item, index) in typeList"
+          :key="index"
+          :class="[index == currentActive ? 'isActive' : '']"
+          >{{ item.name }}
+        </el-button>
       </el-form-item>
       <el-form-item >
-        <el-button size='mini' type="primary" icon="el-icon-search" >查询</el-button>
          <el-button size='mini' type="primary" icon="el-icon-download">导出</el-button>
       </el-form-item>
-      
+
     </el-form>
     <enTable :tableData="historyData" :tableColums="tableColums"></enTable>
     <div slot="footer">
@@ -39,41 +48,52 @@ const historyData = [
 ]
 const tableColums = [
     {
-        label:'功率',
-        prop:'qq',
-        width:200,
-        align:'center'
+        label: '功率',
+        prop: 'qq',
+        width: 200,
+        align: 'center'
     },
       {
-        label:'设备状态',
-        prop:'ww',
-        width:200,
-        align:'center'
+        label: '设备状态',
+        prop: 'ww',
+        width: 200,
+        align: 'center'
     },
       {
-        label:'采集时间',
-        prop:'ee',
+        label: '采集时间',
+        prop: 'ee',
         // width:200,
-        align:'center'
+        align: 'center'
     }
 ]
 export default {
-  name: "historyDataModal",
-  props: ["historyDataModalVisible"],
-  components:{
+  name: 'historyDataModal',
+  props: ['historyDataModalVisible'],
+  components: {
       enTable
   },
   data() {
     return {
-      formLabelWidth: "0px",
+      formLabelWidth: '0px',
       historyData,
       tableColums,
-    };
+            typeList: [
+        { name: '当日' },
+        { name: '本周' },
+        { name: '当月' },
+        { name: '今年' }
+      ],
+      currentActive: '0'
+    }
   },
   methods: {
     cancelhandle() {
-      this.$emit("cancelhandle");
+      this.$emit('cancelhandle')
     },
-  },
-};
+        // 当日 ，本周
+    handleDate(i) {
+      this.currentActive = i
+    }
+  }
+}
 </script>

src/pages/kb/power/components/statisticPicTableModal.vue

@@ -28,6 +28,15 @@
           placeholder=""
         >
         </el-date-picker> -->
+        <el-button
+          size="mini"
+          type="primary"
+          @click="handleDate(index)"
+          v-for="(item, index) in typeList"
+          :key="index"
+          :class="[index == currentActive ? 'isActive' : '']"
+          >{{ item.name }}
+        </el-button>
       </el-form-item>
       <el-form-item>
         <el-button size="mini" type="primary" icon="el-icon-search"
@@ -56,6 +65,13 @@ export default {
     return {
       formLabelWidth: '120px',
       category: null,
+      typeList: [
+        { name: '当日' },
+        { name: '本周' },
+        { name: '当月' },
+        { name: '今年' }
+      ],
+      currentActive: '0',
       data: [
         ['2019-8-14 8:00:00', 70],
         ['2019-8-14 8:00:01', 60],
@@ -66,17 +82,6 @@ export default {
       ]
     }
   },
-  watch: {
-    statisticModalVisible(value) {
-      if (value) {
-        setTimeout(() => {
-          this.initCategory()
-        }, 1000)
-      } else {
-        this.category = null
-      }
-    }
-  },
 
   mounted() {
     // setTimeout(() => {
@@ -86,6 +91,10 @@ export default {
   methods: {
     cancelhandlePic() {
       this.$emit('cancelhandlePic')
+    },
+    // 当日 ，本周
+    handleDate(i) {
+      this.currentActive = i
     }
     // initCategory() {
     //   let gId = document.getElementById('categoryId')

src/pages/kb/power/page.vue

@@ -20,7 +20,7 @@
           </el-tabs>
         </div>
         <div>
-          <el-form :inline="true">
+          <el-form :inline="true" :mode='formData'>
             <el-form-item label="设备名称：">
               <el-input size="mini" placeholder=""></el-input>
             </el-form-item>
@@ -30,7 +30,7 @@
             </el-form-item>
 
             <el-form-item label="运行状态：">
-              <el-select size="mini" placeholder="">
+              <el-select size="mini" placeholder="" v-model="formData.tyoe">
                 <el-option label="正常" value="shanghai"></el-option>
                 <el-option label="不正常" value="beijing"></el-option>
               </el-select>
@@ -142,6 +142,7 @@ export default {
   },
   data() {
     return {
+      formData: {},
       activeTab: '01',
       historyDataModalVisible: false,
       statisticModalVisible: false,