fix:首页样式优化

Merge branch 'dev' of https://gitea.aiotagro.com/liupengcheng/admin-jxn-testing into dev
遗传病风险字段修改
2024-09-24 14:51:05 +08:00 · 2024-09-23 17:32:24 +08:00 · 2024-09-23 17:31:50 +08:00 · 2024-09-23 16:25:01 +08:00 · 2024-09-23 14:25:29 +08:00 · 2024-09-23 14:25:22 +08:00
3 changed files with 142 additions and 80 deletions
--- a/src/views/breedMgmt/BLUP.vue
+++ b/src/views/breedMgmt/BLUP.vue
@@ -49,14 +49,14 @@
        <el-table-column prop="b" label="标记编号"></el-table-column>
        <el-table-column prop="c" label="性别"></el-table-column>
        <el-table-column prop="d" label="外貌评分"></el-table-column>
-        <el-table-column prop="e" label="18月龄体高(CM)"></el-table-column>
-        <el-table-column prop="f" label="18月龄体长(CM)"></el-table-column>
-        <el-table-column prop="g" label="18月龄胸围(CM)"></el-table-column>
-        <el-table-column prop="h" label="18月龄官维(CM)"></el-table-column>
-        <el-table-column prop="i" label="18月龄体重(KG)"></el-table-column>
-        <el-table-column prop="j" label="18月龄背膘厚度(MM)"></el-table-column>
-        <el-table-column prop="k" label="18月龄眼肌面积(MM)"></el-table-column>
-        <el-table-column prop="l" label="平均产奶量(KG)"></el-table-column>
+        <el-table-column prop="e" label="18月龄体高(cm)"></el-table-column>
+        <el-table-column prop="f" label="18月龄体长(cm)"></el-table-column>
+        <el-table-column prop="g" label="18月龄胸围(cm)"></el-table-column>
+        <el-table-column prop="h" label="18月龄官维(cm)"></el-table-column>
+        <el-table-column prop="i" label="18月龄体重(kg)"></el-table-column>
+        <el-table-column prop="j" label="18月龄背膘厚度(mm)"></el-table-column>
+        <el-table-column prop="k" label="18月龄眼肌面积(mm)"></el-table-column>
+        <el-table-column prop="l" label="平均产奶量(kg)"></el-table-column>
        <el-table-column prop="m" label="平均乳脂率(%)"></el-table-column>
        <el-table-column prop="n" label="平均乳蛋白率(%)"></el-table-column>
        <el-table-column
--- a/src/views/disease-resistance/disease-resistance.vue
+++ b/src/views/disease-resistance/disease-resistance.vue
@@ -45,7 +45,7 @@
        <el-table-column prop="farm" label="养殖场"></el-table-column>
        <el-table-column prop="number" label="标记编号"></el-table-column>
        <el-table-column prop="age" label="月龄"></el-table-column>
-        <el-table-column prop="result" label="监测结果"></el-table-column>
+        <el-table-column prop="result" label="检测结果"></el-table-column>
        <el-table-column label="详情">
          <template slot-scope="scope">
            <el-button
@@ -174,7 +174,7 @@ export default {
    // 当监测结果为 已携带 的状态，加上背景色,字体颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 注意，这里返回的是一个对象
-      if (row.result == '携带' && column.label == '监测结果') {
+      if (row.result == '携带' && column.label == '检测结果') {
        return 'background:#d9001b;textAlign: center;color:#fff;'
      } else {
        return 'textAlign: center'
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -3,28 +3,43 @@
    <div class="formtitle">若尔盖养殖场</div>
    <div class="layouts">
      <div class="layoutsdiv">
-        <div class="tile">总资源展示</div>
+        <div class="tile" style="margin-bottom: 0px">总资源展示</div>
        <div class="echartsdiv">
          <!-- 总资源展示两个图表 -->
          <div id="Inventory" class="chartstyle"></div>
          <div id="Inventory1" class="chartstylepc"></div>
        </div>
+        <div class="text">
+          <div>种质资源</div>
+          <div>基因数据资源</div>
+        </div>
      </div>
      <div class="layoutsdiv">
-        <div class="tile">综合育种植</div>
+        <div class="tile">综合育种值</div>
+        <div
+          style="
+            display: flex;
+            font-weight: bold;
+            width: 100%;
+            padding-top: 4px;
+          "
+        >
+          <div style="width: 50%; text-align: left; padding-left: 1%">
+            育种值
+          </div>
+          <div class="yzz">平均育种值</div>
+        </div>
        <div style="display: flex">
          <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
-            <!-- 综合育种植图表 -->
            <div id="Inventory2" class="chartstyle2"></div>
-            <div style="font-weight: 600; width: 100%">群体育种值趋势图</div>
          </div>
          <div class="flexdiv">
-            <div style="width: 100%; display: flex; justify-content: center">
-              <div style="font-weight: bold; width: 70%">平均育种值</div>
-            </div>
+            <div
+              style="width: 100%; display: flex; justify-content: center"
+            ></div>
            <div class="tabsdata">
              <div class="tabs">
                <div>平均育种值</div>
@@ -34,40 +49,29 @@
            <div style="text-align: center">
              <img
                style="width: 100%"
-                src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30581be380a8e407b6a193bc04d1a5f52a.jpg"
+                src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/eebaca34a02b3398edaf107b1ae7415e.png"
                alt=""
              />
            </div>
          </div>
        </div>
+        <div class="rightstyle">
+          <div>群体育种值趋势图</div>
+          <div>育种牛图</div>
+        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">系谱分析</div>
        <div style="display: flex">
          <img
            style="width: 100%"
-            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/3045dfe9ebb60507a75748a7c58393a0da.jpg"
+            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/8efcf4aa9ab05f1a4937a081a20a52d5.png"
            alt=""
          />
-          <!-- <div
-            class="echartsdiv"
-            style="display: flex; flex-direction: column; width: 100%"
-          >
-            <div
-              id="Inventory2"
-              style="height: 350px; text-align: center; width: 100%"
-            ></div>
-            <div style="font-weight: 600; width: 100%">群体系统发育NJ树</div>
-          </div>
-          <div style="width: 100%">
-            <div style="text-align: center">
-              <img
-                style="width: 80%"
-                src=""
-                alt=""
-              />
-            </div>
-          </div> -->
+        </div>
+        <div class="newstyle">
+          <div style="width: 42%; text-align: center">群体系统发育NJ树</div>
+          <div style="width: 47%; text-align: center">分布位置展示</div>
        </div>
      </div>
      <div class="layoutsdiv">
@@ -80,22 +84,13 @@
            <!-- 遗传病风险警告图表 -->
            <div id="Inventory3" class="chartstyle3"></div>
            <div style="font-weight: 600; width: 100%">
-              群体遗传比风险概览图
+              群体遗传病风险概览图
            </div>
          </div>
-          <div class="flexdiv">
-            <!-- <div style="width: 100%; display: flex; justify-content: center">
-              <div style="font-weight: bold; width: 70%">群体遗传病风险数量统计表</div>
-            </div> -->
-            <!-- <div class="tabsdata">
-              <div class="tabs">
-                <div>平均育种值</div>
-                <div>132</div>
-              </div>
-            </div> -->
+          <div class="flexdiv" style="display: flex">
            <img
-              style="width: 100%"
-              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30ed0c054a729a918a324a884a4e920ca7.jpg"
+              style="width: 110%"
+              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/24/d1995dff7f26663444619f1620d83bc0.png"
              alt=""
            />
          </div>
@@ -138,25 +133,23 @@ export default {
        },
        series: [
          {
-            name: '种质资源',
            type: 'bar',
-            data: [35, 140, 300, 420]
+            data: [35, 140, 300, 420],
+            itemStyle: {
+              color: '#6A63E8'
+            },
+            barWidth: 30 //柱图宽度
          }
        ]
      })
      var myChart1 = echarts.init(document.getElementById('Inventory1'))
      myChart1.setOption({
-        title: {
-          text: '基因数据资源',
-          left: 'center'
-        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
-          left: 'center',
-          top: 'bottom',
+          top: '40px'
        },
        series: [
          {
@@ -169,15 +162,14 @@ export default {
              { value: 15, name: '安格斯牛' },
              { value: 10, name: '黄牛' },
              { value: 5, name: '荷斯坦牛' }
-            ]
+            ],
+            top: '70px'
          }
        ]
      })
      var myChart2 = echarts.init(document.getElementById('Inventory2'))
      myChart2.setOption({
-        title: {
-          text: '育种值'
-        },
+        title: {},
        tooltip: {},
        xAxis: {
          type: 'category',
@@ -193,7 +185,12 @@ export default {
            '82010000997'
          ]
        },
-        yAxis: { type: 'value' },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          }
+        },
        series: [
          {
            // name: '销量',
@@ -201,7 +198,20 @@ export default {
            data: [
              255.85, 252.16, 259.69, 250.76, 264.34, 255.24, 260.27, 238.7
            ],
-            areaStyle: {}
+            areaStyle: {},
+            areaStyle: {
+              normal: {
+                color: '#DADFFB' //改变区域颜色
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#6A63E8', //改变折线点的颜色
+                lineStyle: {
+                  color: '#6A63E8' //改变折线颜色
+                }
+              }
+            }
          }
        ]
      })
@@ -221,10 +231,10 @@ export default {
            name: '占比',
            type: 'pie',
            radius: '55%',
-            center: ['50%', '60%'],
+            center: ['50%', '50%'],
            data: [
-              { value: 25, name: '低风险' },
-              { value: 75, name: '高风险' }
+              { value: 25, name: '低风险', itemStyle: { color: '#5CAAF8' } },
+              { value: 75, name: '高风险', itemStyle: { color: '#E8556F' } }
            ],
            emphasis: {
              itemStyle: {
@@ -246,22 +256,26 @@ export default {
  font-weight: bold;
  padding-left: 12px;
  padding-top: 10px;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
+  font-size: 20px;
 }
 .layouts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
+  width: 100%;
+  overflow: hidden;
  .layouts > .layoutsdiv {
-    width: 47.5%;
+    width: 47.86%;
    margin-top: 10px;
    background: white;
    padding: 18px 14px 18px 16px;
-    border-radius: 2px;
+    border-radius: 6px;
  }
  .tile {
    border-bottom: 1px solid #29272718;
-    padding-bottom: 10px;
+    padding-bottom: 18px;
+    padding-top: 6px;
    font-weight: 600;
    color: rgb(49, 49, 49);
    margin-bottom: 20px;
@@ -269,11 +283,11 @@ export default {
  .echartsdiv {
    display: flex;
    .chartstyle {
-      height: 400px;
+      height: 350px;
      text-align: center;
    }
    .chartstylepc {
-      height: 400px;
+      height: 350px;
      text-align: center;
    }
    .chartstyle2 {
@@ -300,14 +314,16 @@ export default {
    padding-top: 30px;
    .tabs {
      width: 80%;
-      border: 1px solid #a6c5ee;
+      border: 1px solid #89d7b2;
      display: flex;
      justify-content: space-between;
-      color: #468ce7;
-      background: #f2f6fb;
+      color: #89d7b2;
+      background: #f2fffa;
+      margin-top: 26px;
+      font-size: 14px;
    }
    .tabs div {
-      border: 1px solid #a6c5ee;
+      border: 1px solid #89d7b2;
      text-align: center;
      width: 60%;
      padding: 8px 16px 8px 16px;
@@ -319,23 +335,69 @@ export default {
    justify-content: center;
    align-items: center;
  }
+  .newstyle {
+    display: flex;
+    font-weight: bold;
+    width: 100%;
+    justify-content: space-around;
+    padding-bottom: 20px;
+    position: relative;
+    margin-top: -38px;
+  }
+  .yzz {
+    width: 35%;
+    text-align: center;
+  }
+  .rightstyle {
+    display: flex;
+    font-weight: bold;
+    width: 104%;
+    justify-content: space-around;
+    margin-top: -40px;
+    padding-bottom: 20px;
+  }
+  .text {
+    display: flex;
+    font-weight: bold;
+    width: 104%;
+    justify-content: space-around;
+    padding-top: 40px;
+  }
 }
@media (max-width: 1669px) {
+    .text {
+    padding-top: 10px !important;
+    margin-bottom: 30px;
+  }
+  .rightstyle {
+    padding-bottom: 0px !important;
+    margin-top: 0px !important;
+    width: 99% !important;
+  }
+  .yzz {
+    width: 26% !important;
+  }
+  .newstyle {
+    margin-top: -22px !important;
+  }
  .layouts > .layoutsdiv {
    width: 47% !important;
  }
  .chartstyle {
-    height: 380px !important;
+    height: 340px !important;
  }
  .chartstylepc {
    height: 380px !important;
  }
  .chartstyle2 {
-    height: 310px !important;
+    height: 340px !important;
  }
  .chartstyle3 {
    height: 270px !important;
  }
+  .tabsdata {
+    padding-top: 0px;
+  }
 }
 </style>
Author	SHA1	Message	Date
wuzhihao	13dee5ae31	fix:首页样式优化	2024-09-24 14:51:05 +08:00
liupengcheng	fd4b80a027	Merge branch 'dev' of https://gitea.aiotagro.com/liupengcheng/admin-jxn-testing into dev	2024-09-23 17:32:24 +08:00
liupengcheng	ed8bafd9d1	遗传病风险字段修改	2024-09-23 17:31:50 +08:00
wuzhihao	450b4ba9bc	fix:首页样式优化	2024-09-23 16:25:01 +08:00
lijinxuan123	9452ea6811	Merge branch 'dev' of https://gitea.aiotagro.com/liupengcheng/admin-jxn-testing into dev	2024-09-23 14:25:29 +08:00
lijinxuan123	8d7af8871e	修改文案	2024-09-23 14:25:22 +08:00
liupengcheng	b0313a37c7	遗传病风险字段修改	2024-09-23 14:23:36 +08:00