首页

src/views/system/index/fjmap.vue

@@ -0,0 +1,112 @@
+<style lang="scss" scoped>
+.o-echarts {
+  margin-top: 150px;
+  min-width: 30px;
+  min-height: 30px;
+  width: 100%;
+  height: 80%;
+}
+</style>
+<template>
+  <div id="echarts_map" class="o-echarts"></div>
+</template>
+
+<script>
+import fjJson from "./map/quanzhou.json";
+
+export default {
+  name: "echart-map",
+  data() {
+    return {
+      echartObj: null,
+      option: {
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: "{b}<br/>{c} (p / km2)",
+        // },
+        toolbox: {
+          show: false,
+          orient: "vertical",
+          left: "right",
+          top: "center",
+          feature: {
+            dataView: { readOnly: false },
+            restore: {},
+            saveAsImage: {},
+          },
+        },
+        geo: {
+          show: true,
+          map: "泉州",
+          lable: {
+            color: "white",
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+
+          itemStyle: {
+            normal: {
+              //阴影
+              areaColor: "#7dc1d5",
+              borderWidth: 0,
+              borderColor: "#0395fc",
+              shadowColor: "#0395fc",
+              shadowBlur: 0,
+              opacity: 0.8,
+              // shadowOffsetX: 0,
+              // shadowOffsetY: 0,
+            },
+          },
+        },
+        series: [
+          {
+            name: "泉州",
+            type: "map",
+            map: "泉州",
+            zoom: 1,
+            label: {
+              show: true,
+              color: "#fff",
+            },
+            itemStyle: {
+              normal: {
+                color: "#fff",
+                borderWidth: 2, //边际线大小
+                borderColor: "#a9f7fb", //边界线颜色
+                areaColor: "#62b1cc", //默认区域颜色
+              },
+              emphasis: {
+                show: true,
+                color: "#fff",
+                areaColor: "#a2ebee", //鼠标滑过区域颜色
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: "#fff",
+                  },
+                },
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.echartObj = this.$echarts.init(document.getElementById("echarts_map"));
+    this.$echarts.registerMap("泉州", fjJson);
+    this.echartObj.setOption(this.option);
+    window.addEventListener("resize", () => {
+      if (this.echartObj && this.echartObj.resize) {
+        this.echartObj.resize();
+      }
+    });
+  },
+  methods: {},
+};
+</script>

src/views/system/index/page.vue

@@ -1,71 +1,166 @@
 <template>
   <d2-container class="page">
-    <el-row class="content">
-      <div class="page-content left-content">
-        <span class="content-title">报警待处理</span>
-        <el-table
-          :data="tableData"
-          class="table-content"
-          @row-click="jumpDetails"
-          :row-class-name="tableRowClassName"
-        >
-          <el-table-column
-            prop="name"
-            align="center"
-            label="仓库名称"
-          ></el-table-column>
-          <el-table-column
-            prop="itemName"
-            label="仓房名称"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="submitter"
-            label="报警时间"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="reportDate"
-            align="center"
-            label="已处理等待时常"
-          ></el-table-column>
-          <el-table-column align="center" label="操作">
-            <el-button type="text" size="small" icon="el-icon-edit"
-              >编辑</el-button
-            >
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="page-content right-content">
-        <span class="content-title">通知公告</span>
-        <ul class="tzggList">
-          <li v-for="(item, index) in tzggListData" :key="index">
-            <span>{{ item.name }}</span>
-            <span class="tzggListLi">2011-10-19 11:11:11</span>
-          </li>
-        </ul>
+    <div class="mapPosition">
+      <div>
+        <div class="ckt-bg">
+          <span class="ckt-bg-font">当天出库量(吨)</span>
+          <div class="ckt-szk-bg">70</div>
+          <span class="ckt-bg-little"
+            >较昨日增长<span class="zcColor">15.9%</span
+            ><img src="./image/zezhang.png"
+          /></span>
+        </div>
+        <div class="rkt-bg">
+          <span class="rkt-bg-font">当天入库量(吨)</span>
+          <div class="rkt-szk-bg">80</div>
+          <span class="rkt-bg-little"
+            >较昨日降低<span class="jdColor">15.9%</span
+            ><img src="./image/jiangdi.png"
+          /></span>
+        </div>
       </div>
-    </el-row>
-    <el-row class="content contentX">
-      <div class="page-content left-content">
-        <span class="content-title">出入库数量趋势</span>
-        <div id="myChart" :style="{ width: '400px', height: '250px' }"></div>
-      </div>
-      <div class="page-content right-content">
-        <span class="content-title">库区报警排名</span>
+
+      <div class="kck-content">
+        <div class="kck-content-out">
+          <span class="kck-content-in-1"
+            >总仓容<span class="kck-content-num1">100</span>吨</span
+          >
+          <span class="kck-content-in-2"
+            >已用<span class="kck-content-num2">70</span>吨</span
+          >
+          <span class="kck-content-in-3"
+            >剩余可用<span class="kck-content-num3">30</span>吨</span
+          >
+        </div>
       </div>
-    </el-row>
+      <fjmap></fjmap>
+      <!-- <div id="map-content" class="echarts-map"></div> -->
+    </div>
+    <!-- <el-row class="content"> -->
+    <div class="page-content left-content">
+      <span class="content-title">报警待处理</span>
+      <el-table
+        :data="tableData"
+        class="table-content"
+        @row-click="jumpDetails"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column
+          prop="ckmc"
+          align="center"
+          label="仓库名称"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <img class="ckmcImg" src="./image/bjck.png" />
+            <span>{{ scope.row.ckmc }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="cfmc"
+          label="仓房名称"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="bjsj"
+          label="报警时间"
+          align="center"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="yclddsc"
+          align="center"
+          label="已处理等待时常"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column align="center" label="处理">
+          <el-button
+            class="czBut"
+            type="button"
+            size="small"
+            icon="el-icon-edit"
+            >反馈</el-button
+          >
+        </el-table-column>
+      </el-table>
+      <span class="seeMore">查看更多></span>
+    </div>
+    <div class="page-content right-content">
+      <span class="content-title">通知公告</span>
+      <ul class="tzggList">
+        <li v-for="(item, index) in tzggListData" :key="index">
+          <span class="tzXyd"></span><span>{{ item.name }}</span>
+          <span class="tzggListLi">2011-10-19 11:11:11</span>
+        </li>
+      </ul>
+      <span class="seeMore">查看更多></span>
+    </div>
+    <!-- </el-row> -->
+    <!-- <el-row class="content contentX"> -->
+    <div class="page-content left-content contentX">
+      <span class="content-title">出入库数量趋势</span>
+      <el-row>
+        <el-date-picker
+          class="timeOption"
+          v-model="time"
+          type="monthrange"
+          range-separator="-"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+        >
+        </el-date-picker>
+      </el-row>
+
+      <div
+        class="myChart"
+        id="myChart"
+        :style="{ width: '100%', height: '82%', top: '10%' }"
+      ></div>
+    </div>
+    <div class="page-content right-content contentX">
+      <span class="content-title">库区报警排名</span>
+      <div
+        class="myChart"
+        id="myChart1"
+        :style="{ width: '100%', height: '80%' }"
+      ></div>
+    </div>
+    <!-- </el-row> -->
   </d2-container>
 </template>
 
 <script>
+import fjmap from "./fjmap";
 export default {
+  components: { fjmap },
   data() {
     return {
-      tableData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
+      time: "",
+      tableData: [
+        {
+          ckmc: "商丘中转库",
+          cfmc: "3号仓",
+          bjsj: "2020-10-21",
+          yclddsc: "2小时",
+        },
+        {
+          ckmc: "商丘中转库",
+          cfmc: "5号仓",
+          bjsj: "2020-10-22",
+          yclddsc: "5小时",
+        },
+      ],
       tzggListData: [{ name: "哈哈哈" }, { name: "哈哈哈" }],
     };
   },
+  created() {},
+  mounted() {
+    //出入库数量趋势
+    this.drawLine();
+    //库区报警排名
+    this.drawBar();
+  },
   methods: {
     jumpDetails() {},
     tableRowClassName({ row, rowIndex }) {
@@ -75,19 +170,138 @@ export default {
         return "two-row";
       }
     },
+    drawBar() {
+      let myChart = this.$echarts.init(document.getElementById("myChart1"));
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(21, 96, 176, 0.5)",
+          borderColor: "#7dc9de",
+          textStyle: {
+            color: "dafaff",
+          },
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#dafaff",
+          },
+        },
+        grid: {
+          top: "40px",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              type: "solid",
+              color: "#0a4b88",
+            },
+          },
+          boundaryGap: [0, 0.01],
+          axisLine: {
+            lineStyle: {
+              color: "#dafaff",
+              width: 1,
+              type: "solid",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              type: "solid",
+              color: "#0a4b88",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dafaff",
+              width: 1,
+              type: "solid",
+            },
+          },
+          data: [
+            "民权粮食储备公司",
+            "宁陵粮食储备公司",
+            "拓城粮食储备公司",
+            "虞城粮食储备公司",
+          ],
+        },
+        series: [
+          {
+            name: "逐次报警",
+            type: "bar",
+            data: [1, 2, 2, 4, 7, 3],
+          },
+          {
+            name: "总数报警",
+            type: "bar",
+            data: [1, 2, 2, 4, 7, 3],
+          },
+          {
+            name: "设备断链",
+            type: "bar",
+            data: [1, 2, 2, 4, 7, 3],
+          },
+        ],
+      });
+    },
     drawLine() {
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById("myChart"));
       // 绘制图表
       myChart.setOption({
         // title: { text: "在Vue中使用echarts" },
-        tooltip: {},
+        tooltip: {
+          backgroundColor: "rgba(21, 96, 176, 0.5)",
+          borderColor: "#7dc9de",
+          textStyle: {
+            color: "dafaff",
+          },
+        },
         legend: {
           data: ["出库", "入库"],
+          textStyle: {
+            color: "#dafaff",
+          },
+        },
+        grid: {
+          top: "40px",
         },
         xAxis: {
           type: "category",
           boundaryGap: false,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              type: "solid",
+              color: "#0a4b88",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dafaff",
+              width: 1,
+              type: "solid",
+            },
+          },
+          axisLabel: {
+            interval: 0,
+          },
           data: [
             "1月",
             "2月",
@@ -103,7 +317,24 @@ export default {
             "12月",
           ],
         },
-        yAxis: { type: "value" },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              type: "solid",
+              color: "#0a4b88",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dafaff",
+              width: 1,
+              type: "solid",
+            },
+          },
+        },
         series: [
           {
             name: "出库",
@@ -123,10 +354,6 @@ export default {
       });
     },
   },
-  created() {},
-  mounted() {
-    this.drawLine();
-  },
 };
 </script>
 
@@ -135,16 +362,22 @@ export default {
   width: 100%;
   height: 100%;
   color: #dafaff;
-  background-image: url("./image/bg.png") no-repeat;
+  background: url("./image/bg.png") center no-repeat;
+  background-size: 100%;
+  ::v-deep.el-button--small,
+  .el-button--small.is-round {
+    padding: 7px 15px;
+  }
   ::v-deep.el-table::before {
     background-color: #042c59 !important;
   }
   ::v-deep.el-table td.el-table__cell,
   ::v-deep.el-table th.el-table__cell.is-leaf {
     border: 0px !important;
+    padding: 5px 0px;
   }
   ::v-deep.el-table th.el-table__cell {
-    background-color: #042c59;
+    background-color: #1460b0;
   }
   ::v-deep.el-table--enable-row-hover
     .el-table__body
@@ -164,7 +397,7 @@ export default {
   }
   ::v-deep.el-table .two-row {
     background-color: #063c67 !important;
-    color: #dafaff;
+    color: #f7feff;
   }
   .table-content {
     width: 98%;
@@ -188,6 +421,7 @@ export default {
     margin-top: 4%;
   }
   .page-content {
+    position: relative;
     width: 35%;
     min-width: 350px;
     height: 100%;
@@ -195,10 +429,14 @@ export default {
     background-size: 100% 100%;
   }
   .right-content {
+    height: 45%;
+    min-height: 300px;
     margin-right: -20px;
     float: right;
   }
   .left-content {
+    height: 45%;
+    min-height: 300px;
     float: left;
   }
   .tzggList {
@@ -206,19 +444,210 @@ export default {
     padding: 0;
   }
   .tzggList li {
-    margin: 5px;
-    padding-left: 10px;
+    margin: 0 5px;
+    padding-left: 20px;
     list-style: none;
     padding-right: 10px;
     height: 40px;
     line-height: 40px;
     border-bottom: 1px solid #1460b0;
   }
+  .tzggList li:hover {
+    background: #1460af;
+    // border-bottom: 1px solid #1460b0;
+    border-radius: 25px;
+  }
   .tzggListLi {
     float: right;
   }
-  #myChart {
+  .myChart {
+    margin: 0 auto;
+    color: #f7feff;
+  }
+  .mapPosition {
+    width: 30%;
     margin: 0 auto;
+    min-width: 400px;
+    height: 92%;
+    position: absolute;
+    left: 36%;
+    right: center;
+  }
+  .echarts-map {
+    min-width: 30px;
+    min-height: 30px;
+    width: 100%;
+    height: 100%;
+  }
+  .kck-content {
+    font-size: 14px;
+    width: 91%;
+    height: 50px;
+    margin: 5% 0 0 4%;
+    float: left;
+    background: url("./image/crbg.png") no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+  .kck-content-out {
+    text-align: center;
+    line-height: 47px;
+  }
+  .kck-content-in-2 {
+    margin: 0 15px;
+  }
+  .kck-content-num1 {
+    margin: 0 5px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .kck-content-num2 {
+    display: inline-block;
+    width: 35px;
+    height: 22px;
+    line-height: 22px;
+    background: url("./image/szkBlue.png") no-repeat;
+    background-size: 100%;
+    letter-spacing: 12px;
+    padding-left: 6px;
+  }
+  .kck-content-num3 {
+    display: inline-block;
+
+    width: 35px;
+    height: 22px;
+    line-height: 22px;
+    background: url("./image/szkBlue.png") no-repeat;
+    background-size: 100% 100%;
+    letter-spacing: 12px;
+    padding-left: 6px;
+  }
+  .ckt-bg {
+    position: relative;
+    width: 190px;
+    height: 100px;
+    float: left;
+    background: url("./image/ckl.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .rkt-bg {
+    width: 190px;
+    height: 100px;
+    float: right;
+    background: url("./image/rkl.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .czBut {
+    color: #dafaff;
+    background-color: #142f66;
+    border: 1.5px solid #4a95be;
+    border-radius: 7px;
+  }
+  .czBut:hover {
+    color: #dafaff;
+    background-color: #3d8ee9;
+    border: 1.5px solid #4a95be;
+    border-radius: 7px;
+  }
+  .ckmcImg {
+    width: 17px;
+    margin: 0px 10px 0 -5px;
+  }
+  .seeMore {
+    font-size: 14px;
+    position: absolute;
+    bottom: 10px;
+    right: 0px;
+    margin: 10px 20px;
+    cursor: pointer;
+  }
+  .tzXyd {
+    background: #dafaff;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  .ckt-szk-bg {
+    position: absolute;
+    width: 35px;
+    height: 22px;
+    left: 100px;
+    top: 50px;
+    background: url("./image/szkBlue.png") no-repeat;
+    background-size: 100% 100%;
+    letter-spacing: 12px;
+    padding-left: 6px;
+  }
+  .rkt-szk-bg {
+    position: absolute;
+    width: 35px;
+    height: 22px;
+    right: 100px;
+    top: 50px;
+    background: url("./image/szkGreen.png") no-repeat;
+    background-size: 100% 100%;
+    letter-spacing: 12px;
+    padding-left: 6px;
+  }
+  .rkt-bg-font {
+    font-size: 14px;
+    position: absolute;
+    right: 70px;
+    top: 23px;
+  }
+  .ckt-bg-font {
+    font-size: 14px;
+    position: absolute;
+    left: 70px;
+    top: 23px;
+  }
+  .ckt-bg-little {
+    font-size: 12px;
+    position: absolute;
+    left: 60px;
+    top: 79px;
+  }
+  .rkt-bg-little {
+    font-size: 12px;
+    position: absolute;
+    right: 40px;
+    top: 79px;
+  }
+  .zcColor {
+    margin-right: 5px;
+    color: #19d606;
+  }
+  .jdColor {
+    margin-right: 5px;
+    color: #ff8ca7;
+  }
+  .timeOption {
+    position: absolute;
+    width: 187px;
+    right: 20px;
+    height: 28px;
+    background-color: #142f66;
+    padding: 0;
+    margin: -16px 0 0 0;
+  }
+  ::v-deep.el-date-editor .el-range__icon {
+    font-size: 12px;
+    margin-left: 5px;
+    color: #f7feff;
+    float: left;
+    line-height: 26px;
+  }
+  ::v-deep.el-range-editor .el-range-input {
+    background: #142f66;
+    font-size: 12px;
+  }
+  ::v-deep.el-date-editor .el-range-separator {
+    padding: 0 5px;
+    line-height: 25px;
+    width: 5%;
+    color: #f7feff;
   }
   // .btn-group {
   //   color: $color-text-placehoder;