danelBd.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <div class="danelBd">
  3. <div v-if="moduleName" class="dane-title"
  4. :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
  5. <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
  6. <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
  7. <span>{{ moduleName }}</span>
  8. </div>
  9. <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
  10. <!-- 下拉框 -->
  11. <div class="common-navR-select" v-if="commonTitle=='selected'">
  12. <a-select style="width: 140px" v-model="selectVal" size="small" allowClear class="code-mode-select"
  13. placeholder="请选择">
  14. <a-select-option v-for="device in selectList" :key="device.value" :value="device.value">{{
  15. device.label
  16. }}
  17. </a-select-option>
  18. </a-select>
  19. </div>
  20. <!-- 日期组件 -->
  21. <div class="common-navR-date" v-if="commonTitle=='datePikers'">
  22. <a-range-picker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }"
  23. format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
  24. </div>
  25. <!-- 开关组件 -->
  26. <div class="common-navR-switch" v-if="commonTitle=='switchs'">
  27. <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
  28. <a-switch v-model:checked="checked" />
  29. <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
  30. </div>
  31. </div>
  32. </div>
  33. <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH, }">
  34. <div class="t-line"></div>
  35. <slot></slot>
  36. </div>
  37. </div>
  38. </template>
  39. <script setup lang="ts">
  40. import { ref, reactive, defineProps } from 'vue'
  41. let props = defineProps({
  42. //标题
  43. moduleName: {
  44. type: String,
  45. default: ''
  46. },
  47. //样式
  48. contentStyle: {
  49. type: Object,
  50. default: () => {
  51. return {
  52. contentH: '0px',
  53. }
  54. }
  55. },
  56. commonTitle: {
  57. type: String,
  58. default: ''
  59. }
  60. })
  61. let selectVal = ref('')
  62. let selectList = reactive([
  63. { label: '全部', value: '全部' }
  64. ])
  65. let checked=ref(false)
  66. //切换时间选项
  67. function onChange(value, dateString) {
  68. console.log('Selected Time: ', value);
  69. console.log('Formatted Selected Time: ', dateString);
  70. }
  71. function onOk(val) {
  72. console.log('onOk: ', val);
  73. }
  74. </script>
  75. <style scoped lang='less'>
  76. .danelBd {
  77. width: 100%;
  78. height: 100%;
  79. position: relative;
  80. .dane-title {
  81. display: flex;
  82. justify-content: space-between;
  83. align-items: center;
  84. width: 100%;
  85. height: 43px;
  86. padding: 0px 10px;
  87. box-sizing: border-box;
  88. background: url('../../../../assets/images/fire/firehome/title-1.png') no-repeat center;
  89. background-size: 100% 100%;
  90. .common-navL {
  91. width: 70%;
  92. display: flex;
  93. align-items: center;
  94. img {
  95. width: 18px;
  96. height: 18px;
  97. }
  98. span {
  99. font-size: 18px;
  100. color: #a1dff8;
  101. margin-left: 10px;
  102. }
  103. }
  104. .common-navL1 {
  105. width: 50%;
  106. display: flex;
  107. align-items: center;
  108. img {
  109. width: 18px;
  110. height: 18px;
  111. }
  112. span {
  113. font-size: 18px;
  114. color: #a1dff8;
  115. margin-left: 10px;
  116. }
  117. }
  118. .common-navR {
  119. width: 30%;
  120. display: flex;
  121. justify-content: flex-end;
  122. align-items: center;
  123. }
  124. .common-navR1 {
  125. width: 50%;
  126. display: flex;
  127. justify-content: flex-end;
  128. align-items: center;
  129. }
  130. .common-navR-switch{
  131. width: 70%;
  132. display: flex;
  133. justify-content: space-around;
  134. align-items: center;
  135. .status-text{
  136. color: #1fb3f7;
  137. }
  138. .status-text1{
  139. color: #a1dff8;
  140. }
  141. }
  142. }
  143. .dane-content {
  144. position: relative;
  145. width: 100%;
  146. padding: 15px;
  147. box-sizing: border-box;
  148. background: url('../../../../assets/images/fire/firehome/title-3.png') no-repeat center;
  149. background-size: 100% 100%;
  150. .t-line {
  151. position: absolute;
  152. left: 0;
  153. top: 0;
  154. width: 100%;
  155. height: 20px;
  156. background: url('../../../../assets/images/fire/firehome/title-4.png') no-repeat center;
  157. background-size: 100% 100%;
  158. }
  159. }
  160. }
  161. ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
  162. background-color: rgba(255, 255, 255, .1);
  163. border: none;
  164. }
  165. ::v-deep .zxm-select-selection-item {
  166. color: #a1dff8 !important;
  167. }
  168. ::v-deep .zxm-select-arrow {
  169. color: #a1dff8 !important;
  170. }
  171. ::v-deep .zxm-select-selection-placeholder {
  172. color: #a1dff8 !important;
  173. }
  174. ::v-deep .zxm-picker {
  175. background-color: rgba(255, 255, 255, .1) !important;
  176. border: 1px solid #a1dff8 !important;
  177. }
  178. ::v-deep .zxm-picker-input>input {
  179. text-align: center !important;
  180. color: #a1dff8 !important;
  181. }
  182. ::v-deep .zxm-picker-separator{
  183. color: #a1dff8 !important;
  184. }
  185. ::v-deep .zxm-picker-range .zxm-picker-active-bar{
  186. display: none !important;
  187. }
  188. ::v-deep .zxm-picker-suffix{
  189. color: #a1dff8 !important;
  190. }
  191. ::v-deep .zxm-switch{
  192. min-width: 55px !important;
  193. }
  194. ::v-deep .zxm-switch-checked {
  195. background-color: rgba(8, 59, 90) !important;
  196. }
  197. ::v-deep .zxm-switch-handle::before{
  198. background-color: rgba(33, 179, 247) !important;
  199. }
  200. </style>