大屏

src/api/system/user.js

@@ -8,10 +8,11 @@ export function save(data) {
   })
 }
 
-export function listuser() {
+export function listuser(params) {
   return request({
     url: '/api/admin/admin',
-    method: 'get'
+    method: 'get',
+    params
   })
 }
 

src/router/index.js

@@ -42,7 +42,7 @@ export const constantRoutes = [{
     hidden: true
   },
   {
-    path: '/bisscreen',
+    path: '/bigscreen',
     component: () => import('@/views/bigSreen'),
     meta: {
       title: '大屏展示',

src/views/bigSreen/component/CenterLeft.vue

@@ -10,12 +10,14 @@
     </div>
 
     <div class="bs-card__body">
-      <div class="show-data">
+      <el-carousel class="show-data" height="76px" :interval="5000" arrow="never" indicator-position="outside">
-        <div class="show-data-item" v-for="item in totalData">
+        <el-carousel-item class="show-data-swipe" v-for="i in (Math.ceil(totalData.length/3))">
-          <div class="show-data-item__num">{{ item.value }}</div>
+          <div class="show-data-item" v-for="j in 3" v-if="totalData[(i-1)*3+(j-1)]">
-          <div class="show-data-item__label">{{ item.name }}</div>
+            <div class="show-data-item__num">{{ totalData[(i-1)*3+(j-1)].value }}</div>
-        </div>
+            <div class="show-data-item__label">{{ totalData[(i-1)*3+(j-1)].label }}</div>
-      </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
       <div id="property-bar-chart"></div>
     </div>
 
@@ -49,7 +51,7 @@ export default {
             false
           )
         )?.data;
-        this.totalData = JSON.parse(res?.find((i) => i.key === "data")?.value);
+        this.totalData = JSON.parse(res?.find((i) => i.key === "barchart")?.value);
         this.lineChartData = JSON.parse(
           res?.find((i) => i.key === "linechart")?.value
         );
@@ -127,10 +129,10 @@ export default {
             data: this.chartData.map((i) => i.value),
             label: {
               show: true,
-              position: "insideRight",
+              avoidLabelOverlap: true,
+              position: 'insideRight',
               color: "#fff",
               fontWeight: "bold",
-              formatter: "{c}",
             },
             itemStyle: {
               color: (params) => {
@@ -164,7 +166,7 @@ export default {
           top: "50px",
           left: "2%",
           right: "4%",
-          bottom: "0",
+          bottom: "10px",
           containLabel: true,
         },
         xAxis: [
@@ -181,7 +183,7 @@ export default {
                 color: '#395e9c',
               },
             },
-            data: this.lineChartData?.years || [],
+            data: this.lineChartData?.year || [],
           },
         ],
         yAxis: [
@@ -266,7 +268,7 @@ export default {
                 ),
               },
             },
-            data: this.lineChartData?.data["政府"],
+            data: this.lineChartData?.data.find(i => i.label === '政府')?.value,
           },
           {
             name: "商业",
@@ -307,7 +309,7 @@ export default {
                 color: "rgb(96, 191, 250)",
               },
             },
-            data: this.lineChartData?.data["商业"],
+            data: this.lineChartData?.data.find(i => i.label === '商业')?.value,
           },
         ],
       });
@@ -330,9 +332,6 @@ export default {
 
   .show-data {
     margin-top: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 
     $itemColors: linear-gradient(0deg, #d91e19 0%, #d95f39 99%, #d95f39 100%),
       linear-gradient(0deg, #e67725 0%, #ff9d62 100%),
@@ -349,21 +348,33 @@ export default {
         }
       }
     }
+    &-swipe {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
     &-item {
+      height: 100%;
       flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       text-align: center;
       box-shadow: inset 0 0 6px 4px #1a3674;
 
       &__num {
+        width: 100%;
+        flex: 1;
         border-radius: 5px 5px 0 0;
-        font-size: 34px;
+        font-size: 32px;
         color: #ffffff;
         font-weight: bold;
       }
       &__label {
+        flex: 1;
         border-radius: 0 0 5px 5px;
         font-size: 16px;
-        line-height: 54px;
         color: #ffffff;
       }
     }

src/views/bigSreen/component/CenterTop.vue

@@ -54,25 +54,22 @@
         </transition>
         <transition name="fade">
           <div class="carousel-img" v-show="type === 'img'">
-            <div class="data-panel">
+<!--            <div class="data-panel">-->
-              <div class="data-panel__title">
+<!--              <div class="data-panel__title">-->
-                <i class="el-icon-arrow-left" @click="areaClick('prev')"></i>
+<!--                <i class="el-icon-arrow-left" @click="areaClick('prev')"></i>-->
-                <div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>
+<!--                <div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>-->
-                <i class="el-icon-arrow-right" @click="areaClick('next')"></i>
+<!--                <i class="el-icon-arrow-right" @click="areaClick('next')"></i>-->
-              </div>
+<!--              </div>-->
-
+
-              <dv-scroll-board
+
-                ref="scrollBoard"
+<!--            </div>-->
-                :key="scrollBoardKey"
+            <dv-scroll-board
-                :config="areaConfig"
+              ref="scrollBoard"
-                style="width: 100%; height: 400px; margin-top: 16px"
+              :key="scrollBoardKey"
-              />
+              :config="areaConfig"
-            </div>
+              style="width: 350px; height: 240px; position: absolute;z-index: 998;bottom: 22px;left: 22px;background-color: #031e6099;border: 2px solid #53c2f4;border-radius: 10px;"
-            <dv-flyline-chart
-              dev
-              :config="flyingConfig"
-              style="width: 100%; height: 100%"
             />
+            <div style="width: 100%; height: 100%" class="map-container"></div>
           </div>
         </transition>
 
@@ -203,6 +200,8 @@ import { getList as longInsuranceIndex } from "@/api/longInsurance"
 import { getList as scheduleListChecksIndex } from "@/api/scheduleListChecks"
 import { getList } from "@/api/bigScreen";
 import gsap from "gsap";
+import '../china'
+import echarts from "echarts";
 import dataPreview from "@/views/bigSreen/component/dataPreview.vue";
 
 export default {
@@ -266,13 +265,190 @@ export default {
       activeColors: ['#8537d8','#159138', '#4b72dc', '#c92d40'],
       selectData: {},
       isShowPreview: false,
+
+      companies: [],
+      mapOptions: {
+        backgroundColor: '#132675',
+        title: {},
+        tooltip: {
+          trigger: 'item',
+          formatter: function(val) {
+            return val.name
+          },
+        }, //左侧小导航图标
+        geo: {
+          map: "china",
+          aspectScale: 0.8,
+          layoutCenter: ["50%", "50%"],
+          layoutSize: "120%",
+          itemStyle: {
+            normal: {
+              areaColor: {
+                type: "linear-gradient",
+                x: 0,
+                y: 1200,
+                x2: 1000,
+                y2: 0,
+                colorStops: [{
+                  offset: 0,
+                  color: "#152E6E", // 0% 处的颜色
+                },
+                  {
+                    offset: 1,
+                    color: "#0673AD", // 50% 处的颜色
+                  },
+                ],
+                global: true, // 缺省为 false
+              },
+              shadowColor: "#ccc",
+              shadowOffsetX: -2,
+              shadowOffsetY: 4,
+              opacity: 0.5,
+              shadowBlur: 10,
+            },
+            emphasis: {
+              areaColor: "#0f5d9d",
+            },
+          },
+          regions: [{
+            name: "南海诸岛",
+            itemStyle: {
+              areaColor: "rgba(0, 10, 52, 1)",
+              borderColor: "rgba(0, 10, 52, 1)",
+              normal: {
+                opacity: 0,
+                label: {
+                  show: false,
+                  color: "#009cc9",
+                },
+              },
+            },
+            label: {
+              show: false,
+              color: "#FFFFFF",
+              fontSize: 12,
+            },
+          }]
+        },
+        //配置属性
+        series: [{
+          name: '中国',
+          type: 'map',
+          mapType: 'china',
+          roam: false,
+          aspectScale: 0.8,
+          layoutCenter: ["50%", "50%"], //地图位置
+          layoutSize: "120%",
+          zoom: 1, //当前视角的缩放比例
+          label: {
+            normal: {
+              show: true, //省份名称
+              textStyle: {
+                fontSize: 15,
+                color: '#fff'
+              }
+            },
+
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            // 地图的样式
+            normal: {
+              borderWidth: 2.5,
+              borderColor: "#67b1e3", // 省份边框颜色
+              areaColor: new echarts.graphic.LinearGradient(
+                0.5,
+                0,
+                0.5,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#59a6da",
+                  },
+                  {
+                    offset: 1,
+                    color: "#142976",
+                  },
+                ],
+                false
+              ),
+              color: "#fff"
+            },
+            emphasis: {
+              // 鼠标hover显示
+              show: false,
+              //areaColor: "#0D30D4",
+              areaColor: {
+                type: "linear",
+                x: 1,
+                y: 0,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                  offset: 0,
+                  color: "red", // 0% 处的颜色
+                },
+                  {
+                    offset: 1,
+                    color: "rgb(218,172,113)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              color: "#fff"
+            }
+          },
+          data: []
+        },{
+          name: 'company',
+          type:'effectScatter',
+          coordinateSystem: 'geo',
+          symbolSize: 10,
+          data: [
+            {
+              name: 'a',
+              value: [120.501856,36.862275]
+            }
+          ],
+          itemStyle: {
+            normal: {
+              background: '#e97b51',
+              color: '#e97b51',
+              shadowBlur: 10,
+              shadowColor: '#81606d'
+            }
+          }
+        }]
+      }
     };
   },
   methods: {
+    initMap() {
+      this.mapChart = echarts.init(document.querySelector('.map-container'))
+      this.mapChart.setOption(this.mapOptions)
+    },
     todayClick(e, item, index) {
       this.activeToday = item
       this.activeColor = this.activeColors[index]
     },
+    async getMapData() {
+      try {
+        const res = (
+          await getList({
+            type: 'map'
+          },false)
+        ).data;
+        this.mapOptions.series[1].data = JSON.parse(res.find(i => i.key === 'points')?.value);
+        this.companies = JSON.parse(res.find(i => i.key === 'companies')?.value);
+        this.initMap()
+      } catch (err) {
+        console.error(err)
+        this.initMap()
+      }
+    },
     async getTotal() {
       const res = (
         await getList(
@@ -428,30 +604,12 @@ export default {
     }
   },
   computed: {
-    flyingConfig() {
-      return {
-        points: this.areas?.map(area => ({
-          position: area.point,
-          text: area.name
-        }))?.filter(i => i.text !== this.activeArea?.name) || [],
-        centerPoint: this.activeArea?.point,
-        bgImgUrl: require("@/assets/bigScreen/china.png"),
-        pointsImg: {
-          url: require("@/assets/bigScreen/points.png"),
-        },
-        centerPointImg: {
-          url: require("@/assets/bigScreen/points-a.png")
-        },
-        orbitColor: "#0000",
-        lineWidth: 0,
-      }
-    },
     areaConfig() {
       return {
         oddRowBGC: "#0a1b5632",
         evenRowBGC: "#0a1b5632",
-        rowNum: 8,
+        rowNum: 5,
-        data: this.activeArea?.data?.map(i => [i]) || [],
+        data: this.companies.map(i => [i]),
       }
     },
     listConfig() {
@@ -496,6 +654,7 @@ export default {
   },
   mounted() {
     document.body.addEventListener("keypress", this.keywordRegister);
+    this.getMapData()
   },
   beforeDestroy() {
     document.body.removeEventListener("keypress", this.keywordRegister);

src/views/system/user.vue

@@ -7,7 +7,7 @@
           <div slot="content"></div>
           <slot>
             <div>
-              <Input style="width: 200px; margin-right: 10px" v-model.number="searchFields.Name" placeholder="关键字搜索" />
+              <Input style="width: 200px; margin-right: 10px" v-model.number="searchFields.keyword" placeholder="关键字搜索" />
               <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
               <Button type="primary" @click="edit()" style="margin-left: 10px">新增用户</Button>
             </div>
@@ -47,6 +47,16 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <Page :total="total"
+              show-elevator
+              show-total
+              :current.sync="searchFields.page"
+              :page-size="searchFields.page_size"
+              @on-change="e => {
+                 searchFields.page = e;
+                 load()
+              }"/>
       </div>
       <el-dialog title="用户编辑" :visible.sync="dialogFormVisible" width="30%">
         <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
@@ -97,6 +107,7 @@
     data() {
 
       return {
+        total: 0,
         roleList: [],
         checkAll: false,
         isIndeterminate: true,
@@ -130,7 +141,9 @@
         tableHeight: 0,
         //查询条件字段
         searchFields: {
-          KeyWord: ""
+          keyword: "",
+          page: 1,
+          page_size: 20,
         },
         tableData: []
       }
@@ -155,8 +168,9 @@
       },
       load() {
         var that = this;
-        listuser().then(response => {
+        listuser(that.searchFields).then(response => {
           var data = response.data;
+          that.total = response.total;
           var _rolelist = [];
           for (var m of data) {
             _rolelist = that.roleList;