|
@@ -1,5 +1,19 @@
|
|
<template>
|
|
<template>
|
|
- <view style="background:#f1f1f1;height:1450rpx" class="padding-sm">
|
|
|
|
|
|
+ <view style="background:#f1f1f1;" class="padding-sm">
|
|
|
|
+ <view class="searchSelect shadow" v-if="flag">
|
|
|
|
+ <view class="cu-bar search bg-white">
|
|
|
|
+ <view class="search-form round">
|
|
|
|
+ <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="" confirm-type="search"></input>
|
|
|
|
+ <text class="cuIcon-search "></text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="select-item">虹泾总部园</view>
|
|
|
|
+ <view class="select-item">上海永天科技</view>
|
|
|
|
+ <view class="select-item">AAAAA</view>
|
|
|
|
+ <view class="select-item">BBBBBBB</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
<view class="section1 section bg-white padding-xs">
|
|
<view class="section1 section bg-white padding-xs">
|
|
<view class=" static-tabs grid margin-bottom text-center col-3 margin-top-sm margin-bottom-sm">
|
|
<view class=" static-tabs grid margin-bottom text-center col-3 margin-top-sm margin-bottom-sm">
|
|
<view :class="['padding-sm ',Inv==0?'active':'']" @click="Inv=0">报警信息统计</view>
|
|
<view :class="['padding-sm ',Inv==0?'active':'']" @click="Inv=0">报警信息统计</view>
|
|
@@ -10,110 +24,145 @@
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
<view v-if="Inv == 0">
|
|
<view v-if="Inv == 0">
|
|
- <!-- <chart></chart> -->
|
|
|
|
|
|
+ <!-- <chart></chart> -->
|
|
<chart4></chart4>
|
|
<chart4></chart4>
|
|
</view>
|
|
</view>
|
|
- <view v-if="Inv == 1">
|
|
|
|
-
|
|
|
|
|
|
+ <view v-if="Inv == 1">
|
|
|
|
+
|
|
<chart2></chart2>
|
|
<chart2></chart2>
|
|
</view>
|
|
</view>
|
|
- <view v-if="Inv == 2" class="chart3-box">
|
|
|
|
- <ul class="chart3-icon">
|
|
|
|
- <li><image src="../../static/chart3-1.png" style="width:64rpx;height:64rpx"></image></li>
|
|
|
|
- <li><image src="../../static/chart3-2.png" style="width:64rpx;height:64rpx"></image></li>
|
|
|
|
- <li><image src="../../static/chart3-3.png" style="width:64rpx;height:64rpx"></image></li>
|
|
|
|
- <li><image src="../../static/chart3-4.png" style="width:64rpx;height:64rpx"></image></li>
|
|
|
|
- <li><image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image></li>
|
|
|
|
|
|
+ <view v-if="Inv == 2" class="chart3-box">
|
|
|
|
+ <ul class="chart3-icon">
|
|
|
|
+ <li>
|
|
|
|
+ <image src="../../static/chart3-1.png" style="width:64rpx;height:64rpx"></image>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <image src="../../static/chart3-2.png" style="width:64rpx;height:64rpx"></image>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <image src="../../static/chart3-3.png" style="width:64rpx;height:64rpx"></image>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <image src="../../static/chart3-4.png" style="width:64rpx;height:64rpx"></image>
|
|
|
|
+ </li>
|
|
|
|
+ <li>
|
|
|
|
+ <image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image>
|
|
|
|
+ </li>
|
|
</ul>
|
|
</ul>
|
|
- <chart3>
|
|
|
|
-
|
|
|
|
|
|
+ <chart3>
|
|
|
|
+
|
|
</chart3>
|
|
</chart3>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <!-- 宫格列表 -->
|
|
|
|
- <square :cuIconList="cuIconList"></square>
|
|
|
|
- <!-- <view class="section2 section bg-white margin-top-sm margin-bottom-sm">
|
|
|
|
|
|
+ <!-- 宫格列表 -->
|
|
|
|
+ <!-- <square :cuIconList="cuIconList"></square> -->
|
|
|
|
+ <view class="section2 section bg-white margin-top-sm margin-bottom-sm">
|
|
<view class="cu-list grid col-3 no-border">
|
|
<view class="cu-list grid col-3 no-border">
|
|
- <view class="cu-item justify-center align-center" @tap="goSiteList" v-for="(item,index) in cuIconList" :key="index">
|
|
|
|
|
|
+ <view class="cu-item justify-center align-center" @tap=hrefKing(index) v-for="(item,index) in cuIconList" :key="index">
|
|
<image :src="`${item.imgUrl}`" style="width:100rpx;height:100rpx"></image>
|
|
<image :src="`${item.imgUrl}`" style="width:100rpx;height:100rpx"></image>
|
|
- <view class="cu-tag badge" v-if="item.badge!=0">
|
|
|
|
|
|
+ <view class="cu-tag badge" v-if="item.badge!=0">
|
|
<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
|
|
<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
|
|
</view>
|
|
</view>
|
|
<text>{{item.name}}</text>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view> -->
|
|
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import chart from './components/chart/chart.vue';
|
|
import chart from './components/chart/chart.vue';
|
|
import chart2 from './components/chart2/chart2.vue';
|
|
import chart2 from './components/chart2/chart2.vue';
|
|
- import chart3 from './components/chart3/chart3.vue';
|
|
|
|
|
|
+ import chart3 from './components/chart3/chart3.vue';
|
|
import chart4 from './components/chart4/chart4.vue';
|
|
import chart4 from './components/chart4/chart4.vue';
|
|
- // import square from '../../components/square/square.vue';
|
|
|
|
|
|
+ import json from '../../data/json.js';
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
chart,
|
|
chart,
|
|
chart2,
|
|
chart2,
|
|
- chart3,
|
|
|
|
- chart4
|
|
|
|
- // square
|
|
|
|
|
|
+ chart3,
|
|
|
|
+ chart4
|
|
|
|
+
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
- return {
|
|
|
|
-
|
|
|
|
- // 宫格列表数据
|
|
|
|
- cuIconList: [{
|
|
|
|
- imgUrl:'../../static/square1.png',
|
|
|
|
- badge: 120,
|
|
|
|
- name: '综合报警',
|
|
|
|
- redirectUrl:'/pages/siteList/siteList?type=1'
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square2.png',
|
|
|
|
- badge: 0,
|
|
|
|
- name: '运行监测',
|
|
|
|
- redirectUrl:'/pages/siteList/siteList?type=2'
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square-wb.png',
|
|
|
|
- badge: 0,
|
|
|
|
- name: '维保',
|
|
|
|
- redirectUrl:''
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square-bx.png',
|
|
|
|
- badge: 22,
|
|
|
|
- name: '报修',
|
|
|
|
- redirectUrl:''
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square-rl.png',
|
|
|
|
- badge: 0,
|
|
|
|
- name: '人脸识别',
|
|
|
|
- redirectUrl:''
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square-xj.png',
|
|
|
|
- badge: 0,
|
|
|
|
- badge: 0,
|
|
|
|
- name: '巡检',
|
|
|
|
- redirectUrl:''
|
|
|
|
- }, {
|
|
|
|
- imgUrl:'../../static/square-bz.png',
|
|
|
|
- badge: 0,
|
|
|
|
- badge: 0,
|
|
|
|
- name: '风险保障',
|
|
|
|
- redirectUrl:''
|
|
|
|
- }],
|
|
|
|
|
|
+ return {
|
|
|
|
+ flag: false,
|
|
|
|
+ // 宫格列表数据
|
|
|
|
+ cuIconList: json.cuIconList,
|
|
Inv: 0,
|
|
Inv: 0,
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
};
|
|
};
|
|
|
|
|
|
},
|
|
},
|
|
|
|
+ onNavigationBarButtonTap(e) {
|
|
|
|
+ if (e.float == 'right') {
|
|
|
|
+ console.log("你点击了扫一扫")
|
|
|
|
+ uni.scanCode({
|
|
|
|
+ success: function(res) {
|
|
|
|
+ console.log('条码类型:' + res.scanType);
|
|
|
|
+ console.log('条码内容:' + res.result);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ // alert("你点击了下拉");
|
|
|
|
+ this.showTag()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
onLoad() {},
|
|
onLoad() {},
|
|
methods: {
|
|
methods: {
|
|
|
|
+
|
|
|
|
+ hrefKing(index) {
|
|
|
|
+ // log(index)
|
|
|
|
+ let url = "";
|
|
|
|
+ switch (index) {
|
|
|
|
+ case 0:
|
|
|
|
+ url = "/pages/siteList/siteList?type=1" //进口水果
|
|
|
|
+ break;
|
|
|
|
+ case 1:
|
|
|
|
+ url = "/pages/siteList/siteList?type=2" //热门品种
|
|
|
|
+ break;
|
|
|
|
+ default:
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ if (url) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: url
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ // uni.showToast({
|
|
|
|
+ // title: '此模块开发中~',
|
|
|
|
+ // icon: 'none'
|
|
|
|
+ // });
|
|
|
|
+ uni.showModal({
|
|
|
|
+ title: 'Tips',
|
|
|
|
+ content: '此模块开发中~',
|
|
|
|
+ showCancel:false,
|
|
|
|
+ success: function (res) {
|
|
|
|
+ if (res.confirm) {
|
|
|
|
+ console.log('用户点击确定');
|
|
|
|
+ } else if (res.cancel) {
|
|
|
|
+ console.log('用户点击取消');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ showTag() {
|
|
|
|
+ this.flag = !this.flag;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ InputFocus(e) {
|
|
|
|
+ this.InputBottom = e.detail.height
|
|
|
|
+ },
|
|
|
|
+ InputBlur(e) {
|
|
|
|
+ this.InputBottom = 0
|
|
|
|
+ },
|
|
|
|
+
|
|
changeTab(Inv) {
|
|
changeTab(Inv) {
|
|
that.navIdx = Inv;
|
|
that.navIdx = Inv;
|
|
|
|
|
|
@@ -123,7 +172,7 @@
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
|
|
+<style lang="scss">
|
|
body {
|
|
body {
|
|
background: #f1f1f1 !important;
|
|
background: #f1f1f1 !important;
|
|
}
|
|
}
|
|
@@ -170,21 +219,32 @@
|
|
color: #666666;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chart3-box{
|
|
|
|
- position:relative
|
|
|
|
- }
|
|
|
|
- .chart3-icon{
|
|
|
|
- position:absolute;
|
|
|
|
- top:60rpx;
|
|
|
|
- left:30rpx
|
|
|
|
- }
|
|
|
|
- .chart3-icon li{
|
|
|
|
- padding-top:25rpx
|
|
|
|
- }
|
|
|
|
- ul,li{ padding:0;margin:0;list-style:none}
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart3-box {
|
|
|
|
+ position: relative
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart3-icon {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 60rpx;
|
|
|
|
+ left: 30rpx
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chart3-icon li {
|
|
|
|
+ padding-top: 25rpx
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ul,
|
|
|
|
+ li {
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+ list-style: none
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+ .shadow {
|
|
|
|
+ box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|