fix: css less变更

src/components/Customize/HorizontalHistogram.vue

@@ -1,21 +1,15 @@
 <!-- 横向柱状图 -->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title title">
-        <div class="titleZn">{{ title }}</div>
-        <div class="titleEn">{{ titleEn }}</div>
-      </div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="Horizontal"></div>
-        </div>
-      </div>
+  <div>
+    <boxTop :title="title" />
+    <div class="histogramBox">
+      <div class="chartsdom" id="Horizontal"></div>
     </div>
   </div>
 </template>
 
 <script>
+import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
@@ -23,6 +17,9 @@ export default {
       information: {},
     }
   },
+  components: {
+    boxTop,
+  },
   props: {
     barWidth: {
       type: Number,
@@ -278,21 +275,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.sn-container {
+<style lang="less" scoped>
+.histogramBox {
   width: 401px;
-  height: 300px;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
+  height: 290px;
   .chartsdom {
     width: 100%;
     height: 100%;

src/components/Customize/cake.vue

@@ -1,58 +1,48 @@
-<!-- 地图 -->
+<!-- 饼图统计 -->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title title">
-        <div class="titleZn">{{ title }}</div>
-        <div class="titleEn">{{ titleEn }}</div>
-      </div>
-      <div class="sn-body">
-        <div class="wrap-container flex">
-          <div class="chartsdom" id="cake"></div>
-          <div class="panel">
-            <div class="panelitem flex space_around">
-              <div>
-                <div class="number">{{ data.年移栽数量 }}</div>
-                <div class="text">
-                  <img
-                    class="img1"
-                    src="../../assets/img/rectangle.png"
-                    alt=""
-                  />
-                  年移栽数量
-                </div>
-              </div>
-              <div>
-                <div class="number">{{ data.年移栽面积 }}</div>
-                <div class="text">
-                  <img
-                    class="img1"
-                    src="../../assets/img/rectangle.png"
-                    alt=""
-                  />年移栽面积
-                </div>
-              </div>
+  <div>
+    <boxTop />
+    <div class="cakeBox flex">
+      <div class="chartsdom" id="cake"></div>
+      <div class="panel">
+        <div class="panelitem flex space_around">
+          <div v-if="data.年移栽数量">
+            <div class="number">{{ data.年移栽数量 }}</div>
+            <div class="text">
+              <img class="img1" src="../../assets/img/rectangle.png" alt="" />
+              年移栽数量
             </div>
-            <div class="panelitem">
-              <div class="flex space_between secondItem">
-                <img class="img" src="../../assets/img/tree.png" alt="" />
-                <div>移栽区域数</div>
-                <div>{{ data.移栽区域数 }}</div>
-              </div>
-              <div class="flex space_between secondItem">
-                <img class="img" src="../../assets/img/head.png" alt="" />
-                <div>烟农数量</div>
-                <div>{{ data.烟农数量 }}</div>
-              </div>
+          </div>
+          <div v-if="data.年移栽面积">
+            <div class="number">{{ data.年移栽面积 }}</div>
+            <div class="text">
+              <img
+                class="img1"
+                src="../../assets/img/rectangle.png"
+                alt=""
+              />年移栽面积
             </div>
           </div>
         </div>
+        <div class="panelitem">
+          <div v-if="data.移栽区域数" class="flex space_between secondItem">
+            <img class="img" src="../../assets/img/tree.png" alt="" />
+            <div>移栽区域数</div>
+            <div>{{ data.移栽区域数 }}</div>
+          </div>
+          <div v-if="data.烟农数量" class="flex space_between secondItem">
+            <img class="img" src="../../assets/img/head.png" alt="" />
+            <div>烟农数量</div>
+            <div>{{ data.烟农数量 }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
@@ -60,6 +50,9 @@ export default {
       information: {},
     }
   },
+  components: {
+    boxTop,
+  },
   props: {
     data: {
       type: Object,
@@ -99,7 +92,7 @@ export default {
           textStyle: {
             rich: {
               a: {
-                fontSize: 42,
+                fontSize: 36,
                 color: `#fff`,
               },
               b: {
@@ -121,8 +114,8 @@ export default {
             type: `pie`,
             radius: [`84%`, `70%`],
             silent: true,
-            clockwise: true,
-            startAngle: -35,
+            clockwise: false,
+            startAngle: 90,
             z: 0,
             zlevel: 0,
             data: [
@@ -226,76 +219,65 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.sn-container {
+<style lang="less" scoped>
+.cakeBox {
   width: 401px;
-  height: 300px;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
+  height: 234px;
   .chartsdom {
     width: 80%;
-    height: 80%;
+    height: 90%;
   }
-  .flex {
-    display: flex;
-    .panel {
-      width: 80%;
-      height: 80%;
-
-      .panelitem {
-        border-top: 2px solid #646464;
-        box-sizing: border-box;
-        height: 50%;
-        margin: 0 10px;
-        .secondItem {
-          margin: 21px 0;
-        }
+  .panel {
+    width: 80%;
+    height: 80%;
+    .panelitem {
+      border-top: 2px solid rgba(255, 255, 255, 0.3);
+      box-sizing: border-box;
+      height: 50%;
+      margin: 0 10px;
+      .secondItem {
+        font-size: 16px;
+        margin: 21px 0;
       }
     }
   }
-  .img {
-    height: 25px;
-    margin-right: 3px;
-  }
-  .img1 {
-    height: 17px;
-    width: 3px;
-    margin-right: 3px;
-  }
-  .l-height {
-    line-height: 100%;
-  }
-  .space_around {
-    justify-content: space-around;
-    align-items: center;
-  }
-  .space_between {
-    justify-content: space-between;
-    align-items: center;
-  }
-  .number {
-    font-size: 22px;
-    padding: 4px 0;
-    margin: 3px 0;
-  }
-  .text {
-    font-size: 14px;
-    color: #888888;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .column_reverse {
-    flex-direction: column-reverse;
-  }
+}
+.flex {
+  display: flex;
+}
+.img {
+  height: 25px;
+  margin-right: 3px;
+}
+.img1 {
+  height: 17px;
+  width: 3px;
+  margin-right: 3px;
+}
+.l-height {
+  line-height: 100%;
+}
+.space_around {
+  justify-content: space-around;
+  align-items: center;
+}
+.space_between {
+  justify-content: space-between;
+  align-items: center;
+}
+.number {
+  font-size: 22px;
+  padding: 4px 0;
+  margin: 3px 0;
+}
+.text {
+  font-size: 14px;
+  color: #888888;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.column_reverse {
+  flex-direction: column-reverse;
 }
 </style>

src/components/Customize/cylindricalHistogram.vue

@@ -1,21 +1,15 @@
 <!-- 圆柱柱状图 -->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title title">
-        <div class="titleZn">{{ title }}</div>
-        <div class="titleEn">{{ titleEn }}</div>
-      </div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="cylindrical"></div>
-        </div>
-      </div>
+  <div>
+    <boxTop :title="title" />
+    <div class="oblongBox">
+      <div class="chartsdom" id="cylindrical"></div>
     </div>
   </div>
 </template>
 
 <script>
+import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
@@ -23,6 +17,9 @@ export default {
       information: {},
     }
   },
+  components: {
+    boxTop,
+  },
   props: {
     barWidth: {
       type: Number,
@@ -37,10 +34,6 @@ export default {
       type: String,
       default: ``,
     },
-    titleEn: {
-      type: String,
-      default: `Tongren Tobacco Planting Digital Management Platform`,
-    },
     unit: {
       type: String,
     },
@@ -239,21 +232,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.sn-container {
+<style lang="less" scoped>
+.oblongBox {
   width: 401px;
-  height: 300px;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
+  height: 275px;
   .chartsdom {
     width: 100%;
     height: 100%;

src/components/Customize/map/index.vue

@@ -1,13 +1,7 @@
 <!-- 地图 -->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="3DMap"></div>
-        </div>
-      </div>
-    </div>
+  <div class="mapBox">
+    <div class="chartsdom" id="3DMap"></div>
   </div>
 </template>
 
@@ -48,19 +42,16 @@ export default {
         {
           name: `印江土家族苗族自治县`,
           value: 0.5,
-          fdl: `99%`,
-          tds: 1,
-          fds: 101,
         },
-        { name: `石阡县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `江口县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `玉屏侗族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `思南县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `德江县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `沿河土家族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `松桃苗族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `碧江区`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `万山区`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `石阡县`, value: 0.5 },
+        { name: `江口县`, value: 0.5 },
+        { name: `玉屏侗族自治县`, value: 0.5 },
+        { name: `思南县`, value: 0.5 },
+        { name: `德江县`, value: 0.5 },
+        { name: `沿河土家族自治县`, value: 0.5 },
+        { name: `松桃苗族自治县`, value: 0.5 },
+        { name: `碧江区`, value: 0.5 },
+        { name: `万山区`, value: 0.5 },
       ]
       echarts.registerMap(`guangdong`, uploadedDataURL, {})
       this.option = {
@@ -400,7 +391,7 @@ export default {
       myChart.setOption(this.option)
       myChart.on(`click`, function (params) {
         const idx = params.dataIndex
-        console.log(idx, params.name, params.value)
+        console.log(params)
         // to do
       })
     },
@@ -409,21 +400,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sn-container {
+.chartsdom {
   width: 980px;
   height: 760px;
 
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
   .chartsdom {
     width: 100%;
     height: 100%;

src/components/Customize/wavyLineChart.vue

@@ -1,21 +1,17 @@
 <!-- 面积图 -->
+<!-- 必须传入 ID  area dataArray-->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title title">
-        <div class="titleZn">{{ title }}</div>
-        <div class="titleEn">{{ titleEn }}</div>
-      </div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" :id="id"></div>
-        </div>
-      </div>
+  <div>
+    <boxTop />
+
+    <div class="wavylineBox">
+      <div class="chartsdom" :id="id"></div>
     </div>
   </div>
 </template>
 
 <script>
+import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
@@ -23,6 +19,9 @@ export default {
       information: {},
     }
   },
+  components: {
+    boxTop,
+  },
   props: {
     id: {
       type: String,
@@ -45,10 +44,6 @@ export default {
       type: String,
       default: ``,
     },
-    titleEn: {
-      type: String,
-      default: `Tongren Tobacco Planting Digital Management Platform`,
-    },
     unit: {
       type: String,
       default: ``,
@@ -217,21 +212,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.sn-container {
+<style lang="less" scoped>
+.wavylineBox {
   width: 401px;
-  height: 300px;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
+  height: 266px;
   .chartsdom {
     width: 100%;
     height: 100%;

src/components/Customize/weatherForecast.vue

@@ -1,21 +1,15 @@
 <!-- 温度折线图 -->
 <template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title title">
-        <div class="titleZn">{{ title }}</div>
-        <div class="titleEn">{{ titleEn }}</div>
-      </div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="weather"></div>
-        </div>
-      </div>
+  <div>
+    <boxTop :title="title" />
+    <div class="weatherBox">
+      <div class="chartsdom" id="weather"></div>
     </div>
   </div>
 </template>
 
 <script>
+import boxTop from '@/components/boxTop/index.vue'
 export default {
   data() {
     return {
@@ -34,10 +28,6 @@ export default {
       type: String,
       default: ``,
     },
-    titleEn: {
-      type: String,
-      default: `Tongren Tobacco Planting Digital Management Platform`,
-    },
     unit: {
       type: String,
     },
@@ -46,6 +36,9 @@ export default {
       default: 100,
     },
   },
+  components: {
+    boxTop,
+  },
   mounted() {
     this.getEchart()
   },
@@ -173,21 +166,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.sn-container {
+<style lang="less" scoped>
+.weatherBox {
   width: 401px;
-  height: 300px;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    .titleEn {
-      width: 120px;
-      font-size: 8px;
-      text-align: right;
-      word-break: break-all;
-      line-height: 1;
-    }
-  }
+  height: 234px;
+
   .chartsdom {
     width: 100%;
     height: 100%;

src/components/bgBox/index.vue

@@ -105,7 +105,6 @@ const apiList = [
             icon: `icon-feng`,
           },
         ].find((item) => data.天气.includes(item.name)) || {}
-
       this.weather = data
       this.weather.天气图标 = item.icon || `icon-duoyun`
     },

src/components/boxTop/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="containerBox">
-    <div class="sn-title title">
+    <div class="title">
       <div class="titleZn">{{ title }}</div>
       <div class="titleEn">{{ titleEn }}</div>
     </div>

src/views/page1/index.vue

@@ -1,20 +1,24 @@
 <template>
   <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="0">
+    <cake
+      style="position: absolute; top: 115px; left: 50px"
+      title="实时统计"
+      :data="statisticsData"
+      v-if="isCake"
+    ></cake>
     <cylindricalHistogram
-      style="left: 50px; top: 345px"
+      style="position: absolute; left: 50px; top: 430px"
       v-if="isGetData"
       :unit="`公斤/产量`"
       title="各区域移栽产量分析"
-      titleEn="Tongren Tobacco Planting Digital Management Platform"
       :area="Transplantarea"
       :dataArray="TransplantdataArray"
     ></cylindricalHistogram>
     <weatherForecast
       :unit="`摄氏度`"
-      style="left: 50px; top: 670px"
+      style="position: absolute; left: 50px; top: 760px"
       v-if="isWeather"
       title="天气预报"
-      titleEn="Tongren Tobacco Planting Digital Management Platform"
       :area="Weatherarea"
       :dataArray="WeatherdataArray"
       :alertValue="30"
@@ -23,7 +27,7 @@
     <wavyLineChart
       :unit="`平方米/面积`"
       id="`wavyLineChart`"
-      style="left: 1470px; top: 25px"
+      style="position: absolute; right: 50px; top: 115px"
       v-if="isWavyLine"
       title="各区域移栽面积"
       :area.sync="wavyLineArea"
@@ -32,7 +36,7 @@
     >
     </wavyLineChart>
     <HorizontalHistogram
-      style="left: 1470px; top: 345px"
+      style="position: absolute; right: 50px; top: 430px"
       v-if="isHorizontal"
       title="移栽情况分析"
       :area="HorizontalArea"
@@ -40,7 +44,7 @@
     ></HorizontalHistogram>
     <wavyLineChart
       id="`移栽趋势分析`"
-      style="left: 1470px; top: 670px"
+      style="position: absolute; right: 50px; top: 760px"
       v-if="isWavyLine"
       title="移栽趋势分析"
       :area="trendarea"
@@ -52,16 +56,11 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, 0%);
+        transform: translate(-55%, 20%);
       "
       v-if="hasGetJson"
       :getJson="getJson"
     ></threeMap>
-    <cake
-      title="实时统计"
-      :data="statisticsData"
-      style="left: 50px; top: 25px"
-    ></cake>
   </bgBox>
 </template>
 
@@ -146,6 +145,7 @@ const apiLists = [
     key: `statistics`,
     fn(data, arg) {
       this.statisticsData = data
+      this.isCake = true
     },
   },
   {
@@ -208,6 +208,7 @@ export default {
       isHorizontal: false,
       isTrend: false,
       hasGetJson: false,
+      isCake: false,
     }
   },
   computed: {},
@@ -222,10 +223,10 @@ export default {
     // this.$http.get(`https://httpbin.org/get`)
   },
   mounted() {
-    this.getAnalysisOfTransplantYieldInVariousRegions()
-    this.getWeatherForecast()
-    this.getTransplantAreaInEachRegion()
-    this.getAnalysisOfTransplantingSituation()
+    // this.getAnalysisOfTransplantYieldInVariousRegions()
+    // this.getWeatherForecast()
+    // this.getTransplantAreaInEachRegion()
+    // this.getAnalysisOfTransplantingSituation()
     screenSize(this.$refs.editor)
   },
   beforeDestroy() {
@@ -285,13 +286,13 @@ export default {
       })
     },
     async getJSON() {
+      console.log(`获取JSOn`)
       this.getJson = await this.$http.get(
         `/datav/areas_v3/bound/geojson?code=520600_full`
       )
+      console.log(this.getJson)
       this.hasGetJson = true
     },
   },
 }
 </script>
-
-<style lang="less" scoped></style>

yarn.lock

@@ -3477,11 +3477,6 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
-camelcase@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
-  integrity sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==
-
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -10684,13 +10679,6 @@ update-browserslist-db@^1.1.1:
     escalade "^3.2.0"
     picocolors "^1.1.0"
 
-uppercamelcase@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"
-  integrity sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==
-  dependencies:
-    camelcase "^1.2.1"
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -10802,13 +10790,6 @@ vm2@^3.9.12:
     acorn "^8.7.0"
     acorn-walk "^8.2.0"
 
-vue-amap@^0.5.10:
-  version "0.5.10"
-  resolved "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz#464516203af0c085d404bd8acabf2401e4a36ff6"
-  integrity sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==
-  dependencies:
-    uppercamelcase "^1.1.0"
-
 vue-count-to@^1.0.13:
   version "1.0.13"
   resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"