liumin
/
NewZkgj
1
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 Commits
7 Branches
28 MiB
 
 
 
Tree: 556e9af51d
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van '556e9af51d'
${ noResults }
NewZkgj/pages/center/Piabodata/index.vue

318 regels
8.9 KiB
Ruw Blame Geschiedenis 

  1. <template>

  2. 	<view class="box">

  3. 		<view class="boxtittab">

  4. 			<view class="tabbox">

  5. 				<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">今日</view>

  6. 			</view>

  7. 			<view class="tabbox">

  8. 				<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">昨日</view>

  9. 			</view>

  10. 			<view class="tabbox">

  11. 				<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">近一周</view>

  12. 			</view>

  13. 			<view class="tabbox">

  14. 				<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>

  15. 			</view>

  16. 		</view>

  17. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  18. 		<view class="Piabodata-box">

  19. 			<view class="Piabodata" @click="toTrendAnalysis()">

  20. 				<view class="Piabodata-img">

  21. 					<image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>

  22. 				</view>

  23. 				<view class="Piabodata-text">趋势分析</view>

  24. 			</view>

  25. 			<view class="Piabodata" @click="toStaffAnalysis()">

  26. 				<view class="Piabodata-img">

  27. 					<image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>

  28. 				</view>

  29. 				<view class="Piabodata-text">员工分析</view>

  30. 			</view>

  31. 			<view class="Piabodata" @click="toUserinsightinto()">

  32. 				<view class="Piabodata-img">

  33. 					<image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>

  34. 				</view>

  35. 				<view class="Piabodata-text">用户洞察</view>

  36. 			</view>

  37. 			<view class="Piabodata" @click="Theteamcompared()">

  38. 				<view class="Piabodata-img">

  39. 					<image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>

  40. 				</view>

  41. 				<view class="Piabodata-text">团队对比</view>

  42. 			</view>

  43. 			<view class="Piabodata" @click="Groupcontrast()">

  44. 				<view class="Piabodata-img">

  45. 					<image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>

  46. 				</view>

  47. 				<view class="Piabodata-text">集团对比</view>

  48. 			</view>

  49. 			

  50. 		</view>

  51. 		

  52. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  53. 		<view class="boxzonglan">

  54. 			<view class="zonglantit">简报</view>

  55. 			<view class="zonglanbox">

  56. 				<view class="grid" v-for="(item,index) in numlist" :key="index">

  57. 					<view class="audonum">{{item.name}}</text></view>

  58. 					<view class="num">{{item.num}}</view>

  59. 				</view>

  60. 			</view>

  61. 		</view>

  62. 		

  63. 		

  64. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  65. 		<view class="single">

  66. 			<view class="title">

  67. 				<view class="title1">接待趋势</view>

  68. 			</view>

  69. 			<view class="swiper-box">

  70. 				<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2"

  71. 				 inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">

  72. 				</u-tabs-swiper>

  73. 			</view>

  74. 			<view class="hejibox">

  75. 				<view class="heji">合计：50</view>

  76. 				<view class="heji">均值：25</view>

  77. 			</view>

  78. 			<view class="danwei">来访(人)</view>

  79. 			<view class="uchaserbox">

  80. 				<qiun-data-charts

  81. 				   type="line"

  82. 				   :chartData="lineOptsect"

  83. 				   background="none"

  84. 				   :ontouch="true"

  85. 					canvasId="wangxiaohuaerlingeryilingwuyiba1"

  86. 					:canvas2d="true"

  87. 				 /> 

  88. 			</view>

  89. 		</view>

  90. 		

  91. 		

  92. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  93. 		<view class="single">

  94. 			<view class="title">

  95. 				<view class="title1">团队接待趋势</view>

  96. 				<view class="title2">

  97. 					<view class="title2-che">毛丫丫

  98. 						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>

  99. 					</view>

  100. 					<view class="title2-che">执行率

  101. 						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>

  102. 					</view>

  103. 				</view>

  104. 			</view>

  105. 			<view class="hejibox">

  106. 				<view class="heji">合计：50</view>

  107. 				<view class="heji">均值：25</view>

  108. 			</view>

  109. 			<view class="danwei">来访(人)</view>

  110. 			<view class="uchaserbox">

  111. 				<qiun-data-charts

  112. 				   type="line"

  113. 				   :chartData="lineOptsect"

  114. 				   background="none"

  115. 				   :ontouch="true"

  116. 					canvasId="wangxiaohuaerlingeryilingwuyibao"

  117. 					:canvas2d="true"

  118. 				 /> 

  119. 			</view>

  120. 		</view>

  121. 		

  122. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  123. 		<view class="single">

  124. 			<view class="title">

  125. 				<view class="title1">销讲维度执行率</view>

  126. 				<view class="title3">

  127. 					<view class="title3-box">

  128. 						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>

  129. 					</view>

  130. 					<view class="title3-box">

  131. 						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>

  132. 					</view>

  133. 				</view>

  134. 			</view>

  135. 			<view class="hejibox">

  136. 				<view class="heji">合计：50</view>

  137. 				<view class="heji">均值：25</view>

  138. 			</view>

  139. 			<view class="jindu">

  140. 				<view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">

  141. 					<view class="jindu-boxche">

  142. 						<view class="jindu-name">{{item.name.substring(0, 4)}}</view>

  143. 						<view style="width: 440rpx;margin-left: 10rpx;">

  144. 							<u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>

  145. 						</view>

  146. 						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>

  147. 					</view>

  148. 				</view>

  149. 			</view>

  150. 		</view>

  151. 		

  152. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  153. 		<view class="single">

  154. 			<view class="title">

  155. 				<view class="title1">销讲指标执行率</view>

  156. 			</view>

  157. 			<view class="swiper-box">

  158. 				<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2"

  159. 				 inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">

  160. 				</u-tabs-swiper>

  161. 			</view>

  162. 			<view class="hejibox">

  163. 				<view class="heji">合计：50</view>

  164. 				<view class="heji">均值：25</view>

  165. 			</view>

  166. 			<view class="jindu">

  167. 				<view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">

  168. 					<view class="jindu-boxche">

  169. 						<view class="jindu-name">{{item.name.substring(0, 4)}}</view>

  170. 						<view style="width: 440rpx;margin-left: 10rpx;">

  171. 							<u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>

  172. 						</view>

  173. 						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>

  174. 					</view>

  175. 				</view>

  176. 			</view>

  177. 			

  178. 		</view>

  179. 		

  180. 		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>

  181. 	</view>

  182. </template>

  183. 

  184. <script>

  185. 	var app = getApp();

  186. 	var util = require("../../../utils/util.js");

  187. 	var config = require("../../../config");

  188. 	export default {

  189. 		data() {

  190. 			return {

  191. 				activeTotal: 2,

  192. 				activeTotal2: 0,

  193. 				timeobj:{

  194. 					statDateStart:'',

  195. 					statDateEnd:''

  196. 				},

  197. 				totalTimeShow: false,

  198. 				activeTab: 0,

  199. 				numlist:[

  200. 					{name:'接待量',num:'10'},

  201. 					{name:'平均执行率',num:'10'},

  202. 					{name:'接待客户',num:'10'},

  203. 				],

  204. 				lineOptsect:{

  205. 					"categories": ["2016","2017","2018","2019","2020","2021"],

  206. 					"series": [

  207. 						{

  208. 							"name": "成交量",

  209. 							"data": [35,8,25,37,4,20]

  210. 						}

  211. 					]

  212. 				},

  213. 				newlistoj:[

  214. 					{name:"接待量",id:1},

  215. 					{name:"平均执行率",id:2},

  216. 					{name:"接待客户",id:3},

  217. 					{name:"接待",id:4},

  218. 					{name:"接待量",id:5},

  219. 					{name:"接待",id:6},

  220. 				],

  221. 				bocindex:0,

  222. 				newlisttabinfo:[

  223. 					{name:'接待量',zxl:'10'},

  224. 					{name:'平均执行率',zxl:'50'},

  225. 					{name:'接待客户',zxl:'80'},

  226. 				],

  227. 				

  228. 			};

  229. 		},

  230. 		onLoad() {

  231. 			

  232. 		},

  233. 		methods: {

  234. 			//时间切换

  235. 			tabtimetap(index) {

  236. 				if (index == 3) {

  237. 					this.totalTimeShow = true;

  238. 				} else {

  239. 					this.activeTotal = index;

  240. 				}

  241. 			},

  242. 			//自定义时间

  243. 			totalTimeChange(e) {

  244. 				console.log(e.startDate, e.endDate)

  245. 				this.activeTotal=3;

  246. 			},

  247. 			//指标执行率分析tab

  248. 			tapspagek2(index) {

  249. 				this.bocindex = index;

  250. 			},

  251. 			//集团对比

  252. 			Groupcontrast(){

  253. 				uni.navigateTo({

  254. 				    url: '/pages/center/Piabodata/Groupcontrast'

  255. 				});

  256. 			},

  257. 			//团队对比

  258. 			Theteamcompared(){

  259. 				uni.navigateTo({

  260. 				    url: '/pages/center/Piabodata/Theteamcompared'

  261. 				});

  262. 			},

  263. 			//用户洞察

  264. 			toUserinsightinto(){

  265. 				uni.navigateTo({

  266. 				    url: '/pages/center/Piabodata/Userinsightinto'

  267. 				});

  268. 			},

  269. 			//趋势分析

  270. 			toTrendAnalysis(){

  271. 				uni.navigateTo({

  272. 				    url: '/pages/center/Piabodata/TrendAnalysis'

  273. 				});

  274. 			},

  275. 			//员工分析

  276. 			toStaffAnalysis(){

  277. 				uni.navigateTo({

  278. 				    url: '/pages/center/Piabodata/StaffAnalysis'

  279. 				});

  280. 			}

  281. 		}

  282. 	};

  283. </script>

  284. <style lang="scss" scoped>

  285. 	.box {

  286. 		width: 100%;

  287. 		height: 100%;

  288. 		background: #FAFAFA;

  289. 		padding-bottom: 60rpx;

  290. 	}

  291. 	.Piabodata-box{

  292. 		width: 100%;

  293. 		background: #FFFFFF;

  294. 		display: flex;

  295. 		flex-wrap: wrap;

  296. 		padding-bottom: 30rpx;

  297. 		.Piabodata{

  298. 			width: 33.3%;

  299. 			.Piabodata-img{

  300. 				width: 100%;

  301. 				text-align: center;

  302. 				.Piabodata-img1{

  303. 					width: 134rpx;

  304. 					height: 134rpx;

  305. 				}

  306. 			}

  307. 			.Piabodata-text{

  308. 				width: 100%;

  309. 				text-align: center;

  310. 				font-size: 24rpx;

  311. 				font-weight: 400;

  312. 				color: #333333;

  313. 				margin-top: -10rpx;

  314. 			}

  315. 		}

  316. 	}

  317. </style>