横向柱状图及三个列表页排版

common/common.css

@@ -1,5 +1,113 @@
+/* common */
+
 /* 九宫格样式 */
-	.cu-list.grid>.cu-item uni-text {
+.cu-list.grid>.cu-item uni-text {
+	color: #333;
+	font-size: 30rpx;
+}
+
+.cu-list.menu-avatar>.cu-item>.cu-avatar {
+	left: 24rpx
+}
+
+.cu-list.menu-avatar>.cu-item .action {
+	width: 132rpx
+}
+
+/* 列列表公共样式 */
+.processWrapper .cu-avatar {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-color: #fff
+}
+.cu-avatar.lg {
+	width: 90rpx;
+	height: 90rpx
+}
+
+.cu-list.menu-avatar .cu-item {
+	margin-left: 24rpx;
+	padding: 30rpx 0;
+}
+.cu-list.menu-avatar>.cu-item>.cu-avatar {
+	left: 0
+}
+.cu-list.menu-avatar>.cu-item .content {
+	left: 120rpx;
+	width: 460rpx;
+}	
+
+.unProcess{
+	color: #FF4E00	
+}
+.processed{
+	color:#08BE04
+	
+}
+
+/* 页面样式 */
+
+/* 站点列表页 */
+/* 筛选框 */
+	.filter-section {
+		position: fixed;
+		top: 88rpx;
+		width: 100%;
+		z-index: 9
+	}
+	.cu-bar .search-form {
+		background: #fff
+	}
+	.cu-btn {
+		padding: 0 46rpx;
+	}
+	/* 站点列表 */
+	.site-items {
+		position: fixed;
+		top: 180rpx;
+		width: 100%;
+		height: calc(100% - 290rpx);;
+		overflow: scroll
+	}
+	.site-items .site-tit {
+		font-size: 32rpx;
 		color: #333;
-		font-size: 30rpx;
-	}
+	}
+	.site-items .cu-list.menu-avatar>.cu-item {
+		padding-right: 25rpx;
+
+	}
+	.site-items .cu-avatar {
+		
+	}
+	
+	/* 新增按钮 */
+	.site-wrapper .plus {
+		position: fixed;
+		bottom: 20rpx;
+		right: 20rpx
+	}
+
+
+/* 已处理未处理列表 */
+.processList .cu-list.menu-avatar .cu-item {
+	height: 178rpx;
+}
+.pro-title {
+	color: #333;
+}
+.pro-des,
+.pro-date {
+	font-size: 28rpx;
+	color: #666;
+}
+.pro-res {
+	
+}
+.processList{
+	position: fixed;
+	    top: 100rpx;
+		width:100%;
+	height: calc(100% - 100rpx);
+	    overflow-y: scroll;
+}

pages.json

@@ -24,9 +24,19 @@
 			"path": "pages/siteList/siteList",
 			"style": {
 				"navigationBarTitleText": "站点列表"
-		
 			}
 		},
+		{
+			"path": "pages/processList/processList",
+			"style": {
+				"navigationBarTitleText": "处理列表"
+			}
+		},
+		
+		
+		
+		
+		
 		
 		{
 			"path": "pages/info/info",
@@ -93,6 +103,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/processList/processList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -100,7 +119,8 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
-	"tabBar": {
+	"tabBar": {
+		"borderStyle":"white",
 		"list": [{
 				"pagePath": "pages/index/index",
 				"iconPath": "static/home.png",

pages/alarmingList/alarmingList.vue

@@ -3,7 +3,7 @@
 		<!-- 宫格列表 -->
 		<view class="section2 section  bg-white margin-top-sm margin-bottom-sm">
 			<view class="cu-list grid col-3 no-border">
-				<view class="cu-item justify-center align-center" >
+				<view class="cu-item justify-center align-center"  @tap="goProcessList">
 					<image src="../../static/square-dl.png" style="width:100rpx;height:100rpx"></image>
 					<view class="cu-tag badge">99+
 					</view>
@@ -35,6 +35,15 @@
 		
 		},
 		methods: {
+			// 页面跳转
+			goProcessList() {
+				uni.navigateTo({
+					url: '/pages/processList/processList',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
 			
 		}
 	}

pages/index/components/chart/chart.vue

@@ -6,7 +6,10 @@
 	</view>
 </template>
 
-<script>
+<script>
+	
+	
+	
 	export default {
 		data() {
 			return {

pages/index/components/chart2/chart2.vue

@@ -22,8 +22,7 @@
 						trigger: 'item'
 					},
 					legend: {
-						left:'center'
-							
+						left: 'center'
 					},
 					color: ['#F67F32', '#3BD2BD', '#1DABFE'],
 					series: [{

pages/index/components/chart3/chart3.vue

@@ -2,50 +2,152 @@
 	<view class="content">
 
 		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts3" class="echarts"></view>
-	
+
 	</view>
 </template>
 
 <script>
+	//start
+
+	//end
+
+
 	export default {
 		data() {
 			return {
-				option: {
-					
-					 title: {
-					        left: 'center'
-					    },
-					    tooltip: {
-					        trigger: 'item'
-					    },
-					    legend: {
-					        // orient: 'vertical',
-					        left: 'center',
-					    },
-						color:[ '#3C8BF0', '#dd514c'],
-					    series: [
-					        {
-					            name: '访问来源',
-					            type: 'pie',
-					            radius: '60%',
-					            data: [
-					                {value: 1048, name: '搜索引擎'},
-					                {value: 735, name: '直接访问'},
-					               
-					            ],
-					            emphasis: {
-					                itemStyle: {
-					                    shadowBlur: 10,
-					                    shadowOffsetX: 0,
-					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-					                }
-					            }
-					        }
-					    ]
+				option: {
+					// legend: {
+					//         data: ['bar', 'bar2', 'bar3', 'bar4'],
+					// 		color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
+							
+					//     },
+					grid: {  //aa位置
+						top: '2%',
+						right: '-5%',
+						bottom: '1%',
+						left: '17%',
+						
+					},
+
+					color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
+					xAxis: [{
+						show: false
+					}],
+					yAxis: [{  //aay轴
+							axisTick: 'none',
+							axisLine: 'none',
+							axisLabel: {
+								verticalAlign: 'bottom',
+								align: 'bottom',
+								padding: [0, 0, 8, 5],
+								textStyle: {
+									color: '#333',
+									fontSize:'16'
+
+								}
+							},
+							data: ['正常 1569','其他 569','预警 156','故障 0','离线 12'   ],
+
+						},
+						{
+							//左侧柱状图的Y轴
+							axisTick: 'none',
+							axisLine: 'none',
+							data: [70,20,8,0,12],
+							axisLabel: {
+								show: true,
+								verticalAlign: 'bottom',
+								align: 'right',
+								padding: [0, 45, 8, 0],
+								textStyle: {
+									color: '#333',
+									fontSize:'15'
+
+								},
+								formatter: function(value) {
+									return value + '%'
+								}
+
+							}
+						},
+
+					],
+					series: [{
+							type: 'bar',
+							data: [1357, , , , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						}, {
+							type: 'bar',
+							data: [ ,1260, , , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						}, {
+							type: 'bar',
+							data: [ , ,36, , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+						{
+							type: 'bar',
+							data: [ , , ,36, ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+						{
+							type: 'bar',
+							data: [ , , , ,100],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+
+						{
+							type: 'bar',
+							barGap: '-100%',
+							data: [1554, 1554, 1554, 1554, 1554],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									color: 'rgba(0,0,0, 0.15)',
+									barBorderRadius: 6,
+								}
+							},
+							z: 0
+						},
+					]
 				}
-			}
+			}
+			
+			
 		},
-		onLoad() {
+		onLoad() {
+			
+			// this.option.series.reverse()
 
 		},
 		methods: {
@@ -84,12 +186,12 @@
 				// 观测更新的数据在 view 层可以直接访问到
 				myChart.setOption(this.option)
 			},
-			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
 				// 监听 service 层数据变更
 				myChart.setOption(newValue)
 			},
-			onClick(event, ownerInstance) {
-				// 调用 service 层的方法
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
 				ownerInstance.callMethod('onViewClick', {
 					test: 'test'
 				})
@@ -108,7 +210,8 @@
 
 	.echarts {
 		width: 100%;
-		height: 500rpx;
-		margin-top:70rpx;
+		height: 500rpx;
+		margin-top: 70rpx;
+		/* 	background:pink */
 	}
 </style>

pages/index/index.vue

@@ -12,11 +12,21 @@
 				<view v-if="Inv == 0">
 					<chart></chart>
 				</view>
-				<view v-if="Inv == 1">
+				<view v-if="Inv == 1">
+					
 					<chart2></chart2>
 				</view>
-				<view v-if="Inv == 2">
-					<chart3></chart3>
+				<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>
+					<chart3>
+						
+					</chart3>
 				</view>
 			</view>
 		</view>
@@ -27,7 +37,7 @@
 			<view class="cu-list grid col-3 no-border">
 				<!-- <navigator url="/pages/siteList/siteList">
 				</navigator> -->
-				<view class="cu-item justify-center align-center" @tap="goAlarmingList">
+				<view class="cu-item justify-center align-center" @tap="goSiteList">
 					<image src="../../static/square1.png" style="width:100rpx;height:100rpx"></image>
 					<view class="cu-tag badge">99+
 					</view>
@@ -93,15 +103,13 @@
 				that.navIdx = Inv;
 
 			},
-			goAlarmingList() {
+			goSiteList() {
 				uni.navigateTo({
-					url: '/pages/alarmingList/alarmingList',
+					url: '/pages/siteList/siteList',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
-
-
 			}
 
 
@@ -160,7 +168,20 @@
 		color: #666666;
 		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}
 
 
 	

pages/processList/processList.vue

@@ -0,0 +1,93 @@
+<template>
+	<view class="processWrapper ">
+		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
+			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
+			 :data-id="index">
+				{{tabNav[index]}}
+			</view>
+		</scroll-view>
+		<block v-if="TabCur==0">
+			<view class="processList">
+				<view class="cu-list menu-avatar ">
+					<view class="cu-item" v-for="(item,index) in 12" :key="index">
+						<view class="cu-avatar lg" style="background-image:url(../../static/process-icon.png);"></view>
+						<view class="content">
+							<view class="pro-title">
+								<view class="cut">[2020]HP第DZ4104号人工督查单</view>
+							</view>
+							<view class="pro-des  ">
+								<view class="text-cut">
+									事件未处理测试
+								</view>
+							</view>
+							<view class="pro-date ">2020-01-08 15:15:12</view>
+						</view>
+						<view class="action">
+							<view class="unprocess">未处理</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</block>
+		<block v-if="TabCur==1">
+			<view class="processList">
+				<view class="cu-list menu-avatar ">
+					<view class="cu-item" v-for="(item,index) in 12" :key="index">
+						<view class="cu-avatar lg" style="background-image:url(../../static/process-icon.png);"></view>
+						<view class="content">
+							<view class="pro-title">
+								<view class="cut">[2020]HP第DZ4104号人工督查单</view>
+							</view>
+							<view class="pro-des  ">
+								<view class="text-cut">
+									事件未处理测试
+								</view>
+							</view>
+							<view class="pro-date ">2020-01-08 15:15:12</view>
+						</view>
+						<view class="action">
+							<view class="processed">已处理</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</block>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+
+				modalName: null,
+				listTouchStart: 0,
+				listTouchDirection: null,
+
+
+
+
+				CustomBar: this.CustomBar,
+				TabCur: 0,
+				avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
+					'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
+				],
+				tabNav: ['未处理', '已处理']
+			};
+		},
+		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/siteList/siteList.vue

@@ -1,22 +1,97 @@
-<template>
-	<view>
-		站点列表12233
-	</view>
-</template>
-
-<script>
-	export default {
+<template>
+	<view class="site-wrapper">
+		<!-- 筛选框start -->
+		<view class="cu-bar search bg-gray filter-section">
+			<view class="search-form round bg-white">
+				<text class="cuIcon-search"></text>
+				<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
+				 confirm-type="search"></input>
+			</view>
+			<view class="action">
+				<button class="cu-btn bg-blue round">查询</button>
+			</view>
+		</view>
+		<!-- 筛选框end -->
+		
+		<!-- 站点列表start -->
+		<view class="site-items">
+			<view class="cu-list menu-avatar">
+				<view class="cu-item"  :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 12" :key="index"
+					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
+					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
+					<view class="content" @tap="goAlarmingList">
+						<view class="text-grey site-tit">测试站点一</view>
+					</view>
+					<view class="nav-right">
+						<view class="text-grey text-xs">
+							<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx"></image>
+						</view>
+					</view>
+					<view class="move">
+						<view class="bg-grey">编辑</view>
+						<view class="bg-red">删除</view>
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<!-- 站点列表end -->
+		
+		<!-- 新增按钮start -->
+		<view class="plus">
+			<image src="../../static/plus.png" style="width:125rpx;height:125rpx"></image>
+		</view>
+		<!-- 新增按钮end -->
+	</view>
+
+</template>
+
+<script>
+	export default {
 		data() {
-			return {   
-				
-			}
+			return {
+		
+				modalName: null,
+				listTouchStart: 0,
+				listTouchDirection: null,
+			};
 		},
 		methods: {
 			
-		}
-	}
-</script>
-
-<style>
-
+			// 页面跳转
+			goAlarmingList() {
+				uni.navigateTo({
+					url: '/pages/alarmingList/alarmingList',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
+		
+			// ListTouch触摸开始
+			ListTouchStart(e) {
+				this.listTouchStart = e.touches[0].pageX
+			},
+		
+			// ListTouch计算方向
+			ListTouchMove(e) {
+				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
+			},
+		
+			// ListTouch计算滚动
+			ListTouchEnd(e) {
+				if (this.listTouchDirection == 'left') {
+					this.modalName = e.currentTarget.dataset.target
+				} else {
+					this.modalName = null
+				}
+				this.listTouchDirection = null
+			}
+		}
+		
+	}
+</script>
+
+<style>
+	
 </style>