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.
 
 
 

318 regels
8.9 KiB

  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. </view>
  50. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  51. <view class="boxzonglan">
  52. <view class="zonglantit">简报</view>
  53. <view class="zonglanbox">
  54. <view class="grid" v-for="(item,index) in numlist" :key="index">
  55. <view class="audonum">{{item.name}}</text></view>
  56. <view class="num">{{item.num}}</view>
  57. </view>
  58. </view>
  59. </view>
  60. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  61. <view class="single">
  62. <view class="title">
  63. <view class="title1">接待趋势</view>
  64. </view>
  65. <view class="swiper-box">
  66. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2"
  67. inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
  68. </u-tabs-swiper>
  69. </view>
  70. <view class="hejibox">
  71. <view class="heji">合计:50</view>
  72. <view class="heji">均值:25</view>
  73. </view>
  74. <view class="danwei">来访(人)</view>
  75. <view class="uchaserbox">
  76. <qiun-data-charts
  77. type="line"
  78. :chartData="lineOptsect"
  79. background="none"
  80. :ontouch="true"
  81. canvasId="wangxiaohuaerlingeryilingwuyiba1"
  82. :canvas2d="true"
  83. />
  84. </view>
  85. </view>
  86. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  87. <view class="single">
  88. <view class="title">
  89. <view class="title1">团队接待趋势</view>
  90. <view class="title2">
  91. <view class="title2-che">毛丫丫
  92. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  93. </view>
  94. <view class="title2-che">执行率
  95. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  96. </view>
  97. </view>
  98. </view>
  99. <view class="hejibox">
  100. <view class="heji">合计:50</view>
  101. <view class="heji">均值:25</view>
  102. </view>
  103. <view class="danwei">来访(人)</view>
  104. <view class="uchaserbox">
  105. <qiun-data-charts
  106. type="line"
  107. :chartData="lineOptsect"
  108. background="none"
  109. :ontouch="true"
  110. canvasId="wangxiaohuaerlingeryilingwuyibao"
  111. :canvas2d="true"
  112. />
  113. </view>
  114. </view>
  115. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  116. <view class="single">
  117. <view class="title">
  118. <view class="title1">销讲维度执行率</view>
  119. <view class="title3">
  120. <view class="title3-box">
  121. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
  122. </view>
  123. <view class="title3-box">
  124. <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
  125. </view>
  126. </view>
  127. </view>
  128. <view class="hejibox">
  129. <view class="heji">合计:50</view>
  130. <view class="heji">均值:25</view>
  131. </view>
  132. <view class="jindu">
  133. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  134. <view class="jindu-boxche">
  135. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  136. <view style="width: 440rpx;margin-left: 10rpx;">
  137. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  138. </view>
  139. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  145. <view class="single">
  146. <view class="title">
  147. <view class="title1">销讲指标执行率</view>
  148. </view>
  149. <view class="swiper-box">
  150. <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2"
  151. inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
  152. </u-tabs-swiper>
  153. </view>
  154. <view class="hejibox">
  155. <view class="heji">合计:50</view>
  156. <view class="heji">均值:25</view>
  157. </view>
  158. <view class="jindu">
  159. <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
  160. <view class="jindu-boxche">
  161. <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
  162. <view style="width: 440rpx;margin-left: 10rpx;">
  163. <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
  164. </view>
  165. <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  171. </view>
  172. </template>
  173. <script>
  174. var app = getApp();
  175. var util = require("../../../utils/util.js");
  176. var config = require("../../../config");
  177. export default {
  178. data() {
  179. return {
  180. activeTotal: 2,
  181. activeTotal2: 0,
  182. timeobj:{
  183. statDateStart:'',
  184. statDateEnd:''
  185. },
  186. totalTimeShow: false,
  187. activeTab: 0,
  188. numlist:[
  189. {name:'接待量',num:'10'},
  190. {name:'平均执行率',num:'10'},
  191. {name:'接待客户',num:'10'},
  192. ],
  193. lineOptsect:{
  194. "categories": ["2016","2017","2018","2019","2020","2021"],
  195. "series": [
  196. {
  197. "name": "成交量",
  198. "data": [35,8,25,37,4,20]
  199. }
  200. ]
  201. },
  202. newlistoj:[
  203. {name:"接待量",id:1},
  204. {name:"平均执行率",id:2},
  205. {name:"接待客户",id:3},
  206. {name:"接待",id:4},
  207. {name:"接待量",id:5},
  208. {name:"接待",id:6},
  209. ],
  210. bocindex:0,
  211. newlisttabinfo:[
  212. {name:'接待量',zxl:'10'},
  213. {name:'平均执行率',zxl:'50'},
  214. {name:'接待客户',zxl:'80'},
  215. ],
  216. };
  217. },
  218. onLoad() {
  219. },
  220. methods: {
  221. //时间切换
  222. tabtimetap(index) {
  223. if (index == 3) {
  224. this.totalTimeShow = true;
  225. } else {
  226. this.activeTotal = index;
  227. }
  228. },
  229. //自定义时间
  230. totalTimeChange(e) {
  231. console.log(e.startDate, e.endDate)
  232. this.activeTotal=3;
  233. },
  234. //指标执行率分析tab
  235. tapspagek2(index) {
  236. this.bocindex = index;
  237. },
  238. //集团对比
  239. Groupcontrast(){
  240. uni.navigateTo({
  241. url: '/pages/center/Piabodata/Groupcontrast'
  242. });
  243. },
  244. //团队对比
  245. Theteamcompared(){
  246. uni.navigateTo({
  247. url: '/pages/center/Piabodata/Theteamcompared'
  248. });
  249. },
  250. //用户洞察
  251. toUserinsightinto(){
  252. uni.navigateTo({
  253. url: '/pages/center/Piabodata/Userinsightinto'
  254. });
  255. },
  256. //趋势分析
  257. toTrendAnalysis(){
  258. uni.navigateTo({
  259. url: '/pages/center/Piabodata/TrendAnalysis'
  260. });
  261. },
  262. //员工分析
  263. toStaffAnalysis(){
  264. uni.navigateTo({
  265. url: '/pages/center/Piabodata/StaffAnalysis'
  266. });
  267. }
  268. }
  269. };
  270. </script>
  271. <style lang="scss" scoped>
  272. .box {
  273. width: 100%;
  274. height: 100%;
  275. background: #FAFAFA;
  276. padding-bottom: 60rpx;
  277. }
  278. .Piabodata-box{
  279. width: 100%;
  280. background: #FFFFFF;
  281. display: flex;
  282. flex-wrap: wrap;
  283. padding-bottom: 30rpx;
  284. .Piabodata{
  285. width: 33.3%;
  286. .Piabodata-img{
  287. width: 100%;
  288. text-align: center;
  289. .Piabodata-img1{
  290. width: 134rpx;
  291. height: 134rpx;
  292. }
  293. }
  294. .Piabodata-text{
  295. width: 100%;
  296. text-align: center;
  297. font-size: 24rpx;
  298. font-weight: 400;
  299. color: #333333;
  300. margin-top: -10rpx;
  301. }
  302. }
  303. }
  304. </style>