| | |
| | | <div class="app"> |
| | | <!--面包屑导航区域--> |
| | | <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> |
| | | <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link> |
| | | <el-button type="text">{{ $t('Electrical') }}</el-button> |
| | | <router-link to="/Electrical/Parameter" tag="el-button" type="text">{{ $t('Parameter') }}</router-link> |
| | | <router-link to="/Electrical/Action" tag="el-button" type="text">{{ $t('Action') }}</router-link> |
| | | <router-link to="/Electrical/Sign" tag="el-button" type="text">{{ $t('Sign') }}</router-link> |
| | | <router-link to="/Electrical/State" tag="el-button" type="text">{{ $t('State') }}</router-link> |
| | | <router-link to="/Electrical/alarm" tag="el-button" type="text">{{ $t('Alarm') }}</router-link> |
| | | |
| | | <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link> |
| | | <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link> |
| | | <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link> |
| | | <!-- <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link> --> |
| | | <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link> |
| | | <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ $t('Servo Manual') |
| | | }}</router-link> |
| | | </el-breadcrumb> |
| | | <div>Alarm</div> |
| | | <div>{{ $t('Alarm') }}</div> |
| | | <div class="block"> |
| | | <span class="demonstration">时间:</span> |
| | | <el-date-picker v-model="shijian1" type="datetime" placeholder="选择日期时间" align="right" |
| | | <span class="demonstration">{{ $t('shijian') }}:</span> |
| | | <el-date-picker v-model="shijian1" type="datetime" :placeholder="$t('Pick a day')" align="right" |
| | | :picker-options="pickerOptions"> |
| | | </el-date-picker> |
| | | ~ |
| | | <el-date-picker v-model="shijian2" type="datetime" placeholder="选择日期时间" align="right" |
| | | <el-date-picker v-model="shijian2" type="datetime" :placeholder="$t('Pick a day')" align="right" |
| | | :picker-options="pickerOptions"> |
| | | </el-date-picker> |
| | | |
| | |
| | | </div> |
| | | |
| | | <el-table :data="localizedRoles" style="width: 100%;" height="550"> |
| | | <el-table-column prop="id" label="id" width="80"> |
| | | <el-table-column prop="id" :label="$t('alarmid')" width="80"> |
| | | </el-table-column> |
| | | <el-table-column prop="content" label="content"> |
| | | <el-table-column prop="content" :label="$t('alacontent')"> |
| | | </el-table-column> |
| | | <el-table-column prop="timeon" label="time-on"> |
| | | <el-table-column prop="timeon" :label="$t('time-on')"> |
| | | </el-table-column> |
| | | <el-table-column prop="endTime" label="End Time"> |
| | | <el-table-column prop="endTime" :label="$t('End-Time')"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | |
| | | pageSize: 10 |
| | | }, |
| | | pickerOptions: { |
| | | |
| | | disabledDate (time) { |
| | | return time.getTime() > Date.now(); |
| | | }, |
| | | shortcuts: [{ |
| | | text: '今天', |
| | | |
| | | text: this.$t('today'), |
| | | onClick (picker) { |
| | | picker.$emit('pick', new Date()); |
| | | } |
| | | }, { |
| | | text: '昨天', |
| | | }, |
| | | { |
| | | text: this.$t('yesterday'), |
| | | onClick (picker) { |
| | | const date = new Date(); |
| | | date.setTime(date.getTime() - 3600 * 1000 * 24); |
| | | picker.$emit('pick', date); |
| | | } |
| | | }, { |
| | | text: '一周前', |
| | | }, |
| | | { |
| | | text: this.$t('week'), |
| | | onClick (picker) { |
| | | const date = new Date(); |
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); |
| | | picker.$emit('pick', date); |
| | | } |
| | | }], |
| | | |
| | | }] |
| | | }, |
| | | shijian1: "", |
| | | shijian2: "", |
| | |
| | | |
| | | |
| | | }, |
| | | created () { |
| | | // created () { |
| | | // this.init(); |
| | | |
| | | |
| | | // if (this.shijian1 == "" || this.shijian2 == "") { |
| | | // //查询当天报警信息 |
| | | // this.load(); |
| | | // } |
| | | // else { |
| | | // //根据时间查询报警信息 |
| | | // this.selectTime(); |
| | | // } |
| | | |
| | | // }, |
| | | activated(){ |
| | | |
| | | this.init(); |
| | | |
| | | |
| | | if (this.shijian1 == "" || this.shijian2 == "") { |
| | | //查询当天报警信息 |
| | | this.load(); |
| | |
| | | this.selectTime(); |
| | | } |
| | | |
| | | }, |
| | | }, |
| | | methods: { |
| | | |
| | | load () { |
| | |
| | | |
| | | }, |
| | | selectTime () { |
| | | |
| | | //moment需要单独安转依赖,npm install moment |
| | | let sj1 = moment(this.shijian1).format('YYYY-MM-DD%20HH:mm'); |
| | | let sj2 = moment(this.shijian2).format('YYYY-MM-DD%20HH:mm') |
| | |
| | | socket.onerror = function () { |
| | | console.log("websocket发生了错误"); |
| | | } |
| | | this.$router.afterEach(function(){ |
| | | socket.close(); |
| | | }) |
| | | } |
| | | |
| | | }, |
| | |
| | | </script> |
| | | |
| | | |
| | | <style> |
| | | <style > |
| | | .kuai_div { |
| | | /* width: 30%; */ |
| | | margin-bottom: 30px; |