| | |
| | | <template> |
| | | <div> |
| | | <div class="tit"> |
| | | <div class="title">SPI数据分析</div> |
| | | </div> |
| | | <div class="chart-cont"> |
| | | <div class="chart"> |
| | | <spi :size="2" @getData="getData"></spi> |
| | | </div> |
| | | <div class="chart-right"> |
| | | <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" /> |
| | | <div class="charts-des"> |
| | | <div id="descCont" class="dark-desc"> |
| | | <div class="des-tit"> |
| | | <div>{{descContent.year}}年度事企业SPI趋势</div> |
| | | <div>近12月SPI趋势</div> |
| | | <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" /> |
| | | </div> |
| | | <div class="des-main"> |
| | | <div v-for="(item,index) in descContent.spiData" :key="index"> |
| | | <h4>{{item.month}}月份,安全生产预警指数值:{{item.spiVal}}<span v-if="index < descContent.spiData.length">;</span></h4> |
| | | <div v-for="(item,index) in descContent" :key="index"> |
| | | <h4>{{item.time}},SPI数值:{{item.value}}</h4> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } |
| | | export default defineComponent({ |
| | | name: 'spiDesc', |
| | | components: {}, |
| | | components: { |
| | | spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')) |
| | | }, |
| | | props:{ |
| | | content: Object || null |
| | | }, |
| | |
| | | } |
| | | }) |
| | | |
| | | const getData = (data:Array)=>{ |
| | | state.descContent = data |
| | | console.log(state.descContent,'d') |
| | | } |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getTheme(); |
| | | }); |
| | | return { |
| | | getData, |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .dark-page{ |
| | | width: 100%; |
| | | height: 100%; |
| | | border:1px #5a5959 solid; |
| | | background: url('../../../../../assets/warningScreen/body-bg.jpg'); |
| | | padding: 4%; |
| | | .btns{ |
| | | position: fixed; |
| | | width: 8%; |
| | | height: 6%; |
| | | right: 5%; |
| | | top: 1.25rem; |
| | | font-size: 1.125rem; |
| | | color: rgb(17, 254, 238); |
| | | cursor: pointer; |
| | | } |
| | | .tit{ |
| | | width: 100%; |
| | | height: 122px; |
| | | background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | |
| | | .title{ |
| | | width: 100%; |
| | | height: 122px; |
| | | line-height: 112px; |
| | | border-radius: 8px; |
| | | margin-bottom: 20px; |
| | | font-size: 2.8rem; |
| | | color: #11feee; |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | letter-spacing: 5px; |
| | | } |
| | | } |
| | | |
| | | .chart-cont{ |
| | | width: 100%; |
| | | padding: 20px; |
| | | height: calc(92vh - 122px); |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | |
| | | .chart{ |
| | | width: calc((100% - 20px) * 0.63); |
| | | height: 100%; |
| | | padding: 3%; |
| | | background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | position: relative; |
| | | .selector-2{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | font-size: 1.25rem; |
| | | color: #fff; |
| | | } |
| | | .main-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .chart-right{ |
| | | width: calc((100% - 20px) * 0.37); |
| | | height: 100%; |
| | | .charts-des{ |
| | | height: 90%; |
| | | padding: 4%; |
| | | background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | .dark-desc{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | .light-page{ |
| | | width: 100%; |
| | | height: 100%; |
| | | border:1px #5a5959 solid; |
| | | background: #F0F0F0; |
| | | padding: 4%; |
| | | .btns{ |
| | | position: fixed; |
| | | width: 8%; |
| | | height: 6%; |
| | | right: 5%; |
| | | top: 1.25rem; |
| | | font-size: 1.125rem; |
| | | color: #333; |
| | | cursor: pointer; |
| | | } |
| | | .tit{ |
| | | width: 100%; |
| | | height: 122px; |
| | | background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | |
| | | .title{ |
| | | width: 100%; |
| | | height: 122px; |
| | | line-height: 112px; |
| | | border-radius: 8px; |
| | | margin-bottom: 20px; |
| | | font-size: 2.8rem; |
| | | color: #333; |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | letter-spacing: 5px; |
| | | } |
| | | } |
| | | |
| | | .chart-cont{ |
| | | width: 100%; |
| | | padding: 20px; |
| | | height: calc(92vh - 122px); |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | |
| | | .chart{ |
| | | width: calc((100% - 20px) * 0.63); |
| | | height: 100%; |
| | | padding: 3%; |
| | | background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | position: relative; |
| | | .selector-2{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | font-size: 1.25rem; |
| | | color: #fff; |
| | | } |
| | | .main-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .chart-right{ |
| | | width: calc((100% - 20px) * 0.37); |
| | | height: 100%; |
| | | |
| | | .charts-des{ |
| | | height: 90%; |
| | | padding: 4%; |
| | | background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | .light-desc{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | </style> |