修改依赖bug

src/views/disease-resistance/disease-resistance.vue

@@ -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'

src/views/index/index.vue

@@ -3,24 +3,16 @@
     <div class="formtitle">若尔盖养殖场</div>
     <div class="layouts">
       <div class="layoutsdiv">
-        <div class="tile">总资源展示</div>
-        <div
-          style="
-            display: flex;
-            font-weight: bold;
-            width: 104%;
-            justify-content: space-around;
-            padding-top: 24px;
-          "
-        >
-          <div>种质资源</div>
-          <div>基因数据资源</div>
-        </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>
@@ -29,29 +21,25 @@
             display: flex;
             font-weight: bold;
             width: 100%;
-            padding-top: 24px;
+            padding-top: 4px;
           "
         >
           <div style="width: 50%; text-align: left; padding-left: 1%">
             育种值
           </div>
-          <div style="width: 35%; text-align: center">平均育种值</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%; padding-top: 4px">
-                平均育种值
-              </div> -->
-            </div>
+            <div
+              style="width: 100%; display: flex; justify-content: center"
+            ></div>
             <div class="tabsdata">
               <div class="tabs">
                 <div>平均育种值</div>
@@ -67,17 +55,7 @@
             </div>
           </div>
         </div>
-        <div
-          style="
-            display: flex;
-            font-weight: bold;
-            width: 104%;
-            justify-content: space-around;
-            padding-bottom: 20px;
-            position: relative;
-            margin-top: -40px;
-          "
-        >
+        <div class="rightstyle">
           <div>群体育种值趋势图</div>
           <div>育种牛图</div>
         </div>
@@ -91,19 +69,9 @@
             alt=""
           />
         </div>
-        <div
-          style="
-            display: flex;
-            font-weight: bold;
-            width: 100%;
-            justify-content: space-around;
-            padding-bottom: 20px;
-            position: relative;
-            margin-top: -38px;
-          "
-        >
-          <div>群体系统发育NJ树</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">
@@ -122,7 +90,7 @@
           <div class="flexdiv" style="display: flex">
             <img
               style="width: 110%"
-              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/eea6e208048409a1a951756239081ab7.png"
+              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/24/d1995dff7f26663444619f1620d83bc0.png"
               alt=""
             />
           </div>
@@ -166,22 +134,22 @@ export default {
         series: [
           {
             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: {
-          left: 'center'
-        },
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
-          left: 'center',
-          top: 'bottom'
+          top: '40px'
         },
         series: [
           {
@@ -194,7 +162,8 @@ export default {
               { value: 15, name: '安格斯牛' },
               { value: 10, name: '黄牛' },
               { value: 5, name: '荷斯坦牛' }
-            ]
+            ],
+            top: '70px'
           }
         ]
       })
@@ -216,7 +185,12 @@ export default {
             '82010000997'
           ]
         },
-        yAxis: { type: 'value' },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          }
+        },
         series: [
           {
             // name: '销量',
@@ -224,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' //改变折线颜色
+                }
+              }
+            }
           }
         ]
       })
@@ -244,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: {
@@ -269,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;
@@ -323,15 +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;
@@ -343,13 +335,56 @@ 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;

vue.config.js

@@ -37,13 +37,13 @@ const cdn = {
   },
   // CDN
   js: [
-    'https://unpkg.zhimg.com/vue@2.6.11/dist/vue.js',
-    'https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js',
-    'https://unpkg.zhimg.com/vue-router@3.2.0/dist/vue-router.js',
-    'https://unpkg.zhimg.com/vuex@3.4.0/dist/vuex.js',
-    'https://unpkg.zhimg.com/axios@0.26.1/dist/axios.min.js',
-    'https://unpkg.zhimg.com/moment@2.29.2/moment.js',
-    'https://unpkg.zhimg.com/jquery@3.6.0/dist/jquery.min.js'
+    'https://unpkg.com/vue@2.6.11/dist/vue.js',
+    'https://unpkg.com/element-ui@2.15.6/lib/index.js',
+    'https://unpkg.com/vue-router@3.2.0/dist/vue-router.js',
+    'https://unpkg.com/vuex@3.4.0/dist/vuex.js',
+    'https://unpkg.com/axios@0.26.1/dist/axios.min.js',
+    'https://unpkg.com/moment@2.29.2/moment.js',
+    'https://unpkg.com/jquery@3.6.0/dist/jquery.min.js'
     // 'https://unpkg.com/v-distpicker@1.2.13/dist/v-distpicker.js',
     // 'https://code.jquery.com/jquery-3.6.0.min.js'
   ],
@@ -98,4 +98,4 @@ module.exports = {
       }
     }
   }
-}
+}