ww

.history/src/views/agricultural-trade/index_20210803182036.vue

@@ -0,0 +1,632 @@
+<template>
+  <div class="mianBox">
+    <div class="header">
+      <div class="headerTop">
+        <div>{{ dateDay }}</div>
+        <div class="time">{{ dataTime }}</div>
+        <div class="weather">
+          <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
+        </div>
+        <div>
+          {{ $store.state.weaterRes.weather || "" }}
+          {{ $store.state.weaterRes.temperature || "" }}℃
+        </div>
+        <div class="titleHeader">智慧农贸</div>
+        <img src="../../assets/trade/topr.png" alt="" class="topR" />
+      </div>
+      <div class="headerB">
+        <div class="headerBBox yellowBox">
+          <div class="number">136</div>
+          <div>
+            <div class="textF">总摊位数量（个）</div>
+            <div>+1.16% <img src="../../assets/trade/up.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="headerBBox skyBlueBox">
+          <div class="number">56</div>
+          <div>
+            <div class="textF">空摊位数量（个）</div>
+            <div>-0.15% <img src="../../assets/trade/down.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="headerBBox redBox">
+          <div class="number">56004</div>
+          <div>
+            <div class="textF">总面积（㎡）</div>
+            <div>+2.35% <img src="../../assets/trade/up.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="headerBBox blueBox">
+          <div class="number">53.25</div>
+          <div>
+            <div class="textF">摊位占用率（%）</div>
+            <div>-3.12% <img src="../../assets/trade/down.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="headerBBox shitYellowBox">
+          <div class="number">32</div>
+          <div>
+            <div class="textF">电子秤总数（个）</div>
+            <div>+0.26% <img src="../../assets/trade/up.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="headerBBox greenBox">
+          <div class="number">78</div>
+          <div>
+            <div class="textF">电子秤在线数（个）</div>
+            <div>+1.86% <img src="../../assets/trade/up.png" alt="" /></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="contentLeft">
+        <div class="contentLeft-top">
+          <div class="contentLeft-title titleBg">周交易数据</div>
+          <div class="contentLeft-content">
+            <div
+              ref="echartD"
+              style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+              "
+            ></div>
+          </div>
+        </div>
+        <div class="contentLeft-bot">
+          <div class="contentLeft-title titleBg">台账数据</div>
+          <div class="contentLeft-content">
+            <div
+              ref="echartD2"
+              style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+              "
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div class="contentCenter">
+        <div id="mapF"></div>
+      </div>
+      <div class="contentRight">
+        <div class="contentRight-top">
+          <div class="contentRight-title titleBg">日交易摊位排行榜</div>
+          <div class="contentRight-content">
+            <div
+              ref="echartD3"
+              style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+              "
+            ></div>
+          </div>
+        </div>
+        <div class="contentRight-bot">
+          <div class="contentRight-title titleBg">实时交易记录</div>
+          <div class="contentRight-content">
+            <table
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              style="
+                width: 100%;
+                height: 100%;
+                color: #fff;
+                border-collapse: collapse;
+              "
+            >
+              <tr>
+                <th v-for="item in tableDataHeader" :key="item.prop">
+                  {{ item.name }}
+                </th>
+              </tr>
+              <tr v-for="(item, ind) in tableData" :key="ind">
+                <td v-for="items in tableDataHeader" :key="items.prop">
+                  {{ item[items.prop] }}
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import AMap from "AMap";
+import getDataE from "./echarts";
+import getDataE2 from "./echarts2";
+import getDataE3 from "./echarts3";
+export default {
+  data() {
+    return {
+      dateDay: "",
+      dataTime: "",
+      timeArea: "",
+      weatherObj: {},
+      echartsBox: null,
+      echartsBox2: null,
+      echartsBox3: null,
+      echartsBox4: null,
+      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
+      tableData: [
+        {
+          name: "苹果",
+          dpName: "周丽娟水果店",
+          jf: "8.8",
+          zl: "1",
+          je: "17.6",
+          time: "15:23:26",
+        },
+        {
+          name: "辣椒面",
+          dpName: "曾学孔自产自销铺",
+          jf: "12",
+          zl: "2",
+          je: "48",
+          time: "15:22:00",
+        },
+        {
+          name: "螃蟹",
+          dpName: "丁文根水产海鲜铺",
+          jf: "55.9",
+          zl: "1",
+          je: "111.8",
+          time: "15:21:00",
+        },
+        {
+          name: "大白菜",
+          dpName: "宁秋花蔬菜摊",
+          jf: "3.9",
+          zl: "0.5",
+          je: "3.9",
+          time: "15:20:00",
+        },
+        {
+          name: "猪头肉",
+          dpName: "伍世豪肉铺",
+          jf: "4.5",
+          zl: "1",
+          je: "9",
+          time: "15:19:00",
+        },
+        {
+          name: "基围虾",
+          dpName: "华城冷冻食品",
+          jf: "36",
+          zl: "0.5",
+          je: "36",
+          time: "15:18:00",
+        },
+        {
+          name: "老冰棍",
+          dpName: "徐志勇冷饮店",
+          jf: "3.9",
+          zl: "1",
+          je: "7.8",
+          time: "15:17:00",
+        },
+      ],
+      tableDataHeader: [
+        { name: "商品名称", prop: "name" },
+        { name: "商铺名称", prop: "dpName" },
+        { name: "价格/元", prop: "jf" },
+        { name: "总量/kg", prop: "zl" },
+        { name: "金额/元", prop: "je" },
+        { name: "时间", prop: "time" },
+      ],
+      lnglats: [
+        { x: 121.145887, y: 31.147121 },
+        { x: 121.109494, y: 31.057544 },
+        { x: 121.208371, y: 31.088126 },
+        { x: 121.185712, y: 31.068131 },
+        { x: 121.262616, y: 31.210944 },
+        { x: 121.176786, y: 31.164539 },
+        { x: 121.112928, y: 31.058132 },
+        { x: 121.173352, y: 31.166889 },
+        { x: 121.097135, y: 31.042249 },
+        { x: 121.190519, y: 31.035189 },
+        { x: 121.186399, y: 31.006356 },
+        { x: 121.158246, y: 31.148086 },
+        { x: 121.087522, y: 31.155137 },
+        { x: 121.154126, y: 31.125165 },
+      ],
+      chartData: [
+        {
+          name: "周乾隆南北干货铺",
+          value: 1124.6,
+        },
+        {
+          name: "郭安云肉铺",
+          value: 1043.2,
+        },
+        {
+          name: "宁秋花蔬菜摊",
+          value: 988,
+        },
+        {
+          name: "徐志勇冷饮店",
+          value: 901,
+        },
+        {
+          name: "伍世豪肉铺",
+          value: 822,
+        },
+        {
+          name: "周丽娟水果店",
+          value: 810,
+        },
+        {
+          name: "宁小龙蔬菜铺",
+          value: 750,
+        },
+        {
+          name: "华城冷冻食品",
+          value: 660,
+        },
+        {
+          name: "曾学孔自产自销铺",
+          value: 532,
+        },
+        {
+          name: "丁文根水产海鲜铺",
+          value: 512,
+        },
+      ].sort((a, b) => {
+        return a.value - b.value;
+      }),
+    };
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+      echarts.init(this.$refs.echartD2).resize();
+      echarts.init(this.$refs.echartD3).resize();
+    },
+  },
+  created() {
+    setInterval(() => {
+      this.getTable();
+      this.getEchart();
+    }, 3000);
+  },
+  mounted() {
+    this.getData();
+    this.initMap();
+    setInterval(() => {
+      let day = new Date();
+      this.dateDay =
+        day.getFullYear() +
+        "年" +
+        (day.getMonth() + 1 < 10
+          ? "0" + (day.getMonth() + 1)
+          : "" + (day.getMonth() + 1)) +
+        "月" +
+        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
+        "日  " +
+        " 星期" +
+        this.dataWeekList[day.getDay()];
+      this.dataTime =
+        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
+        ":" +
+        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
+        ":" +
+        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
+    }, 1000);
+  },
+  methods: {
+    getTable() {
+      this.tableData.forEach((val) => {
+        val.time =
+          new Date().getTime() - Math.ceil(Math.random() * 5 * 60 * 1000);
+      });
+      this.tableData = this.tableData.sort((next, val) => {
+        return val.time - next.time;
+      });
+      this.tableData.forEach((val) => {
+        let day = new Date(val.time);
+        val.time =
+          (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
+          ":" +
+          (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
+          ":" +
+          (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
+      });
+    },
+    getEchart() {
+      this.chartData = this.chartData.map((val) => {
+        let a = Math.random() > 0.3 ? Math.random()*30 :''
+        return a ? {
+          ...val,
+          value: (+val.value + a).toFixed(1)
+        } : val
+      }).sort((val, next) => {
+        return val.value - next.value;
+      });
+      this.echartsBox3.setOption(getDataE3(this.chartData));
+    },
+    async initMap() {
+      this.map = await new AMap.Map("mapF", {
+        mapStyle: "amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da", //设置地图的显示样式
+        resizeEnable: true,
+        zoom: 13,
+        zooms: [3, 16],
+        // features: [] //清空背景道路等
+      });
+      AMap.plugin(["AMap.Geolocation"], () => {
+        var geolocation = new AMap.Geolocation({
+          showButton: true, //是否显示定位按钮
+          buttonPosition: "RT", //定位按钮的位置
+          /* LT LB RT RB */
+          buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
+          zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+          showMarker: true, //是否显示定位点
+          markerOptions: {
+            //自定义定位点样式，同Marker的Options
+            offset: new AMap.Pixel(-18, -36),
+            content:
+              '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
+          },
+          showCircle: true, //是否显示定位精度圈
+          circleOptions: {
+            //定位精度圈的样式
+            strokeColor: "#0093FF",
+            noSelect: true,
+            strokeOpacity: 0.5,
+            strokeWeight: 1,
+            fillColor: "#02B0FF",
+            fillOpacity: 0.25,
+          },
+        });
+        this.map.addControl(geolocation);
+      });
+      this.addMarker();
+    },
+    addMarker(lnglats = this.lnglats) {
+      // 创建标点和点击事件
+      let markers = lnglats.map((val, ind) => {
+        let marker = new AMap.Marker({
+          position: new AMap.LngLat(val.x, val.y),
+          zIndex: 9,
+          extData: {
+            id: ind + 1,
+          },
+        });
+        return marker;
+      });
+      this.map.add(new AMap.OverlayGroup(markers));
+      this.map.setFitView(); // 根据所有点自适应
+    },
+    async getData() {
+      this.echartsBox = echarts.init(this.$refs.echartD)
+      this.echartsBox.setOption(getDataE());
+      this.echartsBox2 = echarts.init(this.$refs.echartD2)
+      this.echartsBox2.setOption(getDataE2());
+      this.echartsBox3 = echarts.init(this.$refs.echartD3)
+      this.echartsBox3.setOption(getDataE3(this.chartData));
+    },
+    async getWeather() {
+      let res = await this.$axios.get("/aliWeather");
+      if (res.showapi_res_code === 0) {
+        this.weatherObj = res.showapi_res_body.now;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: url("../../assets/trade/bg.png");
+  background-size: 100% 100%;
+  .header {
+    width: 100%;
+    height: 200px;
+    background: url("../../assets/trade/top.png");
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .headerTop {
+      width: 100%;
+      display: flex;
+      height: 45px;
+      align-items: center;
+      font-size: 16px;
+      color: #fff;
+      position: relative;
+      div {
+        margin-left: 20px;
+      }
+      img {
+        width: 24px;
+      }
+      .time {
+        font-size: 28px;
+        width: 90px;
+        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+      }
+      .titleHeader {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: 0 auto;
+        font-size: 38px;
+        color: #fff;
+        text-align: center;
+        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+        font-weight: 700;
+        letter-spacing: 5px;
+        text-shadow: 2px 2px 10px 0px rgba(9, 29, 52, 0.48);
+        background-image: linear-gradient(0deg, #6dbfff 0%, #fefeff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .topR {
+        position: absolute;
+        top: 5px;
+        right: 10px;
+        width: 37px;
+        height: 37px;
+      }
+    }
+    .headerB {
+      height: 100px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 30px;
+      box-sizing: border-box;
+      .headerBBox {
+        width: 290px;
+        height: 100px;
+        background: #000;
+        border-top: 1px solid;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        padding: 15px;
+        box-sizing: border-box;
+        & > div {
+          display: flex;
+          justify-content: space-between;
+          margin: 5px 0;
+        }
+        .number {
+          font-size: 36px;
+          font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+          font-weight: 500;
+          line-height: 32px;
+        }
+        .textF {
+          color: #fff;
+        }
+      }
+      .yellowBox {
+        background: rgba(225, 249, 72, 0.2);
+        color: #f9f348;
+        border-color: #fff948;
+      }
+      .skyBlueBox {
+        background: rgba(40, 251, 219, 0.2);
+        color: #29ffde;
+        border-color: rgba(40, 251, 219, 1);
+      }
+      .redBox {
+        background: rgba(255, 55, 55, 0.2);
+        color: rgba(255, 55, 55, 1);
+        border-color: rgba(255, 55, 55, 1);
+      }
+      .blueBox {
+        background: rgba(42, 207, 255, 0.2);
+        color: rgba(42, 207, 255, 1);
+        border-color: rgba(42, 207, 255, 1);
+      }
+      .shitYellowBox {
+        background: rgba(255, 174, 0, 0.2);
+        color: rgba(255, 174, 0, 1);
+        border-color: rgba(255, 174, 0, 1);
+      }
+      .greenBox {
+        background: rgba(0, 255, 96, 0.2);
+        color: rgba(0, 255, 96, 1);
+        border-color: rgba(0, 255, 96, 1);
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    padding: 20px 30px;
+    box-sizing: border-box;
+    .contentLeft {
+      width: 25%;
+      padding: 20px;
+      box-sizing: border-box;
+      background: rgba(0, 41, 91, 0.7);
+      .contentLeft-top {
+        height: 60%;
+        .contentLeft-content {
+          height: calc(100% - 42px);
+          width: 100%;
+        }
+      }
+      .contentLeft-bot {
+        height: 40%;
+        .contentLeft-content {
+          height: calc(100% - 42px);
+          width: 100%;
+        }
+      }
+    }
+    .contentCenter {
+      position: relative;
+      flex: 1;
+      height: 100%;
+      padding: 0 20px;
+      box-sizing: border-box;
+      #mapF {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .contentRight {
+      width: 25%;
+      padding: 20px;
+      box-sizing: border-box;
+      background: rgba(0, 41, 91, 0.7);
+      .contentRight-top {
+        height: 60%;
+        .contentRight-content {
+          height: calc(100% - 42px);
+          width: 100%;
+        }
+      }
+      .contentRight-bot {
+        height: 40%;
+        .contentRight-content {
+          padding-top: 10px;
+          box-sizing: border-box;
+          height: calc(100% - 42px);
+          width: 100%;
+        }
+      }
+      tr {
+        font-size: 14px;
+        text-align: left;
+        border-bottom: 1px dashed rgba(4, 187, 255, 0.3);
+      }
+    }
+    .titleBg {
+      width: 100%;
+      height: 42px;
+      font-size: 16px;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 500;
+      text-align: left;
+      color: #bbe4ff;
+      line-height: 42px;
+      text-indent: 30px;
+      background: url("../../assets/trade/title.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/agricultural-trade/index.vue

@@ -26,7 +26,7 @@
           <div class="number">56</div>
           <div>
             <div class="textF">空摊位数量（个）</div>
-            <div>+0.15% <img src="../../assets/trade/down.png" alt="" /></div>
+            <div>-0.15% <img src="../../assets/trade/down.png" alt="" /></div>
           </div>
         </div>
         <div class="headerBBox redBox">
@@ -40,7 +40,7 @@
           <div class="number">53.25</div>
           <div>
             <div class="textF">摊位占用率（%）</div>
-            <div>-3.12% <img src="../../assets/trade/up.png" alt="" /></div>
+            <div>-3.12% <img src="../../assets/trade/down.png" alt="" /></div>
           </div>
         </div>
         <div class="headerBBox shitYellowBox">