p-panel.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <div class="p-panel">
  3. <div class="p-panel-title font-sm">{{ title }}</div>
  4. <div class="p-panel-body">
  5. <div class="pp-info">
  6. <div class="pp-info-days">
  7. <span class="font-num green font-lg pp-info-days-num">{{
  8. days
  9. }}</span>
  10. <span class="gray font-sm">{{ daysUnit }}</span>
  11. </div>
  12. <div class="pp-info-data">
  13. <span class="gray-l font-sm">{{ data1Str }}</span>
  14. <span class="pp-icon-l svg-icon" :class="data1IconClass">
  15. <svg-icon :svgid="data1Icon" />
  16. </span>
  17. <span class="gray-l font-sm">{{ data2Str }}</span>
  18. <span class="pp-icon-r svg-icon" :class="data2IconClass">
  19. <svg-icon :svgid="data2Icon" />
  20. </span>
  21. </div>
  22. </div>
  23. <div class="pp-data">
  24. <div class="pp-tip" :style="'margin-left: ' + data * 100 + '%'">
  25. <div class="pp-tip-data font-sm">
  26. {{
  27. flip
  28. ? ((1 - data) * 100).toFixed(2) + "%"
  29. : (data * 100).toFixed(2) + "%"
  30. }}
  31. </div>
  32. <div class="pp-tip-icon">
  33. <i
  34. class="el-icon-caret-bottom font-sm"
  35. :style="'color: ' + dataColor"
  36. ></i>
  37. </div>
  38. </div>
  39. <div
  40. class="pp-data-box"
  41. :style="
  42. 'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
  43. "
  44. >
  45. <div class="pp-data-split" v-for="index of 19" :key="index"></div>
  46. <div
  47. class="pp-data-num"
  48. :style="
  49. 'width: ' + data * 100 + '%; background: ' + dataColor + ';'
  50. "
  51. ></div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. import SvgIcon from "@com/coms/icon/svg-icon.vue";
  59. export default {
  60. // 名称
  61. name: "Ppanel",
  62. // 使用组件
  63. components: {
  64. SvgIcon,
  65. },
  66. // 传入参数
  67. props: {
  68. title: {
  69. type: String,
  70. default: "利用小时",
  71. },
  72. days: {
  73. type: Number,
  74. default: 88.5,
  75. },
  76. daysUnit: {
  77. type: String,
  78. default: "小时",
  79. },
  80. data1Str: {
  81. type: String,
  82. default: "环",
  83. },
  84. data1IconClass: {
  85. type: String,
  86. default: "svg-icon-sm svg-icon-green",
  87. },
  88. data1Icon: {
  89. type: String,
  90. default: "svg-arrow-up-1",
  91. },
  92. data2Str: {
  93. type: String,
  94. default: "同",
  95. },
  96. data2Icon: {
  97. type: String,
  98. default: "svg-arrow-dpwn-1",
  99. },
  100. data2IconClass: {
  101. type: String,
  102. default: "svg-icon-sm svg-icon-yellow",
  103. },
  104. data: {
  105. type: Number,
  106. default: 0.75,
  107. },
  108. flip: {
  109. type: Boolean,
  110. default: false,
  111. },
  112. dataColor: {
  113. type: String,
  114. default: "#05BB4C",
  115. },
  116. backColor: {
  117. type: String,
  118. default: "#4B55AE",
  119. },
  120. },
  121. emits: {},
  122. // 数据
  123. data() {
  124. return {};
  125. },
  126. // 函数
  127. methods: {},
  128. // 生命周期钩子
  129. beforeCreate() {
  130. // 创建前
  131. },
  132. created() {
  133. // 创建后
  134. },
  135. beforeMount() {
  136. // 渲染前
  137. },
  138. mounted() {
  139. // 渲染后
  140. },
  141. beforeUpdate() {},
  142. updated() {},
  143. };
  144. </script>
  145. <style lang="less">
  146. .p-panel {
  147. background: #1a1f2fcc;
  148. width: 206px;
  149. .font-sm {
  150. font-size: 12px;
  151. }
  152. .font-lg {
  153. font-size: 16px;
  154. }
  155. .p-panel-title {
  156. height: 2.778vh;
  157. line-height: 2.778vh;
  158. text-align: center;
  159. color: #ffffff;
  160. border-bottom: 1px solid #ffffff66;
  161. }
  162. .p-panel-body {
  163. .pp-info {
  164. padding-top: 1.111vh;
  165. display: flex;
  166. .pp-info-days-num {
  167. padding: 1.204vh 0.926vh 0 1.944vh;
  168. }
  169. .pp-info-data {
  170. margin-left: auto;
  171. .pp-icon-l {
  172. padding: 1.111vh 1.037vh 0 0.556vh;
  173. }
  174. .pp-icon-r {
  175. padding: 1.111vh 0.833vh 0 0.556vh;
  176. }
  177. }
  178. }
  179. .pp-data {
  180. padding: 0.741vh 0.556vh 1.389vh 0.556vh;
  181. .pp-tip {
  182. display: inline-block;
  183. .pp-tip-data,
  184. .pp-tip-icon {
  185. margin-left: -100%;
  186. text-align: center;
  187. }
  188. .pp-tip-icon {
  189. margin-top: -0.37vh;
  190. }
  191. }
  192. .pp-data-box {
  193. height: 0.741vh;
  194. width: 190px;
  195. border: 1px solid;
  196. position: relative;
  197. display: flex;
  198. transform: skewX(-25deg);
  199. .pp-data-split {
  200. width: 10px;
  201. height: 100%;
  202. z-index: 2;
  203. transition: 0.2s;
  204. + .pp-data-split {
  205. border-left: 1px solid #172f2e;
  206. }
  207. }
  208. .pp-data-num {
  209. position: absolute;
  210. top: 0;
  211. left: 0;
  212. height: 100%;
  213. z-index: 1;
  214. }
  215. }
  216. }
  217. }
  218. }
  219. </style>