AI销管
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.
 
 
 
 

338 regels
8.1 KiB

  1. <template>
  2. <view class="dailyDetail">
  3. <view class="title">
  4. <view class="text">
  5. <text class="h1">01月27日接待指标概览数据报告</text>
  6. <text class="h4">生成时间:2022-01-27 01:22</text>
  7. </view>
  8. </view>
  9. <view class="donutChart">
  10. <qiun-data-charts :key="000" type="ring" :chartData="donutChartData" :canvas2d="true"
  11. :canvasId='wangxiaohuahahahahaha000' :opts='donutChartOpts' background="#FFFFFF" />
  12. </view>
  13. <view class="tit">异动指标</view>
  14. <view class="lineChart">
  15. <view class="lineT">平均执行率 :98%</view>
  16. <view class="lineChart">
  17. <qiun-data-charts type="line" :chartData="lineChartData1" :opts='lineChartOpts' background="none"
  18. :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
  19. </view>
  20. <view class="details">
  21. <view class="statusIcon down"></view>
  22. <text class="textInfo">
  23. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  24. </text>
  25. </view>
  26. </view>
  27. <view class="lineChart">
  28. <view class="lineT">平均接待时长 :66min</view>
  29. <view class="lineChart">
  30. <qiun-data-charts type="line" :chartData="lineChartData2" :opts='lineChartOpts' background="none"
  31. :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyiccc" :canvas2d="true" />
  32. </view>
  33. <view class="details">
  34. <view class="statusIcon down"></view>
  35. <text class="textInfo">
  36. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  37. </text>
  38. </view>
  39. </view>
  40. <view class="tit">稳定指标</view>
  41. <view class="stabilityItem">
  42. <view class="T">平均执行率 :98%</view>
  43. <view class="details">
  44. <view class="statusIcon up"></view>
  45. <text class="textInfo">
  46. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  47. </text>
  48. </view>
  49. </view>
  50. <view class="stabilityItem">
  51. <view class="T">最低执行率 :28%</view>
  52. <view class="details">
  53. <view class="statusIcon up"></view>
  54. <text class="textInfo">
  55. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  56. </text>
  57. </view>
  58. </view>
  59. <view class="stabilityItem">
  60. <view class="T">平均执行率 :98%</view>
  61. <view class="details">
  62. <view class="statusIcon up"></view>
  63. <text class="textInfo">
  64. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  65. </text>
  66. </view>
  67. </view>
  68. <view class="stabilityItem">
  69. <view class="T">设备使用率 :75%(在线15,离线5)</view>
  70. <view class="details">
  71. <view class="statusIcon up"></view>
  72. <text class="textInfo">
  73. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  74. </text>
  75. </view>
  76. </view>
  77. <view class="stabilityItem">
  78. <view class="T">接待量 :35</view>
  79. <view class="details">
  80. <view class="statusIcon up"></view>
  81. <text class="textInfo">
  82. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  83. </text>
  84. </view>
  85. </view>
  86. <view class="stabilityItem">
  87. <view class="T">有效接待 :18</view>
  88. <view class="details">
  89. <view class="statusIcon up"></view>
  90. <text class="textInfo">
  91. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  92. </text>
  93. </view>
  94. </view>
  95. <view class="stabilityItem">
  96. <view class="T">违禁接待次数 :18</view>
  97. <view class="details">
  98. <view class="statusIcon up"></view>
  99. <text class="textInfo">
  100. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  101. </text>
  102. </view>
  103. </view>
  104. <view class="stabilityItem">
  105. <view class="T">接待顾问数 :18</view>
  106. <view class="details">
  107. <view class="statusIcon up"></view>
  108. <text class="textInfo">
  109. 01月27日接待的平均执行率明显上涨,环比26日上涨<text class="upText">120%</text>,同比上周上涨<text class="downText">10%</text>
  110. </text>
  111. </view>
  112. </view>
  113. </view>
  114. </template>
  115. <script>
  116. export default {
  117. data() {
  118. return {
  119. donutChartData: {
  120. series: [{
  121. data: [{
  122. "name": "明显下跌",
  123. "value": 9
  124. },
  125. {
  126. "name": "明显上涨",
  127. "value": 8
  128. },
  129. {
  130. "name": "稳定",
  131. "value": 8
  132. }
  133. ]
  134. }
  135. ],
  136. },
  137. donutChartOpts: {
  138. "legend": {
  139. "show": false,
  140. },
  141. "title": {
  142. "name": "总共",
  143. "fontSize": 18,
  144. "color": "#666666"
  145. },
  146. "subtitle": {
  147. "name": "9个",
  148. "fontSize": 14,
  149. },
  150. "extra": {
  151. "title": {
  152. "name": "总共",
  153. },
  154. "ring": {
  155. "ringWidth": 50,
  156. "centerColor": "#FFFFFF",
  157. "activeOpacity": 0.5,
  158. "activeRadius": 10,
  159. "offsetAngle": 0,
  160. "customRadius": 0,
  161. "labelWidth": 12,
  162. "border": false,
  163. "borderWidth": 3,
  164. "borderColor": "#FFFFFF",
  165. "linearType": "none",
  166. },
  167. }
  168. },
  169. lineChartData1: {
  170. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  171. "series": [{
  172. "name": "执行率",
  173. "data": [35, 8, 25, 37, 4, 20]
  174. }]
  175. },
  176. lineChartData2: {
  177. "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
  178. "series": [{
  179. "name": "时长",
  180. "data": [35, 8, 25, 37, 4, 20]
  181. }]
  182. },
  183. lineChartOpts: {
  184. "legend": {
  185. "show": false,
  186. },
  187. }
  188. }
  189. },
  190. methods: {
  191. }
  192. }
  193. </script>
  194. <style lang="scss">
  195. .dailyDetail {
  196. background-color: #f7f7f7;
  197. .title {
  198. padding: 26rpx 0 0;
  199. width: 100%;
  200. height: 150rpx;
  201. background-color: #008EF2;
  202. text {
  203. display: flex;
  204. flex-direction: column;
  205. justify-content: center;
  206. align-items: center;
  207. color: #FFFFFF;
  208. }
  209. .h1 {
  210. font-size: 40rpx;
  211. font-weight: bold;
  212. }
  213. .h4 {
  214. font-size: 30rpx;
  215. font-weight: bold;
  216. }
  217. }
  218. .donutChart {
  219. width: 90%;
  220. margin: 0 auto;
  221. }
  222. .tit {
  223. width: 220rpx;
  224. margin: 30rpx auto;
  225. text-align: center;
  226. font-size: 40rpx;
  227. font-weight: bold;
  228. border-bottom: 1rpx solid #3A8EED;
  229. }
  230. .lineChart {
  231. background-color: #FFFFFF;
  232. margin: 20rpx 0;
  233. padding: 20rpx;
  234. .lineT {
  235. font-size: 34rpx;
  236. font-weight: bold;
  237. }
  238. .lineChart {
  239. margin: 30rpx 0;
  240. }
  241. .details {
  242. display: flex;
  243. .statusIcon {
  244. width: 92rpx;
  245. height: 48rpx;
  246. }
  247. .up {
  248. background: url(img/up.png) no-repeat;
  249. background-size: 100%;
  250. }
  251. .down {
  252. background: url(img/down.png) no-repeat;
  253. background-size: 100%;
  254. }
  255. .textInfo {
  256. font-size: 30rpx;
  257. .upText {
  258. color: red;
  259. }
  260. .downText {
  261. color: green;
  262. }
  263. }
  264. }
  265. }
  266. .stabilityItem{
  267. background-color: #FFFFFF;
  268. margin: 20rpx 0;
  269. padding: 20rpx;
  270. .T {
  271. font-size: 34rpx;
  272. font-weight: bold;
  273. margin-bottom: 24rpx;
  274. }
  275. .details {
  276. display: flex;
  277. .statusIcon {
  278. width: 92rpx;
  279. height: 48rpx;
  280. }
  281. .up {
  282. background: url(img/up.png) no-repeat;
  283. background-size: 100%;
  284. }
  285. .down {
  286. background: url(img/down.png) no-repeat;
  287. background-size: 100%;
  288. }
  289. .textInfo {
  290. font-size: 30rpx;
  291. .upText {
  292. color: red;
  293. }
  294. .downText {
  295. color: green;
  296. }
  297. }
  298. }
  299. }
  300. }
  301. </style>