|
|
@@ -0,0 +1,484 @@
|
|
|
+<template>
|
|
|
+ <q-page >
|
|
|
+ <!-- content -->
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div class="column ">
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div class="row q-col-gutter" v-touch-swipe.horizontal="userHasSwiped">
|
|
|
+ <div class="col-3" v-for="(v, index) in equipmentlist" :key="`none-${index}`" style="max-width: 19%;margin:5px;">
|
|
|
+ <q-card
|
|
|
+ class="my-card bg-blue-2"
|
|
|
+ >
|
|
|
+ <q-item>
|
|
|
+ <q-item-section avatar>
|
|
|
+ <q-avatar>
|
|
|
+ <img src="../statics/images/online0.png" v-if="v.Online === 0" style="width:20px;height:20px">
|
|
|
+ <img src="../statics/images/online1.png" v-if="v.Online === 1" style="width:20px;height:20px">
|
|
|
+ <audio id="soundjb"><source src="../statics/raw/jb1.mp3"></audio>
|
|
|
+ </q-avatar>
|
|
|
+ </q-item-section>
|
|
|
+ <q-item-section>
|
|
|
+ <q-item-label>{{v.Name}}</q-item-label>
|
|
|
+ <q-item-label caption>{{v.Code}}</q-item-label>
|
|
|
+ </q-item-section>
|
|
|
+ </q-item>
|
|
|
+ <q-separator inset />
|
|
|
+ <q-card-section style="height :280px"><ve-gauge :data="chartDatas[index]" :settings="chartSettings[index]"></ve-gauge></q-card-section>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-8"> <div class="text-subtitle3" style="margin-left:15px;">{{v.DataTime}}</div></div>
|
|
|
+ <div class="col-4"> <img :src="getLevelv(v.Levelv)" style="width:20px;float:left;margin-right:10px;"><img :src="getLevelSignal(v.LevelSignal)" style="float:left;margin-right:10px;width:30px;"></div>
|
|
|
+ </div>
|
|
|
+ </q-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="q-pa-lg flex flex-center">
|
|
|
+ <q-pagination
|
|
|
+ input
|
|
|
+ v-model="currentPage"
|
|
|
+ :min="1"
|
|
|
+ :max="maxsize()"
|
|
|
+ @input="HandChange()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <q-separator spaced/>
|
|
|
+ <div class="row q-col-gutter-xs" style="margin:-30px;">
|
|
|
+ <div class="col" v-for="n in 5" :key="`xs-${n}`">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div >
|
|
|
+ <div >
|
|
|
+ <q-carousel
|
|
|
+ v-model="slide"
|
|
|
+ transition-prev="scale"
|
|
|
+ transition-next="scale"
|
|
|
+ swipeable
|
|
|
+ animated
|
|
|
+ control-color="white"
|
|
|
+ navigation
|
|
|
+ padding
|
|
|
+ arrows
|
|
|
+ height="180px"
|
|
|
+ class="bg-primary text-white shadow-1 rounded-borders"
|
|
|
+ >
|
|
|
+ <q-btn
|
|
|
+ push round dense color="orange" text-color="black" icon="arrow_left"
|
|
|
+ @click="$refs.carousel.previous()"
|
|
|
+ />
|
|
|
+ <q-carousel-slide name="tv00" v-if="lorem2 === 0" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="style" size="56px"/>
|
|
|
+ <div class="text-h4" >设备正常</div>
|
|
|
+ <div class="text-subtitle1">无报警</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv0" v-if="lorem[0]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-red">{{ lorem[0] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv1" v-if="lorem[1]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-center text-red">{{ lorem[1] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv2" v-if="lorem[2]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[1] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv3" v-if="lorem[3]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[3] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv4" v-if="lorem[4]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[4] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv5" v-if="lorem[5]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[5] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv6" v-if="lorem[6]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[6] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv7" v-if="lorem[7]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[7] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv8" v-if="lorem[8]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[8] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <q-carousel-slide name="tv9" v-if="lorem[9]" class="column no-wrap flex-center">
|
|
|
+ <q-icon name="warning" size="56px" color="red"/>
|
|
|
+ <div class="text-h4 text-red text-center">{{ lorem[9] }}</div>
|
|
|
+ </q-carousel-slide>
|
|
|
+ <template v-slot:control>
|
|
|
+ <q-carousel-control
|
|
|
+ position="bottom-right"
|
|
|
+ :offset="[18, 18]"
|
|
|
+ >
|
|
|
+ <q-btn
|
|
|
+ push round dense color="orange" text-color="black" icon="arrow_right" style=""
|
|
|
+ @click="stop()"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ push round dense color="white" text-color="primary" style=" float:right;margin-right:50px;"
|
|
|
+ :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
|
|
|
+ @click="startComputing(1)"
|
|
|
+ />
|
|
|
+ </q-carousel-control>
|
|
|
+ </template>
|
|
|
+ </q-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </q-page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { channel, trigger } from '@/api/channel'
|
|
|
+export default {
|
|
|
+ // name: 'PageName',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isPlaying: false,
|
|
|
+ fullscreen: false,
|
|
|
+ code: '',
|
|
|
+ // 分页参数
|
|
|
+ loading1: false,
|
|
|
+ percentage1: 0,
|
|
|
+ size: 5,
|
|
|
+ asd: true,
|
|
|
+ currentPage: 1,
|
|
|
+ currentItemCount: 0,
|
|
|
+ chartSettings: [],
|
|
|
+ equipmentlist: [],
|
|
|
+ chartDatas: [],
|
|
|
+ chartdata: [],
|
|
|
+ man: 0,
|
|
|
+ slide: 'tv00',
|
|
|
+ lorem: [],
|
|
|
+ lorem2: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.code = this.$route.query.code
|
|
|
+ // this.code = '90101001'
|
|
|
+ setInterval(() => {
|
|
|
+ this.trigger_history(this.code)
|
|
|
+ }, 180000)
|
|
|
+ this.initdate()
|
|
|
+ setInterval(() => {
|
|
|
+ if (this.currentItemCount > 5) {
|
|
|
+ if (this.currentPage === 1) {
|
|
|
+ this.currentPage = 2
|
|
|
+ // if (this.code === '90101002') {
|
|
|
+ // this.asd = false
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ // this.asd = true
|
|
|
+ this.currentPage = 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.initdate()
|
|
|
+ }, 33333)
|
|
|
+
|
|
|
+ // this.initdate()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initdate () {
|
|
|
+ let params = {
|
|
|
+ _currentPage: this.currentPage,
|
|
|
+ _size: this.size
|
|
|
+ }
|
|
|
+ channel(this.code, params)
|
|
|
+ .then(res => {
|
|
|
+ this.equipmentlist = res.items
|
|
|
+ this.currentItemCount = res.currentItemCount
|
|
|
+ // this.equipmentlist = res
|
|
|
+ let chartDatas = []
|
|
|
+ this.chartSettings = []
|
|
|
+
|
|
|
+ for (var i = 0; i < this.equipmentlist.length; i++) {
|
|
|
+ console.log('-----this.equipmentlist[i].DataItem--------', this.equipmentlist[i].DataItem)
|
|
|
+ if (this.equipmentlist[i].DataItem === 6) {
|
|
|
+ this.chartdata = {
|
|
|
+ columns: ['type', 'value'],
|
|
|
+ rows: [
|
|
|
+ { type: 't', value: -10.5 }
|
|
|
+ // { type: 'hum', value: 60.3 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartdata.rows[0].value = this.equipmentlist[i].Temperature
|
|
|
+ if (this.equipmentlist[i].MaxValue === 0) {
|
|
|
+ this.equipmentlist[i].MaxValue = this.equipmentlist[i].Temperature + 20
|
|
|
+ }
|
|
|
+ if (this.equipmentlist[i].MinValue === 0) {
|
|
|
+ this.equipmentlist[i].MinValue = this.equipmentlist[i].Temperature - 25
|
|
|
+ }
|
|
|
+ let chartSetting = {
|
|
|
+ dataName: {
|
|
|
+ 't': '℃'
|
|
|
+ // 'hum': '%'
|
|
|
+ },
|
|
|
+ seriesMap: {
|
|
|
+ 't': {
|
|
|
+ radius: '100%',
|
|
|
+ center: ['50%', '37%'],
|
|
|
+ min: this.equipmentlist[i].MinValue,
|
|
|
+ max: this.equipmentlist[i].MaxValue,
|
|
|
+ splitNumber: 5,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ // color: [[0.1, '#ff5a5c'], [0.9, '#70ffb3'], [1, '#ff5a5c']]
|
|
|
+ color: [[0.1, '#ff4500'], [0.9, '#1e90ff'], [1, '#ff4500']]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ offsetCenter: [0, '60%']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ chartDatas.push(this.chartdata)
|
|
|
+ this.chartSettings.push(chartSetting)
|
|
|
+ } else if (this.equipmentlist[i].DataItem === 17) {
|
|
|
+ this.chartdata = {
|
|
|
+ columns: ['type', 'value'],
|
|
|
+ rows: [
|
|
|
+ { type: 't', value: -10.5 }
|
|
|
+ // { type: 'hum', value: 60.3 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.equipmentlist[i].Levelv = 4
|
|
|
+ this.chartdata.rows[0].value = this.equipmentlist[i].O2
|
|
|
+ let chartSetting = {
|
|
|
+ dataName: {
|
|
|
+ 't': '%'
|
|
|
+ },
|
|
|
+ seriesMap: {
|
|
|
+ 't': {
|
|
|
+ center: ['40%', '32%'],
|
|
|
+ min: 0,
|
|
|
+ max: 24,
|
|
|
+ splitNumber: 5,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: [[0.1, '#ff4500'], [0.9, '#1e90ff'], [1, '#ff4500']]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ chartDatas.push(this.chartdata)
|
|
|
+ this.chartSettings.push(chartSetting)
|
|
|
+ } else if (this.equipmentlist[i].DataItem === 26) {
|
|
|
+ this.chartdata = {
|
|
|
+ columns: ['type', 'value'],
|
|
|
+ rows: [
|
|
|
+ { type: 't', value: -10.5 }
|
|
|
+ // { type: 'hum', value: 60.3 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.equipmentlist[i].Levelv = 4
|
|
|
+ this.chartdata.rows[0].value = this.equipmentlist[i].CO2
|
|
|
+ let chartSetting = {
|
|
|
+ dataName: {
|
|
|
+ 't': '%'
|
|
|
+ },
|
|
|
+ seriesMap: {
|
|
|
+ 't': {
|
|
|
+ radius: '100%',
|
|
|
+ center: ['50%', '37%'],
|
|
|
+ min: 0,
|
|
|
+ max: 20,
|
|
|
+ splitNumber: 5,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: [[0.1, '#1e90ff'], [0.9, '#1e90ff'], [1, '#1e90ff']]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ chartDatas.push(this.chartdata)
|
|
|
+ this.chartSettings.push(chartSetting)
|
|
|
+ } else if (this.equipmentlist[i].DataItem === 0) {
|
|
|
+ this.chartdata = {
|
|
|
+ columns: ['type', 'value'],
|
|
|
+ rows: [
|
|
|
+ { type: 't', value: -10.5 },
|
|
|
+ { type: 'hum', value: 60.3 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chartdata.rows[0].value = this.equipmentlist[i].Temperature
|
|
|
+ this.chartdata.rows[1].value = this.equipmentlist[i].Humidity
|
|
|
+ if (this.equipmentlist[i].MaxValue === 0) {
|
|
|
+ this.equipmentlist[i].MaxValue = this.equipmentlist[i].Temperature + 20
|
|
|
+ }
|
|
|
+ if (this.equipmentlist[i].MinValue === 0) {
|
|
|
+ this.equipmentlist[i].MinValue = this.equipmentlist[i].Temperature - 25
|
|
|
+ }
|
|
|
+ let chartSetting = {
|
|
|
+ dataName: {
|
|
|
+ 't': '℃',
|
|
|
+ 'hum': '%'
|
|
|
+ },
|
|
|
+ seriesMap: {
|
|
|
+ 't': {
|
|
|
+ radius: '100%',
|
|
|
+ center: ['50%', '37%'],
|
|
|
+ min: this.equipmentlist[i].MinValue,
|
|
|
+ max: this.equipmentlist[i].MaxValue,
|
|
|
+ splitNumber: 5,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ // color: [[0.1, '#ff5a5c'], [0.9, '#70ffb3'], [1, '#ff5a5c']]
|
|
|
+ color: [[0.1, '#ff4500'], [0.9, '#1e90ff'], [1, '#ff4500']]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ offsetCenter: [0, '60%']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 'hum': {
|
|
|
+ center: ['85%', '9%'],
|
|
|
+ radius: '25%',
|
|
|
+ startAngle: 135,
|
|
|
+ endAngle: 40,
|
|
|
+ splitNumber: null,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ pointer: {
|
|
|
+ color: [[0.2, '#ff4500'], [0.8, '#ff4500'], [1, '#ff4500']],
|
|
|
+ width: 2,
|
|
|
+ // shadowColor: '#d8e300',
|
|
|
+ shadowColor: '#fff',
|
|
|
+ shadowBlur: 5
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ // color: [[0.1, '#ff5a5c'], [0.9, '#70ffb3'], [1, '#ff5a5c']]
|
|
|
+ color: [[0.1, '#42a1eb'], [0.9, '#42a1eb'], [1, '#42a1eb']]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ chartDatas.push(this.chartdata)
|
|
|
+ this.chartSettings.push(chartSetting)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.chartDatas = chartDatas
|
|
|
+ })
|
|
|
+ .catch(err => console.log('err=', err))
|
|
|
+ },
|
|
|
+ maxsize () {
|
|
|
+ return Math.ceil(this.currentItemCount / this.size)
|
|
|
+ },
|
|
|
+ userHasSwiped (obj) {
|
|
|
+ if (obj.direction === 'right' && this.currentPage > 1) {
|
|
|
+ this.currentPage -= 1
|
|
|
+ }
|
|
|
+ if (obj.direction === 'left' && this.currentPage < this.maxsize()) {
|
|
|
+ this.currentPage += 1
|
|
|
+ }
|
|
|
+ console.log(obj, this.currentPage)
|
|
|
+ this.initdate()
|
|
|
+ },
|
|
|
+ HandChange () {
|
|
|
+ // console.log('------this.currentPage------', this.currentPage)
|
|
|
+ // if (this.code === '90101002' && this.currentPage === 1) {
|
|
|
+ // this.asd = true
|
|
|
+ // } else if (this.code === '90101002' && this.currentPage === 2) {
|
|
|
+ // this.asd = true
|
|
|
+ // }
|
|
|
+ this.initdate()
|
|
|
+ },
|
|
|
+ play () {
|
|
|
+ var audio = document.querySelector('#soundjb')
|
|
|
+ if (!this.isPlaying) {
|
|
|
+ audio.play()
|
|
|
+ this.isPlaying = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stop () {
|
|
|
+ var audio = document.querySelector('#soundjb')
|
|
|
+ if (this.isPlaying) {
|
|
|
+ audio.pause()
|
|
|
+ audio.currentTime = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger_history (code) {
|
|
|
+ trigger(code)
|
|
|
+ .then(res => {
|
|
|
+ if (res.length > 0) {
|
|
|
+ this.isPlaying = false
|
|
|
+ this.slide = 'tv0'
|
|
|
+ this.lorem2 = 1
|
|
|
+ this.play()
|
|
|
+ }
|
|
|
+ if (this.lorem.length >= 9) {
|
|
|
+ for (var y = 0; y < (res.length); y++) {
|
|
|
+ this.lorem[this.man] = res[y]
|
|
|
+ this.man = this.man + 1
|
|
|
+ if (this.man > 9) {
|
|
|
+ this.man = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.length > 0) {
|
|
|
+ for (var i = 0; i < res.length; i++) {
|
|
|
+ if (this.lorem.length === 10) {
|
|
|
+ this.lorem[this.man] = res[i]
|
|
|
+ this.man = this.man + 1
|
|
|
+ } else {
|
|
|
+ this.lorem.push(res[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => console.log('err=', err))
|
|
|
+ },
|
|
|
+ startComputing (id) {
|
|
|
+ this.stop()
|
|
|
+ this.lorem = []
|
|
|
+ this.lorem2 = 0
|
|
|
+ this.slide = 'tv00'
|
|
|
+ this[`loading${id}`] = true
|
|
|
+ this[`percentage${id}`] = 0
|
|
|
+ this[`interval${id}`] = setInterval(() => {
|
|
|
+ this[`percentage${id}`] += Math.floor(Math.random() * 8 + 10)
|
|
|
+ if (this[`percentage${id}`] >= 100) {
|
|
|
+ clearInterval(this[`interval${id}`])
|
|
|
+ this[`loading${id}`] = false
|
|
|
+ }
|
|
|
+ }, 400)
|
|
|
+ },
|
|
|
+ getLevelv (v) {
|
|
|
+ return '../statics/images/dianchi_' + v + '.png'
|
|
|
+ },
|
|
|
+ getLevelSignal (v) {
|
|
|
+ return '../statics/images/signal_' + v + '.png'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ .my-card {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .my-card2 {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .none-class{
|
|
|
+ margin-top:320px;
|
|
|
+ }
|
|
|
+ .block-class{
|
|
|
+ }
|
|
|
+</style>
|
