|
@@ -6,54 +6,52 @@
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
|
|
-->
|
|
-->
|
|
<template>
|
|
<template>
|
|
- <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
|
|
|
|
- <component :is="components" :data="list" :class-option="defaultOption">
|
|
|
|
- <ul class="right_center ">
|
|
|
|
- <li class="right_center_item" v-for="(item, i) in list" :key="i">
|
|
|
|
- <span class="orderNum">{{ i + 1 }}</span>
|
|
|
|
- <div class="inner_right">
|
|
|
|
- <div class="dibu"></div>
|
|
|
|
- <div class="flex">
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels ">合同编号</span>
|
|
|
|
- <span class="contents zhuyao"> {{ item.gatewayno }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels">合同类型:</span>
|
|
|
|
- <span class="contents "> {{ item.terminalno }}</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels">合同量:</span>
|
|
|
|
- <span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="flex">
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels">签订时间:</span>
|
|
|
|
- <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
|
|
|
- }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="flex">
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels">买方:</span>
|
|
|
|
- <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
|
|
|
- }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="flex">
|
|
|
|
- <div class="info">
|
|
|
|
- <span class="labels">卖方:</span>
|
|
|
|
- <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
|
|
|
- }}</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </component>
|
|
|
|
- </div>
|
|
|
|
- <Reacquire v-else @onclick="getData" style="line-height:200px" />
|
|
|
|
|
|
+ <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
|
|
|
|
+ <component :is="components" :data="list" :class-option="defaultOption">
|
|
|
|
+ <ul class="right_center ">
|
|
|
|
+ <li class="right_center_item" v-for="(item, i) in list" :key="i">
|
|
|
|
+ <div class="inner_right">
|
|
|
|
+ <div class="dibu"></div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">合同编号</span>
|
|
|
|
+ <span class="contents zhuyao"> {{ item.contractNo}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">类型:</span>
|
|
|
|
+ <span class="contents "> {{ item.agreementType}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">合同量:</span>
|
|
|
|
+ <span class="contents warning"> {{ item.weight}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">签订时间:</span>
|
|
|
|
+ <span class="contents ciyao warning">{{item.createDate}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">买方:</span>
|
|
|
|
+ <span class="contents ciyao warning"> {{ item.buyer}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <span class="labels">卖方:</span>
|
|
|
|
+ <span class="contents ciyao warning"> {{ item.seller}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </component>
|
|
|
|
+ </div>
|
|
|
|
+ <Reacquire v-else @onclick="getData" style="line-height:200px" />
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -62,665 +60,166 @@
|
|
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
|
|
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
|
|
import Kong from '../../components/kong.vue'
|
|
import Kong from '../../components/kong.vue'
|
|
export default {
|
|
export default {
|
|
- components: { vueSeamlessScroll, Kong },
|
|
|
|
-
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- list: [],
|
|
|
|
- pageflag: true,
|
|
|
|
- defaultOption: {
|
|
|
|
- step: 0.5, // 数值越大速度滚动越快
|
|
|
|
- hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
- openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
- direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
- limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
- singleHeight: 250, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
|
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
- waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- sbtxSwiperFlag() {
|
|
|
|
- let ssyjSwiper = true
|
|
|
|
- if (ssyjSwiper) {
|
|
|
|
- this.components = vueSeamlessScroll
|
|
|
|
- } else {
|
|
|
|
- this.components = Kong
|
|
|
|
- }
|
|
|
|
- return ssyjSwiper
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.getData()
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- mounted() { },
|
|
|
|
- methods: {
|
|
|
|
- getData() {
|
|
|
|
- this.pageflag = true
|
|
|
|
- let res = {
|
|
|
|
- data:{
|
|
|
|
- list:[{
|
|
|
|
- 'alertdetail': '主么本指美证队众。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 76.35193366743,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10000,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '先加话她为斗价难就结空心府。',
|
|
|
|
- 'terminalno': 100,
|
|
|
|
- 'provinceName': '广西壮族自治区',
|
|
|
|
- 'cityName': '延安市',
|
|
|
|
- 'countyName': '东区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '这分龙理处决装制细。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 179.4578676454877,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10001,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '说运务战用受到在厂变共。',
|
|
|
|
- 'terminalno': 101,
|
|
|
|
- 'provinceName': '香港特别行政区',
|
|
|
|
- 'cityName': '连云港市',
|
|
|
|
- 'countyName': '彭山县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '经山义打己系意。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 112.23387347173968,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10002,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '内维量强解基必号油来出至商议万。',
|
|
|
|
- 'terminalno': 102,
|
|
|
|
- 'provinceName': '云南省',
|
|
|
|
- 'cityName': '邢台市',
|
|
|
|
- 'countyName': '奇台县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '手转京飞百。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 110.15,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10003,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '又新加看适成确道边型。',
|
|
|
|
- 'terminalno': 103,
|
|
|
|
- 'provinceName': '北京',
|
|
|
|
- 'cityName': '襄阳市',
|
|
|
|
- 'countyName': '浏阳市'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '例感改中京规。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 185.2746953,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10004,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '党下江全准意场月义部次省消。',
|
|
|
|
- 'terminalno': 104,
|
|
|
|
- 'provinceName': '浙江省',
|
|
|
|
- 'cityName': '忻州市',
|
|
|
|
- 'countyName': '洮北区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '应个命给转小变十何。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 84.37245586588067,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10005,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '学老节实果北果需何料化门织。',
|
|
|
|
- 'terminalno': 105,
|
|
|
|
- 'provinceName': '重庆',
|
|
|
|
- 'cityName': '贺州市',
|
|
|
|
- 'countyName': '巴楚县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '段事华叫七然厂家。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 150.161361,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10006,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '这飞世平海经合务石实别广不对只。',
|
|
|
|
- 'terminalno': 106,
|
|
|
|
- 'provinceName': '四川省',
|
|
|
|
- 'cityName': '黄冈市',
|
|
|
|
- 'countyName': '铁山港区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '且事飞取清证。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 67.4,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10007,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '月场保圆记光京公快龙就。',
|
|
|
|
- 'terminalno': 107,
|
|
|
|
- 'provinceName': '福建省',
|
|
|
|
- 'cityName': '博尔塔拉蒙古自治州',
|
|
|
|
- 'countyName': '静乐县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '任加按过资因。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 176.5,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10008,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '改志业除金好历验标品口果之之。',
|
|
|
|
- 'terminalno': 108,
|
|
|
|
- 'provinceName': '新疆维吾尔自治区',
|
|
|
|
- 'cityName': '重庆市',
|
|
|
|
- 'countyName': '启东市'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '石团斗是思可。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 127.28686626615864,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10009,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '人发感历手任门同次市况直。',
|
|
|
|
- 'terminalno': 109,
|
|
|
|
- 'provinceName': '西藏自治区',
|
|
|
|
- 'cityName': '烟台市',
|
|
|
|
- 'countyName': '新邱区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '许导思头商面。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 74.7141208,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10010,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '美术江按时经飞以商除思始起高术。',
|
|
|
|
- 'terminalno': 110,
|
|
|
|
- 'provinceName': '重庆',
|
|
|
|
- 'cityName': '天津市',
|
|
|
|
- 'countyName': '怀柔区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '越习行算对参。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 134.9774247,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10011,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '以精带样解见社七我北具先地列这能引。',
|
|
|
|
- 'terminalno': 111,
|
|
|
|
- 'provinceName': '澳门特别行政区',
|
|
|
|
- 'cityName': '和田地区',
|
|
|
|
- 'countyName': '抚远县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '少书且维明我体。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 177.7125254463579,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10012,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '认术快也装值精级路表任经为片及地极。',
|
|
|
|
- 'terminalno': 112,
|
|
|
|
- 'provinceName': '浙江省',
|
|
|
|
- 'cityName': '成都市',
|
|
|
|
- 'countyName': '其它区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '传却温府历住分月华。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 68.8735,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10013,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '府亲场人重素产或千天。',
|
|
|
|
- 'terminalno': 113,
|
|
|
|
- 'provinceName': '新疆维吾尔自治区',
|
|
|
|
- 'cityName': '澳门半岛',
|
|
|
|
- 'countyName': '芦溪县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '满收应提观千细学别。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 200.0874694361121,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10014,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '火本数专命向科百们维据且同太回实。',
|
|
|
|
- 'terminalno': 114,
|
|
|
|
- 'provinceName': '北京',
|
|
|
|
- 'cityName': '海外',
|
|
|
|
- 'countyName': '涟源市'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '低与金利许验。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 87.014122311,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10015,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '南目时农天立声来会农满后手严化。',
|
|
|
|
- 'terminalno': 115,
|
|
|
|
- 'provinceName': '内蒙古自治区',
|
|
|
|
- 'cityName': '衡水市',
|
|
|
|
- 'countyName': '-'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '生路题你少队表。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 105.65846324863895,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10016,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '周动阶了节农给自流更土完新化号。',
|
|
|
|
- 'terminalno': 116,
|
|
|
|
- 'provinceName': '云南省',
|
|
|
|
- 'cityName': '锡林郭勒盟',
|
|
|
|
- 'countyName': '双桥区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '本不叫间王装斯国强。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 103.73382063737,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10017,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '第资有军器张几际红矿八们。',
|
|
|
|
- 'terminalno': 117,
|
|
|
|
- 'provinceName': '新疆维吾尔自治区',
|
|
|
|
- 'cityName': '来宾市',
|
|
|
|
- 'countyName': '让胡路区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '建思很开应非文。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 161.2652895979,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10018,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '通每土感何几千工铁完在区江儿。',
|
|
|
|
- 'terminalno': 118,
|
|
|
|
- 'provinceName': '辽宁省',
|
|
|
|
- 'cityName': '秦皇岛市',
|
|
|
|
- 'countyName': '龙海市'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '系它难持保。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 93.6,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10019,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '北八约即于后志前极由习史。',
|
|
|
|
- 'terminalno': 119,
|
|
|
|
- 'provinceName': '黑龙江省',
|
|
|
|
- 'cityName': '太原市',
|
|
|
|
- 'countyName': '双牌县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '油后基交要可议。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 99.8360675,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10020,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '所着百中何现石别开百人酸道民特往。',
|
|
|
|
- 'terminalno': 120,
|
|
|
|
- 'provinceName': '黑龙江省',
|
|
|
|
- 'cityName': '佛山市',
|
|
|
|
- 'countyName': '谢家集区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '白长价办表干便。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 98.323,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10021,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '由如至等这总且调张常话线有采。',
|
|
|
|
- 'terminalno': 121,
|
|
|
|
- 'provinceName': '四川省',
|
|
|
|
- 'cityName': '澳门半岛',
|
|
|
|
- 'countyName': '邹城市'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '真保重其导水例。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 89.1839,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10022,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '变高值做经什无千年成且集须。',
|
|
|
|
- 'terminalno': 122,
|
|
|
|
- 'provinceName': '江西省',
|
|
|
|
- 'cityName': '九龙',
|
|
|
|
- 'countyName': '-'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '指况团将素定间消。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 130.7253866476,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10023,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '步十须东号部给米造属县该性。',
|
|
|
|
- 'terminalno': 123,
|
|
|
|
- 'provinceName': '浙江省',
|
|
|
|
- 'cityName': '唐山市',
|
|
|
|
- 'countyName': '通榆县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '性选变安心斗道求。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 115.05665,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10024,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '会整保术准许因圆引准因便品马济支。',
|
|
|
|
- 'terminalno': 124,
|
|
|
|
- 'provinceName': '吉林省',
|
|
|
|
- 'cityName': '韶关市',
|
|
|
|
- 'countyName': '中西区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '处那率西导活相活来段。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 112.35306815919544,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10025,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '结中严听代验平想与导光设。',
|
|
|
|
- 'terminalno': 125,
|
|
|
|
- 'provinceName': '台湾',
|
|
|
|
- 'cityName': '澳门半岛',
|
|
|
|
- 'countyName': '葵青区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '计保因除当。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 109.8,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10026,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '公想路则头求该把音即国正内。',
|
|
|
|
- 'terminalno': 126,
|
|
|
|
- 'provinceName': '河南省',
|
|
|
|
- 'cityName': '重庆市',
|
|
|
|
- 'countyName': '寿阳县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '保家林单会通以。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 122.66135364618854,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10027,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '南主历型教本上证格统积许感界后那。',
|
|
|
|
- 'terminalno': 127,
|
|
|
|
- 'provinceName': '广东省',
|
|
|
|
- 'cityName': '昌都地区',
|
|
|
|
- 'countyName': '榕城区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '装场较次文造边海意。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 164.25152937377285,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10028,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '形际管少回平至须具专日。',
|
|
|
|
- 'terminalno': 128,
|
|
|
|
- 'provinceName': '香港特别行政区',
|
|
|
|
- 'cityName': '云林县',
|
|
|
|
- 'countyName': '其它区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '当市圆义作存业半。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 161.01245771919,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10029,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '历已出区图或规要关化。',
|
|
|
|
- 'terminalno': 129,
|
|
|
|
- 'provinceName': '江西省',
|
|
|
|
- 'cityName': '海外',
|
|
|
|
- 'countyName': '其它区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '系想线想长。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 91.21834139614853,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10030,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '色量儿公运长声们入制么整离消志要。',
|
|
|
|
- 'terminalno': 130,
|
|
|
|
- 'provinceName': '安徽省',
|
|
|
|
- 'cityName': '云林县',
|
|
|
|
- 'countyName': '渝北区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '并近住处太日天。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 146.113779396,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10031,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '事小即之适与日改单备部次完置最。',
|
|
|
|
- 'terminalno': 131,
|
|
|
|
- 'provinceName': '四川省',
|
|
|
|
- 'cityName': '晋城市',
|
|
|
|
- 'countyName': '伽师县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '领造年算院十现他比。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 96,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10032,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '不往张着制色极命片布决。',
|
|
|
|
- 'terminalno': 132,
|
|
|
|
- 'provinceName': '陕西省',
|
|
|
|
- 'cityName': '宜兰县',
|
|
|
|
- 'countyName': '松溪县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '化量毛见使而。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 89,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10033,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '什果老例压争团事大光声选。',
|
|
|
|
- 'terminalno': 133,
|
|
|
|
- 'provinceName': '四川省',
|
|
|
|
- 'cityName': '临沧市',
|
|
|
|
- 'countyName': '闸北区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '南青类科属体达名路。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 170.3138633584148,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10034,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '除或究接北知龙老增之张争证公权。',
|
|
|
|
- 'terminalno': 134,
|
|
|
|
- 'provinceName': '江西省',
|
|
|
|
- 'cityName': '信阳市',
|
|
|
|
- 'countyName': '阜宁县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '者使光矿照有水写。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 117.82,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10035,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '当越商受示议无社题本问目。',
|
|
|
|
- 'terminalno': 135,
|
|
|
|
- 'provinceName': '山东省',
|
|
|
|
- 'cityName': '龙岩市',
|
|
|
|
- 'countyName': '隆德县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '志西院定自先变照今如。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 85.754742662974,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10036,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '当了型江在万近它且严民眼目。',
|
|
|
|
- 'terminalno': 136,
|
|
|
|
- 'provinceName': '海南省',
|
|
|
|
- 'cityName': '三门峡市',
|
|
|
|
- 'countyName': '通州区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '代命不量花族斯题节想。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 98.38545528,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10037,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '此本个理九道型中子每劳府象育到西交。',
|
|
|
|
- 'terminalno': 137,
|
|
|
|
- 'provinceName': '江苏省',
|
|
|
|
- 'cityName': '苗栗县',
|
|
|
|
- 'countyName': '平罗县'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '据切两它较般见林。',
|
|
|
|
- 'alertname': '各种报警',
|
|
|
|
- 'alertvalue': 155.737,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10038,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '里力大下相为比每争当般求。',
|
|
|
|
- 'terminalno': 138,
|
|
|
|
- 'provinceName': '海南省',
|
|
|
|
- 'cityName': '日喀则地区',
|
|
|
|
- 'countyName': '金州区'
|
|
|
|
-}, {
|
|
|
|
- 'alertdetail': '引三可为比事常族现表。',
|
|
|
|
- 'alertname': '水浸告警',
|
|
|
|
- 'alertvalue': 131.4231678633,
|
|
|
|
- 'createtime': '2022-04-19 08:38:33',
|
|
|
|
- 'deviceid': null,
|
|
|
|
- 'gatewayno': 10039,
|
|
|
|
- 'phase': 'A1',
|
|
|
|
- 'sbInfo': '手提个加极地平每备统。',
|
|
|
|
- 'terminalno': 139,
|
|
|
|
- 'provinceName': '江西省',
|
|
|
|
- 'cityName': '大同市',
|
|
|
|
- 'countyName': '万荣乡'
|
|
|
|
-}]
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.list = res.data.list
|
|
|
|
- let timer = setTimeout(() => {
|
|
|
|
- clearTimeout(timer)
|
|
|
|
- this.defaultOption.step=1
|
|
|
|
- }, 1000);
|
|
|
|
- // this.pageflag =false
|
|
|
|
- // currentGET('big5', { limitNum: 50 }).then(res => {
|
|
|
|
- // console.log('实时预警', res);
|
|
|
|
- // if (res.success) {
|
|
|
|
- // this.list = res.data.list
|
|
|
|
- // let timer = setTimeout(() => {
|
|
|
|
- // clearTimeout(timer)
|
|
|
|
- // this.defaultOption.step=this.$store.state.setting.defaultOption.step
|
|
|
|
- // }, this.$store.state.setting.defaultOption.waitTime);
|
|
|
|
- // } else {
|
|
|
|
- // this.pageflag = false
|
|
|
|
- // this.$Message.warning(res.msg)
|
|
|
|
- // }
|
|
|
|
- // })
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
|
|
+ props: ['htlistData'],
|
|
|
|
+ components: { vueSeamlessScroll, Kong },
|
|
|
|
+
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ list: [],
|
|
|
|
+ pageflag: true,
|
|
|
|
+ defaultOption: {
|
|
|
|
+ step: 0.5, // 数值越大速度滚动越快
|
|
|
|
+ hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
+ openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
+ direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
+ limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
+ singleHeight: 250, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
|
+ singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
+ waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ sbtxSwiperFlag() {
|
|
|
|
+ let ssyjSwiper = true
|
|
|
|
+ if (ssyjSwiper) {
|
|
|
|
+ this.components = vueSeamlessScroll
|
|
|
|
+ } else {
|
|
|
|
+ this.components = Kong
|
|
|
|
+ }
|
|
|
|
+ return ssyjSwiper
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ // this.getData()
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ htlistData(res) {
|
|
|
|
+ console.log('rightbottom')
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.list = res
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() { },
|
|
|
|
+ methods: {
|
|
|
|
+ // getData() {
|
|
|
|
+ // this.pageflag = true
|
|
|
|
+ // let res = {
|
|
|
|
+ // data:{
|
|
|
|
+ // list:[ {
|
|
|
|
+ // 'alertdetail': '引三可为比事常族现表。',
|
|
|
|
+ // 'alertname': '水浸告警',
|
|
|
|
+ // 'alertvalue': 131.4231678633,
|
|
|
|
+ // 'createtime': '2022-04-19 08:38:33',
|
|
|
|
+ // 'deviceid': null,
|
|
|
|
+ // 'gatewayno': 10039,
|
|
|
|
+ // 'phase': 'A1',
|
|
|
|
+ // 'sbInfo': '手提个加极地平每备统。',
|
|
|
|
+ // 'terminalno': 139,
|
|
|
|
+ // 'provinceName': '江西省',
|
|
|
|
+ // 'cityName': '大同市',
|
|
|
|
+ // 'countyName': '万荣乡'
|
|
|
|
+ // }]
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // this.list = res.data.list
|
|
|
|
+ // let timer = setTimeout(() => {
|
|
|
|
+ // clearTimeout(timer)
|
|
|
|
+ // this.defaultOption.step=1
|
|
|
|
+ // }, 1000);
|
|
|
|
+ // // this.pageflag =false
|
|
|
|
+ // // currentGET('big5', { limitNum: 50 }).then(res => {
|
|
|
|
+ // // console.log('实时预警', res);
|
|
|
|
+ // // if (res.success) {
|
|
|
|
+ // // this.list = res.data.list
|
|
|
|
+ // // let timer = setTimeout(() => {
|
|
|
|
+ // // clearTimeout(timer)
|
|
|
|
+ // // this.defaultOption.step=this.$store.state.setting.defaultOption.step
|
|
|
|
+ // // }, this.$store.state.setting.defaultOption.waitTime);
|
|
|
|
+ // // } else {
|
|
|
|
+ // // this.pageflag = false
|
|
|
|
+ // // this.$Message.warning(res.msg)
|
|
|
|
+ // // }
|
|
|
|
+ // // })
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
<style lang='scss' scoped>
|
|
.right_center {
|
|
.right_center {
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
-
|
|
|
|
- .right_center_item {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: auto;
|
|
|
|
- padding: 10px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #fff;
|
|
|
|
-
|
|
|
|
- .orderNum {
|
|
|
|
- margin: 0 20px 0 -20px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- .inner_right {
|
|
|
|
- position: relative;
|
|
|
|
- height: 100%;
|
|
|
|
- width: 400px;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- line-height: 1.5;
|
|
|
|
-
|
|
|
|
- .dibu {
|
|
|
|
- position: absolute;
|
|
|
|
- height: 2px;
|
|
|
|
- width: 104%;
|
|
|
|
- background-image: url("../../assets/images/zuo_xuxian.png");
|
|
|
|
- bottom: -12px;
|
|
|
|
- left: -2%;
|
|
|
|
- background-size: cover;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .info {
|
|
|
|
- margin-right: 10px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
-
|
|
|
|
- .labels {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .zhuyao {
|
|
|
|
- color: red;
|
|
|
|
- font-size: 15px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .ciyao {
|
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .warning {
|
|
|
|
- color: #E6A23C;
|
|
|
|
- font-size: 15px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+
|
|
|
|
+ .right_center_item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: auto;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #fff;
|
|
|
|
+
|
|
|
|
+ .orderNum {
|
|
|
|
+ margin: 0 20px 0 -20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .inner_right {
|
|
|
|
+ position: relative;
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 400px;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ line-height: 1.5;
|
|
|
|
+
|
|
|
|
+ .dibu {
|
|
|
|
+ position: absolute;
|
|
|
|
+ height: 2px;
|
|
|
|
+ width: 104%;
|
|
|
|
+ background-image: url("../../assets/images/zuo_xuxian.png");
|
|
|
|
+ bottom: -12px;
|
|
|
|
+ left: -2%;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .info {
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .labels {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .zhuyao {
|
|
|
|
+ color: red;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ciyao {
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .warning {
|
|
|
|
+ color: #E6A23C;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.right_center_wrap {
|
|
.right_center_wrap {
|
|
- overflow: hidden;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 190px;
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 190px;
|
|
}
|
|
}
|
|
|
|
|
|
.overflow-y-auto {
|
|
.overflow-y-auto {
|
|
- overflow-y: auto;
|
|
|
|
|
|
+ overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|