123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <template>
- <div class="app-container dataStatistics">
- <div class="title-box">
- <div :class="pageType == 1?'checkTitle':''" @click="checkTitleButton(1)">
- <p>按实验室</p>
- <p></p>
- </div>
- <div :class="pageType == 2?'checkTitle':''" @click="checkTitleButton(2)">
- <p>按安全隐患</p>
- <p></p>
- </div>
- <div :class="pageType == 3?'checkTitle':''" @click="checkTitleButton(3)">
- <p>按检查指标</p>
- <p></p>
- </div>
- <div :class="pageType == 4?'checkTitle':''" @click="checkTitleButton(4)">
- <p>按检查内容</p>
- <p></p>
- </div>
- </div>
- <laboratoryStatistics v-if="pageType == 1"></laboratoryStatistics>
- <safetyHazardStatistics v-if="pageType == 2"></safetyHazardStatistics>
- <checkIndexStatistics v-if="pageType == 3" :propsData="propsData"></checkIndexStatistics>
- <inspectContent v-if="pageType == 4" ></inspectContent>
- </div>
- </template>
- <script>
- import laboratoryStatistics from './laboratoryStatistics.vue'
- import safetyHazardStatistics from './safetyHazardStatistics.vue'
- import checkIndexStatistics from './checkIndexStatistics.vue'
- import inspectContent from './inspectContent.vue'
- export default {
- name: 'index',
- components: {
- laboratoryStatistics,
- safetyHazardStatistics,
- checkIndexStatistics,
- inspectContent
- },
- data(){
- return{
- pageType:1,
- propsData:{
- jumpType:false,
- }
- }
- },
- created(){
- if(this.$route.query.type){
- this.$set(this,'pageType',3);
- }
- },
- mounted(){
- },
- methods:{
- checkTitleButton(type){
- if(this.pageType != type){
- this.$set(this,'pageType',type);
- }
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .dataStatistics{
- flex:1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- *{
- font-weight: 500;
- }
- .title-box{
- display: flex;
- height:80px;
- border-bottom:1px solid #d8d8d8;
- padding:0 40px;
- div{
- height:80px;
- margin-right:80px;
- cursor: pointer;
- p:nth-child(1){
- width:80px;
- font-size:16px;
- text-align: center;
- color:#333;
- line-height:40px;
- height:40px;
- margin-top:20px;
- }
- p:nth-child(2){
- width:60px;
- height: 4px;
- border-radius:4px;
- margin:0 10px;
- }
- }
- .checkTitle{
- p:nth-child(1){
- color:#0045AF;
- }
- p:nth-child(2){
- background-color: #0045AF;
- }
- }
- }
- }
- </style>
|