Merge pull request 'fix : 修复首页数据展示' (#788) from de into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/788
2024-09-21 15:51:57 +00:00
parent e4069c0de2 349f514bcb
commit 9b78d4e52e
3 changed files with 141 additions and 93 deletions
--- a/src/views/article-management/detail.vue
+++ b/src/views/article-management/detail.vue
@@ -15,7 +15,7 @@
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
-            <span>{{ formData.createTime }}</span>
+            <span>{{ formData.articleTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -147,7 +147,7 @@
              </div>
            </div>
            <div class="notice-block">
-              <div v-for="(item,index) in noticeList" class="notice">
+              <div v-for="(item,index) in noticeList" class="notice" @click="handleGoToArticleDetail(item)">
                <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.articleTitle }}
              </div>
            </div>
@@ -202,9 +202,11 @@
              <div>
                <div class="total-money">总资金：{{ toThousands(totalMoney) }}</div>
                <div v-for="(item,index) in moneyData" class="legend">
-                  <div class="money-dot" :style="{'background-color': colorList[index]}"></div>
-                  <div class="company-name">{{ item.companyName }}</div>
-                  <div>{{ toThousands(item.money) }}</div>
+                  <div style="display: flex;align-items: center">
+                    <div class="money-dot" :style="{'background-color': moneyColorList[index]}"></div>
+                    <div class="company-name">{{ item.name }}</div>
+                  </div>
+                  <div>{{ toThousands(item.value) }}</div>
                </div>
              </div>
            </div>
@@ -224,7 +226,7 @@
            </template>
            <el-tab-pane label="规章制度" name="first">
              <div class="notice-block rules-block">
-                <div v-for="(item,index) in rulesList" class="notice">
+                <div v-for="(item,index) in rulesList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <div>-->
                  <!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
                  <!--                  </div>-->
@@ -241,7 +243,7 @@
                <div v-if="helpDocList&&helpDocList.length==0">
                  <el-empty image-size="135" description="暂无帮助文档~"/>
                </div>
-                <div v-for="(item,index) in helpDocList" class="notice">
+                <div v-for="(item,index) in helpDocList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <div>-->
                  <!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
                  <!--                  </div>-->
@@ -254,7 +256,7 @@
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="third">
              <div class="notice-block rules-block">
-                <div v-for="(item,index) in problemList" class="notice">
+                <div v-for="(item,index) in problemList" class="notice" @click="handleGoToArticleDetail(item)">
                  <!--                  <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
                  <div>
                    {{ item.articleTitle }}
@@ -398,7 +400,8 @@ const data = reactive({
  fundPieCharts: null,
  moneyPieCharts: null,
 })
-const colorList = ref(['#5c60ca', '#a159da', '#4bd566'])
+
+const moneyColorList = ref(['#5c60ca', '#a159da', '#5cdcd3', '#4bd566', '#a965ff', '#3BA272', '#ef6567', '#9A60B4', '#f9c956',])
 const fundPieOption = ref({
  tooltip: {
    trigger: 'item'
@@ -519,7 +522,7 @@ const moneyPieOption = ref({
    show: false,
    trigger: 'item'
  },
-  color: colorList,
+  // color: moneyColorList.value,
  series: [
    {
      type: 'pie',
@@ -535,23 +538,45 @@ const moneyPieOption = ref({
        },
      },
      itemStyle: {
+
+        normal: {
          borderWidth: 10,//设置边框粗细
-        borderColor: '#fff'
+          borderColor: '#fff',
+          color: function (colors) {
+            const colorList = moneyColorList.value;
+
+            return colorList[colors.dataIndex];
+          }
+        },
+
      },
      data: [
-        {value: 30000, name: '智汇未来科技公司',},
-        {value: 10000, name: '云航信息技术公司'},
-        {value: 5000, name: '融智投资管理公司'},
+        {value: 5000, name: '智汇未来科技公司',},
+        {value: 3000, name: '云航信息技术公司'},
+        {value: 12345, name: '融智投资管理公司'},
      ],
    },
  ]
 })

-onMounted(() => {
+onMounted(async () => {
  // getTodoList()
-  // getResearchChart()
-  init()
+  await getResearchChart()
+
+  noticeList.value = await getArticleList(0)
+  rulesList.value = await getArticleList(1)
+  helpDocList.value = await getArticleList(2)
+  problemList.value = await getArticleList(3)
+  await initFundCharts()
 })
+const handleGoToArticleDetail = (row) => {
+  router.push({
+    name: 'Article/detail',
+    query: {
+      id: row.articleId
+    }
+  })
+}
 const goToArticleList = () => {
  router.push({
    name: 'Manage',
@@ -570,12 +595,10 @@ const goToSpecialFund=()=>{
 const refreshTodoOrDoneList = () => {
  // getTodoList()
 }
-const init =async () => {
- noticeList.value =await getArticleList(0)
-  rulesList.value =await getArticleList(1)
-  helpDocList.value =await getArticleList(2)
-  problemList.value =await getArticleList(3)
+const initFundCharts = () => {
  data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
+}
+const initMoneyCharts = () => {
  data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
 }
 const getTodoList = () => {
@@ -596,10 +619,12 @@ const getResearchChart=()=>{
  getResearchFundChart().then(res => {
    if (res.code === 1000) {
      console.info("🚀 ~method:res -----", res.data, res.data.rdCompanyList)
+      totalMoney.value = res.data.totalAmount
+      moneyData.value = res.data.rdCompanyList
      if (moneyPieOption.value.series && moneyPieOption.value.series?.length > 0) {
        moneyPieOption.value.series[0].data = res.data.rdCompanyList
+        initMoneyCharts()
      }
-      init()
    } else {
      ElNotification({
        title: '提示',
@@ -625,9 +650,11 @@ const getArticleList=async (articleType)=>{
  }
 }
 window.addEventListener('resize', () => {
+  console.info("🚀 ~method:resize -----")
  data.fundPieCharts = null
  data.moneyPieCharts = null
-  init()
+  initFundCharts()
+  initMoneyCharts()
 })

 const clickGotoListPage = (item) => {
@@ -753,6 +780,7 @@ const handleView = (row) => {
  }

 }
+
@media only screen and (max-width: 1420px) {
  .statistics {
    .block {
@@ -761,6 +789,7 @@ const handleView = (row) => {
  }

 }
+
@media only screen and (max-width: 1344px) {
  .statistics {
    .block {
@@ -769,6 +798,7 @@ const handleView = (row) => {
  }

 }
+
@media only screen and (max-width: 1270px) {
  .statistics {
    .block {
@@ -793,6 +823,7 @@ const handleView = (row) => {
    }
  }
 }
+
@media only screen and (max-width: 1120px) {
  .statistics {
    .block {
@@ -844,6 +875,7 @@ const handleView = (row) => {
  .legend {
    margin-top: 14px;
    display: flex;
+    flex-wrap: wrap;
    align-items: center;

    > div:last-child {
@@ -859,7 +891,7 @@ const handleView = (row) => {
      letter-spacing: 1px;
      margin-left: 10px;
      margin-right: 30px;
-      white-space: nowrap;
+      //white-space: nowrap;
    }

    .money-dot {
@@ -910,6 +942,7 @@ const handleView = (row) => {
  height: 2px !important;
  background-color: #1476E3 !important;
 }
+
 :deep(.el-tabs__new-tab ) {
  width: auto !important;
  border: none !important;
@@ -920,6 +953,7 @@ const handleView = (row) => {
  margin: 0 0 0 -93px !important;
  z-index: 99;
  position: relative;
+
  &:hover {
    text-decoration: underline;
  }
@@ -947,6 +981,7 @@ const handleView = (row) => {
    .el-tabs__item.is-active {
      color: #1F63E6;
    }
+
    //#1476E3
  }
 }
@@ -999,14 +1034,21 @@ const handleView = (row) => {
  .top-left {
    //flex: 0.8;
    .notice-title {
-      margin-top: 10px;margin-left: 14px;color: #000000;letter-spacing: 1px;font-size: 16px;
+      margin-top: 10px;
+      margin-left: 14px;
+      color: #000000;
+      letter-spacing: 1px;
+      font-size: 16px;
+
      > span {
        color: #F40E0E;
+
        > span {
          font-weight: bold;
        }
      }
    }
+
    .todo-bg {
      margin-top: 10px;

@@ -1086,6 +1128,7 @@ const handleView = (row) => {
            .time {
              width: 80px;
              margin-left: 23px;
+
              &:last-child {
                white-space: nowrap;
              }
@@ -1198,6 +1241,7 @@ const handleView = (row) => {
    margin-top: 0 !important;

    .notice {
+      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
@@ -1270,6 +1314,7 @@ const handleView = (row) => {
    }

    .notice {
+      cursor: pointer;
      //min-width: 300px;
      height: 75px;
      line-height: 75px;
--- a/src/views/research-fund/add.vue
+++ b/src/views/research-fund/add.vue
@@ -16,7 +16,7 @@
            </div>
          </el-form-item>
        </el-col>
-        <el-col :span="8">
+        <el-col :span="6">
          <el-form-item label="研发资金金额(元)" prop="rdAmount" >
            <el-input
                v-model="formData.rdAmount"
@@ -27,7 +27,7 @@
            />
          </el-form-item>
        </el-col>
-        <el-col :span="8">
+        <el-col :span="6">
          <el-form-item label="研发资金日期" prop="rdDate">
            <el-date-picker
                v-model="formData.rdDate"
@@ -39,8 +39,8 @@
            </el-date-picker>
          </el-form-item>
        </el-col>
-        <el-col :span="8" >
-          <el-form-item label="备注" prop="remarks">
+        <el-col :span="6" >
+          <el-form-item label="备注" prop="remarks" style="margin-left: -70px">
            <el-input v-model="formData.remarks" placeholder="请输入备注" clearable></el-input>
          </el-form-item>
        </el-col>
@@ -297,4 +297,7 @@ onMounted(async () => {
    }
  }
 }
+:deep(.el-date-editor--month) {
+  width: 100%;
+}
 </style>