My 的第一篇博客！！！

我的第一篇博客

一、序言

很早就考虑着要写博客了，在这之前都是停留在了想，前两天刚给自己换了个昵称----转正开始写博客！这个也是示意自己不要忘记，在B站上也听到很多次关于大佬讲到写博客的好处，凑着马上将要转正的背景之下，书写了自己的第一篇博客，记录下自己从事软件开发成长过程的每一步，希望自己可以坚持下去，去充实自己，去通过分享帮助到他人。

二、记录下进入公司实习时做的第一个 vue 页面

这个是UI的原型图，我所要做的就是把红框当中的内容完成出来

准备工作

• vue
• Ant Design
• 若依
• echarts（第一次接触使用）
• 和一个愿意带你飞的大佬

开始

1、首先就是先把静态的页面画出来， 这其中用到了一些 Ant 组件库当中的东西，比如按钮以及Select 选择器，还有就是把布局布好了，在写布局时踩了些坑，比如之前自己学的时候画布局都习惯所有div都给固定的px宽高，这样就导致了后面带我的大哥说这样做有问题，意思就是里面的盒子最好给百分比的宽度，高度还无所谓些。一开始特别不理解也不适应，后来渐渐有点理解了，不再想着完全用UI给的单位去写布局了，现在理解的就是，看着估计，宽度百分比，差不多合适就可以。然后在这其中学习到的就是一下内容

• 网格布局(grid)
  容器属性：display:grid || diaplay:inline-grid
  设置列：grid-template-columns
  设置行：grid-template-rows
  定义行间距：gid-column-gap:30px
  水平：justfy-items
  垂直：align-items
  这些东西我也不太熟练，主要是当时大哥说用网格布局方便我就利用下班时间晚上学了学，不过我还是喜欢用flex布局，哈哈。

• 然后就是关于上边说过的，div盒子的宽度问题

//处理宽度的过程中学习到了一些方法
::v-deep .ant-pro-grid-content {
  .ant-pro-page-header-wrap-children-content {
    width: 100%;
    height: calc(100vh - 105px);
    overflow-y: auto;
    margin: 0;
    padding: 8px !important;
  }
}

::v-deep 改变组件的样式
calc() 动态计算的盒子宽高
2、写好静态页面之后，就是根据需求把其中重复的可以循环的删除了，用 v-for 循环遍历出来，这个时候就牵扯到了前后台之间的通信等等

• 通过import吧需要用到的接口引入进来
• 看看接口函数需要传递的参数，或者是使用方法
• 成功后，把数据放到 data 配置对象下，稍后数据渲染时候使用

结构

<template>
  <page-header-wrapper>
    <div class="annual">
      <div class="lefannual">版本</div>
      <a-select style="width: 20%" v-model="versionId" @change="handleChange">
        <a-select-option v-for="(item, index) in versions" :key="index" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button type="primary" icon="search" class="query" @click="clickOnQuery">查询</a-button>
      <a-button type="primary" @click="getCalculate" class="computingRankings">计算排名</a-button>
    </div>
    <div class="eachCenter">
      <a-row :gutter="[8, 8]">
        <a-col :span="12" v-for="(item, index) in deptOptions" :key="index" :value="item.deptId">
            <a-spin :spinning="loading">
                <EmergencyCenter :quota-rank="item" />
            </a-spin>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

行为（交互）

<script>
import EmergencyCenter from '@/views/quality/center-rank/modules/EmergencyCenter'
import { getQuotaRank, getQuotaVersionList, calculateRank } from '@/api/qc/quota'
export default {
  name: 'CenterRank',
  data() {
    return {
      versions: [],
      deptOptions: [],
      versionId: undefined,
      loading: false
    }
  },
  mounted() {
    this.getVersions()
    this.getOptions()
  },
  watch: {
      versionId(val) {
          this.loading = true
          this.getOptions()
      }
  },
  methods: {
    // 计算排名
    getCalculate() {
      this.loading = true
      calculateRank({versionId: this.versionId}).then(res => {
        this.getOptions()
      }).catch(err => {
          this.loading = false
          console.log(err)
      })
    },

    handleChange(val) {
      this.versionId = val
    },
    clickOnQuery() {
      this.loading = true
      this.getOptions()
    //   console.log(666);
    },
    getVersions() {
      getQuotaVersionList().then((res) => {
        const versions = res.data
        this.versions = versions
        if (versions && versions.length > 0) {
          this.versionId = versions[0].id
        }
        // console.log('版本列表数据', res.data);
      })
    },
    getOptions() {
      if (this.versionId) {
        getQuotaRank({ versionId: this.versionId }).then((res) => {
          this.deptOptions = res.data
          // console.log('急救中心数据', res.data)
          this.loading = false
        }).catch(err => {
            this.loading = false
        })
      }
    }
  },
  components: {
    EmergencyCenter
  }
}
</script>

样式

<style lang="less" scoped>
::v-deep .ant-pro-grid-content {
  .ant-pro-page-header-wrap-children-content {
    width: 100%;
    height: calc(100vh - 105px);
    overflow-y: auto;
    margin: 0;
    padding: 8px !important;
  }
}

::v-deep .table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 0;
}
.annual {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  margin: 2px 0 8px 0;
  background-color: #fff;
}
.computingRankings {
  position: absolute;
  right: 0;
  margin-right: 8px;
}
.lefannual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 32px;
  width: 6%;
  margin-left: 16px;
  background-color: #f5f6f9;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  color: #1f1f1f;
  padding-right: 6px;
}
.query {
  margin-left: 16px;
}
</style>

总结：上面三个部分的代码正好构成了一个 vue 组件，然后继续往细了说 就是在写这个页面所用到的关于组件之间的通信以及其他功能的实现了，比如其中把echarts中的雷达图封装出来了一个组件，然后就又是组件间的传值和通信。

• 父组件传值给子组件

<EmergencyCenter :quota-rank="item" /> //父用自定义属性绑定了值 item

props: {     //子用 props对象属性接收  然后就可以从子组件中使用父组件传递过来的值了，然后把需要用到的值渲染出来
    quotaRank: {
      type: Object,
      required: false,
    },
  } 

• 子组件传值给父组件
  暂时没有使用，后期公司项目中我用到了再写博客补上（反正是用自定义事件我知道）
• 还有就是兄弟组件之间的通信 解决方法有很多种，比如给他们共同的父亲，然后父亲再替一个子给另一个子，当然，也有第三方插件或方法，我听过的有，全局事件总线，消息订阅预发布，甚至是Vuex,集中的把很多组件需要共用的数据管理起来，通过 this.$store.state 这种方式拿到来使用，后期我再研究研究把它详细的写一篇博客分享给大家一起学习。

结束

稀稀疏疏的写了这么多，感觉分享出来的技术似乎没有多少，也就算是个入门级的经验之谈吧，当然后期我肯定会再把这其中用到的技术点剖析出来供大家参考，差点忘记了，下面是最后的效果图，因为后台给的数据有点缺失，说以雷达图显示的不完整，再然后就是第一次写博客，有什么建议大家多给我评论下，感谢！