feat: 数据大屏首页

doc/待更新脚本.txt

@@ -24,4 +24,9 @@ INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78001'
 INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78002', '', 'CreditRecordDepartment', 2, '环保', 2, 1, 1);
 INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78003', '', 'CreditRecordDepartment', 3, '工商', 3, 1, 1);
 INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78004', '', 'CreditRecordDepartment', 4, '安全', 4, 1, 1);
-INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78005', '', 'CreditRecordDepartment', 5, '其他', 5, 1, 1);
+INSERT INTO `sys_dictionary_item` VALUES ('1ecc5294-51f6-1111-4455-e63f7ac78005', '', 'CreditRecordDepartment', 5, '其他', 5, 1, 1);
+
+-- 2024-7-24 数据大屏路由与权限
+INSERT INTO sys_function_code VALUES ('T011004', '数据大屏', 'T0110', 4);
+INSERT INTO `sys_menu` VALUES ('T011004', 4, '数据大屏', NULL, 'views/dataMap/dataScreenIndex', '/dataScreenIndex', 'T0110', NULL, 0, 1, 1, 'T011004', 1, NULL, 1);
+insert into sys_role_sys_function_code (`RoleID`, `FunctionCode`) values('20afde90-a81a-11ed-a6c5-7085c2a9999e','T011004');

src/main/java/com/hz/employmentsite/config/WebConfiguration.java

@@ -115,6 +115,13 @@ public class WebConfiguration implements WebMvcConfigurer {
         excludePath.add("/api/jobUserService/jobUser/baseInfoSave");
         excludePath.add("/api/jobUserService/jobUser/editOpenId"); // 更新求职人员的openID
 
+        // 数据地图与数据大屏接口
+        excludePath.add("/api/statistics/yearSystemApplyCount"); // 系统年度使用情况
+        excludePath.add("/api/statistics/jobUserByRegionAndDifficulty"); // 普通求职者与就业困难人员情况
+        excludePath.add("/api/statistics/employedJobUserCount"); // 各区县的已就业人员
+        excludePath.add("/api/statistics/systemApplyCountBySite"); // 各驿站的业务数据情况
+        excludePath.add("/api/jobUserServiceRecords/getSystemServiceList"); // 系统整体的服务记录
+
 
         excludePath.add("/api/wx/**");
         excludePath.add("/gdgovMapApi");

src/main/java/com/hz/employmentsite/controller/statistics/StatisticsController.java

@@ -67,10 +67,10 @@ public class StatisticsController {
      * @return
      */
     @GetMapping("/yearSystemApplyCount")
-    public BaseResponse findYearSystemDataCount(@RequestParam String year, @RequestParam(required = false) String regionCode,
-                                                 @RequestParam(required = false) String institutionID,
-                                                 @RequestParam(required = false) String siteID) {
-        Map<String, List<RegionSystemDataCount>> result = statisticsService.findYearSystemDataCount(year, regionCode, institutionID, siteID);
+    public BaseResponse findYearSystemDataCount(@RequestParam(required = false) String year, @RequestParam(required = false) String regionCode,
+                                                @RequestParam(required = false) String institutionID, @RequestParam(required = false) String siteID,
+                                                @RequestParam(required = false) Date startDate, @RequestParam(required = false) Date endDate) {
+        Map<String, List<RegionSystemDataCount>> result = statisticsService.findYearSystemDataCount(year, regionCode, institutionID, siteID, startDate, endDate);
         return RespGenerstor.success(result);
     }
 
@@ -101,6 +101,25 @@ public class StatisticsController {
         return RespGenerstor.success(result);
     }
 
+    /**
+     * 查询各区县的已就业人员
+     */
+    @GetMapping("/employedJobUserCount")
+    public BaseResponse findEmployedJobUserCount() {
+        List<RegionJobUserCount> result = statisticsService.findEmployedJobUserCount();
+        return RespGenerstor.success(result);
+    }
+
+    /**
+     * 查询各驿站的业务数据情况
+     */
+    @GetMapping("/systemApplyCountBySite")
+    public BaseResponse getSystemApplyCountBySite(@RequestParam(value = "startDate", required = false) Date startDate,
+                                                  @RequestParam(value = "endDate", required = false) Date endDate) {
+        List<SystemDataCount> systemDataCount = statisticsService.findSystemDataCountBySite(startDate, endDate);
+        return RespGenerstor.success(systemDataCount);
+    }
+
     /**
      * 导出指定时间段的系统使用情况
      *
@@ -227,7 +246,7 @@ public class StatisticsController {
                                                    @RequestParam(required = false) String regionCode,
                                                    @RequestParam(required = false) String institutionID,
                                                    @RequestParam(required = false) String siteID) throws Exception {
-        Map<String, List<RegionSystemDataCount>> result = statisticsService.findYearSystemDataCount(year, regionCode, institutionID, siteID);
+        Map<String, List<RegionSystemDataCount>> result = statisticsService.findYearSystemDataCount(year, regionCode, institutionID, siteID, null, null);
         ExcelHelper.ExcelData data = excelHelper.new ExcelData();
         // 设置标题区域
         Map<String, CellRangeAddress> titleMap = new HashMap<>();

src/main/java/com/hz/employmentsite/mapper/cquery/StatisticsCQuery.java

@@ -63,7 +63,8 @@ public interface StatisticsCQuery {
      */
     List<RegionSystemDataCount> findYearCompanyCount(@Param("year") String year,
                                                      @Param("regionCode") String regionCode, @Param("institutionID") String institutionID,
-                                                     @Param("siteID") String siteID);
+                                                     @Param("siteID") String siteID,
+                                                     @Param("startDate") Date startDate, @Param("endDate") Date endDate);
 
     /**
      * 查询年度添加的岗位数量
@@ -71,15 +72,17 @@ public interface StatisticsCQuery {
      */
     List<RegionSystemDataCount> findYearPostCount(@Param("year") String year,
                                                   @Param("regionCode") String regionCode, @Param("institutionID") String institutionID,
-                                                  @Param("siteID") String siteID);
+                                                  @Param("siteID") String siteID,
+                                                  @Param("startDate") Date startDate, @Param("endDate") Date endDate);
 
     /**
      * 查询年度添加的求职人员数量
      * @param year 年份
      */
     List<RegionSystemDataCount> findYearJobUserCount(@Param("year") String year,
-                                                  @Param("regionCode") String regionCode, @Param("institutionID") String institutionID,
-                                                  @Param("siteID") String siteID);
+                                                     @Param("regionCode") String regionCode, @Param("institutionID") String institutionID,
+                                                     @Param("siteID") String siteID,
+                                                     @Param("startDate") Date startDate, @Param("endDate") Date endDate);
 
     /**
      * 查询月度添加的企业数量，并按周数分开统计
@@ -107,4 +110,9 @@ public interface StatisticsCQuery {
     List<RegionSystemDataCount> findMonthJobUserCount(@Param("year") String year, @Param("month") String month,
                                                      @Param("regionCode") String regionCode, @Param("institutionID") String institutionID,
                                                      @Param("siteID") String siteID);
+
+    /**
+     * 查询已就业的求职人员人数
+     */
+    List<RegionJobUserCount> findEmployedJobUserCount();
 }

src/main/java/com/hz/employmentsite/services/impl/statistics/StatisticsServiceImpl.java

@@ -193,15 +193,15 @@ public class StatisticsServiceImpl implements StatisticsService {
      * @return
      */
     @Override
-    public Map<String, List<RegionSystemDataCount>> findYearSystemDataCount(String year, String regionCode, String institutionID, String siteID) {
+    public Map<String, List<RegionSystemDataCount>> findYearSystemDataCount(String year, String regionCode, String institutionID, String siteID, Date startDate, Date endDate) {
         // 各区县的驿站工作人员统计数量
         List<RegionSystemDataCount> regionSiteUserCount = statisticsCQuery.findRegionSiteUserCount(regionCode, institutionID, siteID);
         // 指定年份的企业统计数量
-        List<RegionSystemDataCount> yearCompanyCount = statisticsCQuery.findYearCompanyCount(year, regionCode, institutionID, siteID);
+        List<RegionSystemDataCount> yearCompanyCount = statisticsCQuery.findYearCompanyCount(year, regionCode, institutionID, siteID, startDate, endDate);
         // 指定年份的岗位统计数量
-        List<RegionSystemDataCount> yearPostCount = statisticsCQuery.findYearPostCount(year, regionCode, institutionID, siteID);
+        List<RegionSystemDataCount> yearPostCount = statisticsCQuery.findYearPostCount(year, regionCode, institutionID, siteID, startDate, endDate);
         // 指定年份的求职人员统计数量
-        List<RegionSystemDataCount> yearJobUserCount = statisticsCQuery.findYearJobUserCount(year, regionCode, institutionID, siteID);
+        List<RegionSystemDataCount> yearJobUserCount = statisticsCQuery.findYearJobUserCount(year, regionCode, institutionID, siteID, startDate, endDate);
 
         // 汇总数据
         List<RegionSystemDataCount> sumData = new ArrayList<>();
@@ -361,4 +361,20 @@ public class StatisticsServiceImpl implements StatisticsService {
         return regionCountList;
 
     }
+
+    /**
+     * 查询系统中已就业的求职人员人数
+     */
+    @Override
+    public List<RegionJobUserCount> findEmployedJobUserCount() {
+        return statisticsCQuery.findEmployedJobUserCount();
+    }
+
+    /**
+     * 查询各驿站的业务数据信息
+     */
+    @Override
+    public List<SystemDataCount> findSystemDataCountBySite(Date startDate, Date endDate) {
+        return statisticsCQuery.findSystemDataCount(startDate, endDate);
+    }
 }

src/main/java/com/hz/employmentsite/services/service/statistics/StatisticsService.java

@@ -32,7 +32,8 @@ public interface StatisticsService {
      * @param year 年份
      * @return
      */
-    Map<String, List<RegionSystemDataCount>> findYearSystemDataCount(String year, String regionCode, String institutionID, String siteID);
+    Map<String, List<RegionSystemDataCount>> findYearSystemDataCount(String year, String regionCode, String institutionID,
+                                                                     String siteID, Date startDate, Date endDate);
 
     /**
      * 查询各年龄段的求职人员数量
@@ -48,4 +49,14 @@ public interface StatisticsService {
      * 查询县区的失业人员与就业困难人数情况
      */
     List<RegionJobUserCount> findJobUserByRegionAndDifficulty(String year, String month);
+
+    /**
+     * 查询系统中已就业的求职人员人数
+     */
+    List<RegionJobUserCount> findEmployedJobUserCount();
+
+    /**
+     * 查询各驿站的业务数据信息
+     */
+    List<SystemDataCount> findSystemDataCountBySite(Date startDate, Date endDate);
 }

src/main/resources/mapping/cquery/StatisticsCQuery.xml

@@ -292,7 +292,16 @@
                 LEFT JOIN pc_site_institution siteInst ON site.SiteID = siteInst.SiteID
                 LEFT JOIN area_code area ON area.`code` = site.RegionCode
         WHERE
-            YEAR(company.CreateTime) = #{year}
+            1=1
+            <if test="year!='' and year!=null">
+                and YEAR(company.CreateTime) = #{year}
+            </if>
+            <if test="startDate != null">
+                and DATE(company.CreateTime) <![CDATA[ >= ]]> DATE(#{startDate})
+            </if>
+            <if test="endDate != null ">
+                and DATE(company.CreateTime) <![CDATA[ <= ]]> DATE(#{endDate})
+            </if>
             <if test="siteID!='' and siteID!=null">
                 and site.siteID = #{siteID}
             </if>
@@ -324,7 +333,16 @@
                 LEFT JOIN pc_site_institution siteInst ON site.SiteID = siteInst.SiteID
                 LEFT JOIN area_code area ON area.`code` = site.RegionCode
         WHERE
-            YEAR(post.CreateTime) = #{year}
+            1=1
+            <if test="year!='' and year!=null">
+                and YEAR(post.CreateTime) = #{year}
+            </if>
+            <if test="startDate != null">
+                and DATE(post.CreateTime) <![CDATA[ >= ]]> DATE(#{startDate})
+            </if>
+            <if test="endDate != null ">
+                and DATE(post.CreateTime) <![CDATA[ <= ]]> DATE(#{endDate})
+            </if>
             <if test="siteID!='' and siteID!=null">
                 and site.siteID = #{siteID}
             </if>
@@ -355,7 +373,16 @@
                 LEFT JOIN pc_site_institution siteInst ON site.SiteID = siteInst.SiteID
                 LEFT JOIN area_code area ON area.`code` = site.RegionCode
         WHERE
-            YEAR(jobUser.CreateTime) = #{year}
+            1=1
+            <if test="year!='' and year!=null">
+                and YEAR(jobUser.CreateTime) = #{year}
+            </if>
+            <if test="startDate != null">
+                and DATE(jobUser.CreateTime) <![CDATA[ >= ]]> DATE(#{startDate})
+            </if>
+            <if test="endDate != null ">
+                and DATE(jobUser.CreateTime) <![CDATA[ <= ]]> DATE(#{endDate})
+            </if>
             <if test="siteID!='' and siteID!=null">
                 and site.siteID = #{siteID}
             </if>
@@ -471,4 +498,23 @@
             area.`code`,
             `Week` ASC
     </select>
+
+    <select id="findEmployedJobUserCount" resultType="com.hz.employmentsite.vo.statistics.jobUser.RegionJobUserCount">
+        SELECT
+            area.`code` AS regionCode,
+            area.`name` AS regionName,
+            COUNT( jobUser.JobuserID ) AS jobUserCount
+        FROM
+            area_code area
+                LEFT JOIN pc_site site ON area.`code` = site.RegionCode
+                LEFT JOIN pc_jobuser jobUser ON site.SiteID = jobUser.SiteID
+        WHERE
+            area.lv = 3
+          AND jobUser.JobStatusID = 1
+        GROUP BY
+            area.`code`,
+            area.`name`
+        ORDER BY
+            area.`code`
+    </select>
 </mapper>

vue/src/api/jobUserManager/jobuser/jobUserService.ts

@@ -61,3 +61,14 @@ export function del(data: any) {
     }
   )
 }
+
+export function getSystemServiceList() {
+  return request(
+    {
+      url: 'jobUserServiceRecords/getSystemServiceList',
+      method: 'get',
+      params: {},
+    },
+    {isNew: true},
+  );
+}

vue/src/api/statistics/index.ts

@@ -98,3 +98,36 @@ export function getJobUserByRegionAndDifficulty(year: any, month: any) {
     },
   );
 }
+
+/**
+ * 查询各区县的已就业人员
+ */
+export function getEmployedJobUserCount() {
+  return request<object>(
+    {
+      url: 'statistics/employedJobUserCount',
+      method: 'get',
+      params: {},
+    },
+    {
+      isNew: true,
+    },
+  );
+}
+
+/**
+ * 查询各驿站的业务数据情况
+ * @param params 查询参数
+ */
+export function getSystemApplyCountBySite(params: any) {
+  return request<object>(
+    {
+      url: 'statistics/systemApplyCountBySite',
+      method: 'get',
+      params: params,
+    },
+    {
+      isNew: true,
+    },
+  );
+}

vue/src/router/constant.ts

@@ -7,7 +7,7 @@ export const PARENT_LAYOUT_NAME = 'ParentLayout';
 export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
 
 // 路由白名单
-export const whiteNameList = [LOGIN_NAME, 'icons', 'error', 'error-404'] as const; // no redirect whitelist
+export const whiteNameList = [LOGIN_NAME, 'icons', 'error', 'error-404', 'dataScreenIndex'] as const; // no redirect whitelist
 
 export type WhiteNameList = typeof whiteNameList;
 

vue/src/router/outsideLayout.ts

@@ -40,4 +40,13 @@ export const jobUserDataMapRoute: RouteRecordRaw = {
   },
 };
 
-export default [LoginRoute, companyDataMapRoute, siteDataMapRoute, jobUserDataMapRoute];
+export const dataScreenIndexRoute: RouteRecordRaw = {
+  path: '/dataMap/dataScreenIndex',
+  name: 'dataScreenIndex',
+  component: () => import('@/views/dataScreen/html/index.vue'),
+  meta: {
+    title: '惠州市就业驿站管理系统',
+  },
+};
+
+export default [LoginRoute, companyDataMapRoute, siteDataMapRoute, jobUserDataMapRoute, dataScreenIndexRoute];

vue/src/views/dataScreen/echarts.ts

@@ -0,0 +1,155 @@
+import * as echarts from 'echarts';
+
+/**
+ * 折线图表初始化
+ * @param xTitleList X轴标题数据
+ * @param seriesList 折线数据内容
+ * @param legendList 图表数据说明
+ * @param domId 目标DOM元素ID
+ */
+export function initLineImageTable(xTitleList: any, seriesList: any, legendList: any, domId: any) {
+  const chartDom = document.getElementById(domId);
+  const myChart = echarts.init(chartDom);
+  let option = {
+    backgroundColor: '#060b1e',
+    title: {},
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: legendList,
+      icon: "circle",
+      textStyle: {
+        color: '#69859b'
+      },
+      bottom: 'bottom',
+    },
+    grid: {
+      top: '3%',
+      left: '3%',
+      right: '3%',
+      bottom: '30px',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: xTitleList,
+      axisLabel: {
+        color: '#69859b'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#69859b'
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(70,70,70,0.5)'
+        }
+      }
+    },
+    series: seriesList
+  };
+
+  option && myChart.setOption(option);
+}
+
+/**
+ * 数据集柱状图表初始化
+ * @param dataSetSource 数据集数据
+ * @param seriesList 柱形图表样式定义
+ * @param domId 目标DOM元素ID
+ */
+export function initDataSetBarImageTable(dataSetSource: any, seriesList: any, domId: any) {
+  const chartDom = document.getElementById(domId);
+  const myChart = echarts.init(chartDom);
+  let option = {
+    title: {},
+    toolbox: {},
+    legend: {
+      textStyle: {
+        color: '#69859b'
+      },
+      bottom: 'bottom',
+      icon: "circle",
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: '3%',
+      left: '3%',
+      right: '3%',
+      bottom: '30px',
+      containLabel: true
+    },
+    dataset: {
+      source: dataSetSource
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: {
+        color: '#69859b'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#69859b'
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(70,70,70,0.5)'
+        }
+      }
+    },
+    series: seriesList
+  };
+
+  option && myChart.setOption(option);
+}
+
+/**
+ * 环形图图表初始化
+ * @param seriesDataList 展示数据
+ * @param graphicChildren 圆环内部文本
+ * @param domId 目标DOM元素ID
+ */
+export function initPieImageTable(seriesDataList: any, graphicChildren: any, domId: any) {
+  const chartDom = document.getElementById(domId);
+  const myChart = echarts.init(chartDom);
+  const option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    grid: {
+      top: '3%',
+      left: '3%',
+      right: '3%',
+      bottom: '3%',
+      containLabel: true
+    },
+    series: [
+      {
+        name: '已就业人数',
+        type: 'pie',
+        radius: ['40%', '60%'],
+        label: {
+          color: 'inherit',
+          position: 'outer',
+          borderWidth: 0,
+          formatter: '{b}：{d}%'
+        },
+        data: seriesDataList
+      }
+    ],
+    graphic: graphicChildren
+  };
+
+  option && myChart.setOption(option);
+}

vue/src/views/dataScreen/html/css/reset.css

@@ -0,0 +1,162 @@
+/* 
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+body, html { font-size: 100%; width:100%; height: 100%; min-width: 1920px; min-height: 1080px; overflow: auto; padding: 0; margin: 0;}
+
+/* Reset */
+*,
+*:after,
+*:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Clearfix hack */
+.clearfix:before,
+.clearfix:after {
+	content: " ";
+	display: table;
+}
+
+.clearfix:after {
+	clear: both;
+}
+
+body{
+	background: #060B1E url("../images/bg.png") no-repeat center 100px;
+	background-size: 100%;
+	color: #77F8FF;
+	font-family: "Microsoft YaHei", Helvetica, Arial,sans-serif, FreeSans, Arimo;
+	line-height: normal;
+	overflow: hidden;
+}
+
+a{color: #4466f4; text-decoration: none; outline: none; cursor: pointer; transition: all 0.25s ease-in-out;}
+
+img, object, embed, video {
+	max-width: 100%;
+}
+
+form,input, select, textarea { font-family: "Microsoft YaHei"; margin: 0; outline: 0; transition: all 0.25s ease-in-out; }
+fieldset { border: 0; margin: 0; padding: 0; }
+label,select,button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  outline: 0;
+}
+
+/*table*/
+table {width:100%; float:left;}
+table th,td{text-align:center;border:none;vertical-align:middle;}	
+table th{font-weight:normal; color:#6c799c;}
+table td{color:#2ff5ff;}
+table tr{transition: all 0.25s ease-in-out;}
+
+/*font*/
+@font-face {
+	font-family: "title";
+	src:url("../font/AlimamaShuHeiTi-Bold.otf");
+	src:url("../font/AlimamaShuHeiTi-Bold.ttf");
+}
+@font-face{
+	font-family: "number";
+	src:url("../font/DIN-Bold.otf");
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+	width:10px;
+    height:10px;
+}
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+    background:#1f2d3b;
+    border-radius:8px;
+}
+/*---鼠标经过显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+	background-color:#34495e;
+}
+/*---鼠标点击样式--*/ 
+::-webkit-scrollbar-thumb:active{
+	background-color:#1c2835;
+} 
+/*---滚动条两端的按钮样式--*/
+::-webkit-scrollbar-button{
+    display:none;
+}
+/*---外层轨道,可以用display:none让其不显示--*/
+::-webkit-scrollbar-track{
+    display:none;
+}
+/*---内层轨道，滚动条中间部分（除去）--*/
+::-webkit-scrollbar-track-piece{
+    display:none;
+}
+/*---边角样式--*/
+::-webkit-scrollbar-corner{
+    display:none;
+}
+/*---定义右下角拖动块的样式--*/
+::-webkit-scrollbar-resizer{
+    display:none;
+}

vue/src/views/dataScreen/html/css/style.css

@@ -0,0 +1,447 @@
+@charset "UTF-8";
+/****** 头部 ******/
+.header {
+  width: 100%;
+  height: 123px;
+  background: url("../images/header.png") no-repeat center 0;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 0;
+  position: relative;
+}
+
+.header h1 {
+  font-family: "title";
+  font-size: 30px;
+  margin-top: 16px;
+  text-align: center;
+  text-shadow: 0 0 10px #0078FF;
+}
+
+.time {
+  position: absolute;
+  right: 0;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 40px 20px 0 0;
+}
+
+/****** 主体 ******/
+.body-content {
+  width: 100%;
+  height: calc(100% - 100px);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  z-index: 1;
+  margin-top: -40px;
+}
+
+.side {
+  width: 464px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+}
+
+.center {
+  /*	width: calc(100% - 1008px);*/
+  width: 880px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+}
+
+.center-1 {
+  width: 100%;
+  height: 63%;
+  position: relative;
+}
+
+.center-2 {
+  width: 100%;
+  height: 30%;
+  padding-bottom: 1%;
+}
+
+.content-box {
+  width: 100%;
+  height: 30%;
+  padding-bottom: 3%;
+}
+
+.box-title {
+  width: 100%;
+  height: 39px;
+  font-family: "title";
+  font-size: 18px;
+  color: #FFFFFF;
+  text-shadow: 0 0 14px #0078FF;
+  background: url("../images/title-bg.png") no-repeat center 0;
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  text-indent: 10px;
+}
+
+.chart-box {
+  width: 100%;
+  height: calc(100% - 39px);
+  padding-top: 20px;
+  overflow: hidden;
+  /*	background: #444;*/
+}
+
+
+/****** 菜单 ******/
+.nav {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  padding: 20px 70px;
+}
+
+.nav-items {
+  width: 100px;
+  height: 110px;
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+  flex-wrap: wrap;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.2s ease-in-out;
+}
+
+.nav-items h2 {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.nav-1 {
+  width: 100px;
+  height: 80px;
+  background: url("../images/menu-icon-1.svg") no-repeat center 0;
+  background-size: 100%;
+}
+
+.nav-2 {
+  width: 100px;
+  height: 80px;
+  background: url("../images/menu-icon-2.svg") no-repeat center 0;
+  background-size: 100%;
+}
+
+.nav-3 {
+  width: 100px;
+  height: 80px;
+  background: url("../images/menu-icon-3.svg") no-repeat center 0;
+  background-size: 100%;
+}
+
+.nav-4 {
+  width: 100px;
+  height: 80px;
+  background: url("../images/menu-icon-4.svg") no-repeat center 0;
+  background-size: 100%;
+}
+
+.nav-items:hover, .nav-active {
+  opacity: 1;
+}
+
+/******  统计 ******/
+.s-box {
+  width: 100%;
+  height: calc(100% - 150px);
+  position: relative;
+}
+
+.statistics {
+  width: 217px;
+  position: absolute;
+  background-size: 100%;
+}
+
+.t-1 {
+  width: 217px;
+  height: 118px;
+  background: url("../images/t-1.svg") no-repeat 0 0;
+  top: 40%;
+  left: 7%;
+}
+
+.t-2 {
+  width: 217px;
+  height: 118px;
+  background: url("../images/t-2.svg") no-repeat 0 0;
+  top: 26%;
+  right: 17%;
+}
+
+.t-3 {
+  width: 237px;
+  height: 138px;
+  background: url("../images/t-3.svg") no-repeat 0 0;
+  top: 60%;
+  right: 6%;
+}
+
+.s-title {
+  font-size: 14px;
+  color: #81B1C7;
+}
+
+.s-number {
+  font-family: "number";
+  font-size: 30px;
+  color: #FFFFFF;
+}
+
+/******  点动画 ******/
+
+.waves {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  -webkit-backface-visibility: hidden;
+}
+
+.wave, .waves:before, .waves:after {
+  position: absolute;
+  background: #EEC36C;
+  width: 20px;
+  height: 20px;
+  content: "";
+  display: block;
+  border-radius: 50%;
+  -webkit-backface-visibility: hidden;
+}
+
+.waves:before {
+  animation: wave-animate 3s infinite ease-out;
+}
+
+.waves:after {
+  opacity: 0;
+  animation: wave-animate 3s 1.5s infinite ease-out;
+}
+
+@keyframes wave-animate {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+    transform-origin: center;
+  }
+  100% {
+    transform: scale(3);
+    opacity: 0;
+    transform-origin: center;
+  }
+}
+
+.box-bigtitle {
+  width: 100%;
+  height: 40px;
+  font-family: "title";
+  font-size: 18px;
+  color: #FFFFFF;
+  text-align: center;
+  text-shadow: 0 0 14px #0078FF;
+  background: url("../images/big-title-bg.svg") no-repeat center 0;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/******  tab ******/
+.tab-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.tab-item {
+  font-size: 12px;
+  color: #848A9B;
+  text-align: center;
+  border: solid 1px #848A9B;
+  border-radius: 30px;
+  padding: 5px 15px;
+  margin: 0 5px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.tab-item:hover, .tab-active {
+  color: #77F8FF;
+  text-shadow: 0 0 10px #0078FF;
+  border: 1px solid #00F5FF;
+  box-shadow: inset 0 1px 10px #0088FF;
+}
+
+/******  排行 ******/
+.ranking-1 {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.ranking-1-item {
+  width: 109px;
+  height: 150px;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
+  position: absolute;
+}
+
+.NO1 {
+  height: 170px;
+  margin: 0 20px 0 20px;
+  background: url("../images/b-1.svg") no-repeat center 0;
+  animation: jump 1s alternate infinite ease-in-out;
+}
+
+.NO2 {
+  left: 35px;
+  background: url("../images/b-2.svg") no-repeat center 0;
+}
+
+.NO3 {
+  right: 35px;
+  background: url("../images/b-3.svg") no-repeat center 0;
+}
+
+@keyframes jump {
+  0% {
+    top: -20px;
+  }
+  100% {
+    top: -10px;
+  }
+}
+
+.ranking-1-item-name {
+  width: 100%;
+  font-size: 16px;
+  color: #77F8FF;
+  text-align: center;
+  margin: 60px 0 5px 0;
+}
+
+.ranking-1-item-number {
+  width: 100%;
+  font-family: "number";
+  font-size: 18px;
+  color: #81B1C7;
+  text-align: center;
+}
+
+.ranking-2 {
+  width: 100%;
+  height: calc(100% - 48px);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+
+.ranking-2-item {
+  width: 100%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.ranking-number {
+  width: 20px;
+  height: 20px;
+  font-family: "title";
+  font-size: 12px;
+  color: #77F8FF;
+  text-shadow: 0 0 10px #0078FF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url("../images/ranking-number-bg.svg") no-repeat center 0;
+  background-size: 100%;
+}
+
+.ranking-column {
+  height: 10px;
+  background-image: linear-gradient(90deg, rgba(0, 168, 255, 0.00) 0%, #006FFF 100%);
+  margin: 0 5px 0 12px;
+  position: relative;
+  font-size: 12px;
+  text-align: right;
+  line-height: 9px;
+  padding-right: 5px;
+}
+
+.ranking-column:before {
+  content: '';
+  width: 1px;
+  height: 20px;
+  background: #557786;
+  left: 0;
+  top: -5px;
+  position: absolute;
+}
+
+.ranking-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+/******  列表 ******/
+.text-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  animation: imagesLoop 15s linear 1s infinite normal;
+}
+
+.text-list-item {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: solid 1px rgba(119, 248, 255, 0.2);
+}
+
+.list-left {
+  width: calc(100% - 95px);
+  font-size: 14px;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-right {
+  width: 85px;
+  font-size: 12px;
+  color: #81B1C7;
+  font-weight: normal;
+}
+
+@keyframes imagesLoop {
+  0% {
+    transform: translateY(0px);
+  }
+  100% {
+    transform: translateY(-480px);
+  }
+}
+

vue/src/views/dataScreen/html/images/b-1.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="109px" height="156px" viewBox="0 0 109 156" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="76.4022222%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#77F8FF" offset="0%"></stop>
+            <stop stop-color="#006FFF" offset="19.8405091%"></stop>
+            <stop stop-color="#77F8FF" offset="49.7704785%"></stop>
+            <stop stop-color="#012BBD" offset="80.5325462%"></stop>
+            <stop stop-color="#77F8FF" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2" points="4.12059276e-13 10 10 2.84217094e-14 40 2.84217094e-14 45 5 64 5 69 2.84217094e-14 99 2.84217094e-14 109 10 109 140 99 150 74 150 71 147 38 147 35 150 10 150 3.87245791e-13 140"></polygon>
+        <filter x="-13.8%" y="-10.0%" width="127.5%" height="120.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="15" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.407130742   0 0 0 0 1  0 0 0 0.798396184 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#006FFF" stop-opacity="0.303973005" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#006FFF" stop-opacity="0.303973005" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-6" points="44 4.26325641e-14 65 2.13162821e-14 62 3 47 3"></polygon>
+        <filter x="-49.6%" y="-300.0%" width="199.2%" height="700.0%" filterUnits="objectBoundingBox" id="filter-7">
+            <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.469072165   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="31.8352411%" y1="0%" x2="68.1647589%" y2="100%" id="linearGradient-8">
+            <stop stop-color="#77F8FF" stop-opacity="0.155666111" offset="0%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.0528803472" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1616, -170)">
+            <g id="区县服务榜" transform="translate(1440.25, 61)">
+                <g id="编组-28" transform="translate(46.75, 115)">
+                    <g id="1" transform="translate(129, -0)">
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <path stroke="url(#linearGradient-1)" stroke-width="1" d="M39.7928932,0.5 L44.7928932,5.5 L64.2071068,5.5 L69.2071068,0.5 L98.7928932,0.5 L108.5,10.2071068 L108.5,139.792893 L98.7928932,149.5 L74.2071068,149.5 L71.2071068,146.5 L37.7928932,146.5 L34.7928932,149.5 L10.2071068,149.5 L0.5,139.792893 L0.5,10.2071068 L10.2071068,0.5 L39.7928932,0.5 Z" stroke-linejoin="square"></path>
+                        </g>
+                        <polygon id="路径-50" fill="url(#linearGradient-4)" transform="translate(54.5, 34.0571) scale(1, -1) translate(-54.5, -34.0571)" points="0 44.1952381 54.5 10.5 109 44.1952381 109 57.6142857 0 57.6142857"></polygon>
+                        <polygon id="路径-50备份" fill="url(#linearGradient-5)" transform="translate(54.5, 43.9429) scale(1, -1) translate(-54.5, -43.9429)" points="0 44.0809524 54.5 10.3857143 109 44.0809524 109 77.5 0 77.5"></polygon>
+                        <text font-family="YouSheBiaoTiHei" font-size="36" font-weight="normal" fill="#D7E203">
+                            <tspan x="48.052" y="46">1</tspan>
+                        </text>
+                        <polygon id="路径-51" fill="#EEA96C" points="4.25 10 10 4 10 6.5 6.5 10"></polygon>
+                        <polygon id="路径-51备份" fill="#EEA96C" transform="translate(102.125, 7) scale(-1, 1) translate(-102.125, -7)" points="99.25 10 105 4 105 6.5 101.5 10"></polygon>
+                        <g id="路径-51备份-2" transform="translate(54.5, 1.5) scale(-1, 1) translate(-54.5, -1.5)">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                            <use fill="#77F8FF" fill-rule="evenodd" xlink:href="#path-6"></use>
+                        </g>
+                        <polyline id="路径-52" stroke="url(#linearGradient-8)" points="1.75 94.25 5.25 98 5.25 138.75 12.25 146 32 146 34.75 149"></polyline>
+                        <polyline id="路径-52备份" stroke="url(#linearGradient-8)" transform="translate(91.25, 121.625) scale(-1, 1) translate(-91.25, -121.625)" points="74.75 94.25 78.25 98 78.25 138.75 85.25 146 105 146 107.75 149"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/b-2.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="109px" height="150px" viewBox="0 0 109 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1备份</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="76.4022222%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#77F8FF" stop-opacity="0.499296602" offset="0%"></stop>
+            <stop stop-color="#19375E" offset="19.8405091%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.500652713" offset="49.7704785%"></stop>
+            <stop stop-color="#37557B" stop-opacity="0.60138665" offset="80.5325462%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.496879097" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2" points="4.12059276e-13 10 10 2.84217094e-14 40 2.84217094e-14 45 5 64 5 69 2.84217094e-14 99 2.84217094e-14 109 10 109 140 99 150 74 150 71 147 38 147 35 150 10 150 3.87245791e-13 140"></polygon>
+        <filter x="-13.8%" y="-10.0%" width="127.5%" height="120.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="15" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.407130742   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#707882" stop-opacity="0.201002001" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#707882" stop-opacity="0.201002001" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="31.8352411%" y1="0%" x2="68.1647589%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#77F8FF" stop-opacity="0.155666111" offset="0%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.0528803472" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1487, -196)">
+            <g id="区县服务榜" transform="translate(1440.25, 61)">
+                <g id="编组-28" transform="translate(46.75, 115)">
+                    <g id="1备份" transform="translate(0, 20)">
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <path stroke="url(#linearGradient-1)" stroke-width="1" d="M39.7928932,0.5 L44.7928932,5.5 L64.2071068,5.5 L69.2071068,0.5 L98.7928932,0.5 L108.5,10.2071068 L108.5,139.792893 L98.7928932,149.5 L74.2071068,149.5 L71.2071068,146.5 L37.7928932,146.5 L34.7928932,149.5 L10.2071068,149.5 L0.5,139.792893 L0.5,10.2071068 L10.2071068,0.5 L39.7928932,0.5 Z" stroke-linejoin="square"></path>
+                        </g>
+                        <polygon id="路径-50" fill="url(#linearGradient-4)" transform="translate(54.5, 34.0571) scale(1, -1) translate(-54.5, -34.0571)" points="0 44.1952381 54.5 10.5 109 44.1952381 109 57.6142857 0 57.6142857"></polygon>
+                        <polygon id="路径-50备份" fill="url(#linearGradient-5)" transform="translate(54.5, 43.9429) scale(1, -1) translate(-54.5, -43.9429)" points="0 44.0809524 54.5 10.3857143 109 44.0809524 109 77.5 0 77.5"></polygon>
+                        <text id="2" font-family="YouSheBiaoTiHei" font-size="36" font-weight="normal" fill="#77F8FF">
+                            <tspan x="41.842" y="46">2</tspan>
+                        </text>
+                        <polygon id="路径-51" fill="#006FFF" points="4.25 10 10 4 10 6.5 6.5 10"></polygon>
+                        <polygon id="路径-51备份" fill="#006FFF" transform="translate(102.125, 7) scale(-1, 1) translate(-102.125, -7)" points="99.25 10 105 4 105 6.5 101.5 10"></polygon>
+                        <polygon id="路径-51备份-2" fill="#006FFF" transform="translate(54.5, 1.5) scale(-1, 1) translate(-54.5, -1.5)" points="44 4.26325641e-14 65 2.13162821e-14 62 3 47 3"></polygon>
+                        <polyline id="路径-52" stroke="url(#linearGradient-6)" points="1.75 94.25 5.25 98 5.25 138.75 12.25 146 32 146 34.75 149"></polyline>
+                        <polyline id="路径-52备份" stroke="url(#linearGradient-6)" transform="translate(91.25, 121.625) scale(-1, 1) translate(-91.25, -121.625)" points="74.75 94.25 78.25 98 78.25 138.75 85.25 146 105 146 107.75 149"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/b-3.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="109px" height="150px" viewBox="0 0 109 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1备份 2</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="76.4022222%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#77F8FF" stop-opacity="0.499296602" offset="0%"></stop>
+            <stop stop-color="#19375E" offset="19.8405091%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.500652713" offset="49.7704785%"></stop>
+            <stop stop-color="#37557B" stop-opacity="0.60138665" offset="80.5325462%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.496879097" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2" points="4.12059276e-13 10 10 2.84217094e-14 40 2.84217094e-14 45 5 64 5 69 2.84217094e-14 99 2.84217094e-14 109 10 109 140 99 150 74 150 71 147 38 147 35 150 10 150 3.87245791e-13 140"></polygon>
+        <filter x="-13.8%" y="-10.0%" width="127.5%" height="120.0%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="15" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.407130742   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#707882" stop-opacity="0.201002001" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0.27060342%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#707882" stop-opacity="0.201002001" offset="0%"></stop>
+            <stop stop-color="#006FFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="31.8352411%" y1="0%" x2="68.1647589%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#77F8FF" stop-opacity="0.155666111" offset="0%"></stop>
+            <stop stop-color="#77F8FF" stop-opacity="0.0528803472" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1745, -196)">
+            <g id="区县服务榜" transform="translate(1440.25, 61)">
+                <g id="编组-28" transform="translate(46.75, 115)">
+                    <g id="1备份-2" transform="translate(258, 20)">
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <path stroke="url(#linearGradient-1)" stroke-width="1" d="M39.7928932,0.5 L44.7928932,5.5 L64.2071068,5.5 L69.2071068,0.5 L98.7928932,0.5 L108.5,10.2071068 L108.5,139.792893 L98.7928932,149.5 L74.2071068,149.5 L71.2071068,146.5 L37.7928932,146.5 L34.7928932,149.5 L10.2071068,149.5 L0.5,139.792893 L0.5,10.2071068 L10.2071068,0.5 L39.7928932,0.5 Z" stroke-linejoin="square"></path>
+                        </g>
+                        <polygon id="路径-50" fill="url(#linearGradient-4)" transform="translate(54.5, 34.0571) scale(1, -1) translate(-54.5, -34.0571)" points="0 44.1952381 54.5 10.5 109 44.1952381 109 57.6142857 0 57.6142857"></polygon>
+                        <polygon id="路径-50备份" fill="url(#linearGradient-5)" transform="translate(54.5, 43.9429) scale(1, -1) translate(-54.5, -43.9429)" points="0 44.0809524 54.5 10.3857143 109 44.0809524 109 77.5 0 77.5"></polygon>
+                        <text id="3" font-family="YouSheBiaoTiHei" font-size="36" font-weight="normal" fill="#77F8FF">
+                            <tspan x="42.31" y="46">3</tspan>
+                        </text>
+                        <polygon id="路径-51" fill="#006FFF" points="4.25 10 10 4 10 6.5 6.5 10"></polygon>
+                        <polygon id="路径-51备份" fill="#006FFF" transform="translate(102.125, 7) scale(-1, 1) translate(-102.125, -7)" points="99.25 10 105 4 105 6.5 101.5 10"></polygon>
+                        <polygon id="路径-51备份-2" fill="#006FFF" transform="translate(54.5, 1.5) scale(-1, 1) translate(-54.5, -1.5)" points="44 4.26325641e-14 65 2.13162821e-14 62 3 47 3"></polygon>
+                        <polyline id="路径-52" stroke="url(#linearGradient-6)" points="1.75 94.25 5.25 98 5.25 138.75 12.25 146 32 146 34.75 149"></polyline>
+                        <polyline id="路径-52备份" stroke="url(#linearGradient-6)" transform="translate(91.25, 121.625) scale(-1, 1) translate(-91.25, -121.625)" points="74.75 94.25 78.25 98 78.25 138.75 85.25 146 105 146 107.75 149"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/big-title-bg.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="880px" height="39px" viewBox="0 0 880 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>小标题备份 2</title>
+    <defs>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
+            <stop stop-color="#384C79" stop-opacity="0.502344945" offset="0%"></stop>
+            <stop stop-color="#384C79" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-520, -721)">
+            <g id="全市一览" transform="translate(520.25, 721)">
+                <g id="编组" transform="translate(0, 7)">
+                    <g id="编组-34" transform="translate(531, 14)">
+                        <polyline id="路径-13" stroke="#3C4E7D" points="0 17.5 18.5 17.5 31 1.5 37.75 1.5 113 1.5"></polyline>
+                        <g id="编组-8" transform="translate(43, 8.5) scale(-1, -1) translate(-43, -8.5)translate(31, 6)" fill="#00ADFF">
+                            <polygon id="矩形" points="20 0 24 0 20 5 16 5"></polygon>
+                            <polygon id="矩形备份" opacity="0.602528163" points="12 0 16 0 12 5 8 5"></polygon>
+                            <polygon id="矩形备份-2" opacity="0.202220372" points="4 0 8 0 4 5 0 5"></polygon>
+                        </g>
+                        <line x1="116" y1="1.5" x2="135" y2="1.5" id="直线-2备份" stroke="#77F8FF"></line>
+                        <line x1="138" y1="1.5" x2="325.5" y2="1.5" id="直线-2备份-2" stroke="#3C4E7D"></line>
+                        <path d="M-15,17.5 L-13,17.5 M-10,17.5 L-8,17.5 M-5,17.5 L-3,17.5" id="形状结合" stroke="#77F8FF"></path>
+                        <path d="M26,8 C26,8 27.6666667,5.83333333 31,1.5 L60.25,1.5" id="路径" stroke="#77F8FF"></path>
+                        <polygon id="矩形备份-3" fill="#EEA96C" transform="translate(338.5, 1) scale(-1, 1) translate(-338.5, -1)" points="329 1.42108547e-14 346.272727 1.42108547e-14 348 2 330.727273 2"></polygon>
+                    </g>
+                    <g id="编组-34备份" transform="translate(174, 22.75) scale(-1, 1) translate(-174, -22.75)translate(0, 14)">
+                        <polyline id="路径-13" stroke="#3C4E7D" points="0 17.5 18.5 17.5 31 1.5 37.75 1.5 113 1.5"></polyline>
+                        <g id="编组-8" transform="translate(43, 8.5) scale(-1, -1) translate(-43, -8.5)translate(31, 6)" fill="#00ADFF">
+                            <polygon id="矩形" points="20 0 24 0 20 5 16 5"></polygon>
+                            <polygon id="矩形备份" opacity="0.602528163" points="12 0 16 0 12 5 8 5"></polygon>
+                            <polygon id="矩形备份-2" opacity="0.202220372" points="4 0 8 0 4 5 0 5"></polygon>
+                        </g>
+                        <line x1="116" y1="1.5" x2="135" y2="1.5" id="直线-2备份" stroke="#77F8FF"></line>
+                        <line x1="138" y1="1.5" x2="325.5" y2="1.5" id="直线-2备份-2" stroke="#3C4E7D"></line>
+                        <path d="M-15,17.5 L-13,17.5 M-10,17.5 L-8,17.5 M-5,17.5 L-3,17.5" id="形状结合" stroke="#77F8FF"></path>
+                        <path d="M26,8 C26,8 27.6666667,5.83333333 31,1.5 L60.25,1.5" id="路径" stroke="#77F8FF"></path>
+                        <polygon id="矩形备份-3" fill="#EEA96C" transform="translate(338.5, 1) scale(-1, 1) translate(-338.5, -1)" points="329 1.42108547e-14 346.272727 1.42108547e-14 348 2 330.727273 2"></polygon>
+                    </g>
+                    <line x1="380" y1="31.5" x2="498" y2="31.5" id="直线-2" stroke="#3C4E7D"></line>
+                    <polygon id="矩形" fill="url(#linearGradient-1)" points="379.25 14 501 14 513 29 367.25 29"></polygon>
+                    <polygon id="矩形" fill="#EEA96C" transform="translate(371.5, 31) scale(-1, 1) translate(-371.5, -31)" points="366 30 376 30 377 32 367 32"></polygon>
+                    <polygon id="矩形备份-4" fill="#EEA96C" transform="translate(507.5, 31) scale(-1, 1) translate(-507.5, -31)" points="502 30 512 30 513 32 503 32"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/ranking-number-bg.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形</title>
+    <defs>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#022A54" offset="0%"></stop>
+            <stop stop-color="#000000" stop-opacity="0.655818984" offset="49.5773563%"></stop>
+            <stop stop-color="#08355D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#59B1D4" offset="0%"></stop>
+            <stop stop-color="#1F91CD" stop-opacity="0.376674839" offset="58.0653703%"></stop>
+            <stop stop-color="#3AA0D0" stop-opacity="0.331728208" offset="81.6761898%"></stop>
+            <stop stop-color="#59B1D4" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1439, -495)" fill="url(#linearGradient-1)" stroke="url(#linearGradient-2)">
+            <g id="驿站服务榜" transform="translate(1440, 391)">
+                <g id="编组-14" transform="translate(0, 105)">
+                    <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/t-1.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="217px" height="118px" viewBox="0 0 217 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>统计</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-579, -335)">
+            <g id="中间大图" transform="translate(0, 100)">
+                <g id="编组-32" transform="translate(579, 235)">
+                    <polygon id="矩形" fill-opacity="0.801936223" fill="#002FDB" points="3 3 153 3 163 13 163 63 13 63 3 53"></polygon>
+                    <polyline id="路径-43" stroke="#5F86B4" points="2.5 56 12 65.5 163 65.5 209.75 111.5"></polyline>
+                    <circle id="椭圆形" fill="#EEA96C" cx="214.5" cy="115.5" r="2.5"></circle>
+                    <polyline id="路径-44" stroke="#5F86B4" points="0.5 14 0.5 0.5 119 0.5"></polyline>
+                    <line x1="122.5" y1="0.5" x2="139.5" y2="0.5" id="直线-6" stroke="#EEA96C" stroke-linecap="square"></line>
+                    <line x1="0.5" y1="6.5" x2="0.5" y2="13.5" id="直线-5" stroke="#EEA96C" stroke-linecap="square"></line>
+                    <polygon id="路径-45" fill="#EEA96C" points="3 60 3 66 9 66"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/t-2.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="217px" height="118px" viewBox="0 0 217 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>统计备份 3</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1094, -266)">
+            <g id="中间大图" transform="translate(0, 100)">
+                <g id="统计备份-3" transform="translate(1094, 166)">
+                    <g id="编组-32" transform="translate(108.5, 59) scale(-1, 1) translate(-108.5, -59)">
+                        <polygon id="矩形" fill-opacity="0.801936223" fill="#002FDB" points="3 3 153 3 163 13 163 63 13 63 3 53"></polygon>
+                        <polyline id="路径-43" stroke="#5F86B4" points="2.5 56 12 65.5 163 65.5 209.75 111.5"></polyline>
+                        <circle id="椭圆形" fill="#EEA96C" cx="214.5" cy="115.5" r="2.5"></circle>
+                        <polyline id="路径-44" stroke="#5F86B4" points="0.5 14 0.5 0.5 119 0.5"></polyline>
+                        <line x1="122.5" y1="0.5" x2="139.5" y2="0.5" id="直线-6" stroke="#EEA96C" stroke-linecap="square"></line>
+                        <line x1="0.5" y1="6.5" x2="0.5" y2="13.5" id="直线-5" stroke="#EEA96C" stroke-linecap="square"></line>
+                        <polygon id="路径-45" fill="#EEA96C" points="3 60 3 66 9 66"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/images/t-3.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="237px" height="138px" viewBox="0 0 237 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>统计备份 4</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="惠州市就业驿站大数据" transform="translate(-1109, -444)">
+            <g id="中间大图" transform="translate(0, 100)">
+                <g id="统计备份-4" transform="translate(1109, 344)">
+                    <g id="编组-32" transform="translate(118.5, 69) scale(-1, -1) translate(-118.5, -69)">
+                        <polygon id="矩形" fill-opacity="0.801936223" fill="#002FDB" points="3 3 153 3 163 13 163 63 13 63 3 53"></polygon>
+                        <polyline id="路径-43" stroke="#5F86B4" points="2.5 56 12 65.5 163 65.5 229.75 131.5"></polyline>
+                        <circle id="椭圆形" fill="#EEA96C" cx="234.5" cy="135.5" r="2.5"></circle>
+                        <polyline id="路径-44" stroke="#5F86B4" points="0.5 13.5 0.5 0.5 119 0.5"></polyline>
+                        <line x1="122.5" y1="0.5" x2="139.5" y2="0.5" id="直线-6" stroke="#EEA96C" stroke-linecap="square"></line>
+                        <line x1="0.5" y1="6.5" x2="0.5" y2="13.5" id="直线-5" stroke="#EEA96C" stroke-linecap="square"></line>
+                        <polygon id="路径-45" fill="#EEA96C" points="3 60 3 66 9 66"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

vue/src/views/dataScreen/html/index.vue

@@ -0,0 +1,534 @@
+<template>
+  <div style="height:100vh; min-height:1080px;">
+    <!-- 头部 -->
+    <div class="header">
+      <h1 style="color: #77F8FF;">惠州市就业驿站大数据</h1>
+      <div class="time">2024-07-17 星期三 17:24</div>
+    </div>
+
+    <!-- 内容区 -->
+    <div class="body-content">
+      <!-- 左 -->
+      <div class="side" style="padding-left: 20px;">
+        <div class="content-box">
+          <div class="box-title">驿站运行情况</div>
+          <div class="chart-box" id="yearSystemApplyBox"></div>
+        </div>
+        <div class="content-box">
+          <div class="box-title">就业情况</div>
+          <div class="chart-box" id="employedCountBox"></div>
+        </div>
+        <div class="content-box">
+          <div class="box-title">区县就业困难人员</div>
+          <div class="chart-box" id="ordinaryDifficultyCountBox"></div>
+        </div>
+      </div>
+
+      <!-- 中 -->
+      <div class="center">
+        <div class="center-1">
+          <div class="nav">
+            <div class="nav-items nav-active">
+              <div class="nav-1"></div>
+              <h2 style="color: #77F8FF;">总体概况</h2></div>
+            <div class="nav-items">
+              <div class="nav-2"></div>
+              <h2 style="color: #77F8FF;">企业情况</h2></div>
+            <div class="nav-items">
+              <div class="nav-3"></div>
+              <h2 style="color: #77F8FF;">求职情况</h2></div>
+            <div class="nav-items">
+              <div class="nav-4"></div>
+              <h2 style="color: #77F8FF;">服务情况</h2></div>
+          </div>
+          <div class="s-box">
+            <div class="statistics t-1">
+              <div style="margin: 8px 0 0 18px; position: revert;">
+                <div class="s-title">岗位数</div>
+                <div class="s-number">{{ allSystemDataCountList.count.postCount }}</div>
+                <div class="waves" style="right: -187px; top: 42px"></div>
+              </div>
+            </div>
+            <div class="statistics t-2">
+              <div style="margin: 8px 0 0 78px; position: revert;">
+                <div class="s-title">企业数</div>
+                <div class="s-number">{{ allSystemDataCountList.count.companyCount }}</div>
+                <div class="waves" style="left: -86px; top: 42px"></div>
+              </div>
+            </div>
+            <div class="statistics t-3">
+              <div style="margin: 78px 0 0 98px; position: revert;">
+                <div class="s-title">求职人员数</div>
+                <div class="s-number">{{ allSystemDataCountList.count.jobUserCount }}</div>
+                <div class="waves" style="left: -106px; top: -141px"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="center-2">
+          <div class="box-bigtitle">全市情况一览</div>
+          <div class="chart-box" id="allSystemDatBox"></div>
+        </div>
+      </div>
+
+      <!-- 右 -->
+      <div class="side" style="padding-right: 20px;">
+        <div class="content-box">
+          <div class="box-title">区县服务榜</div>
+          <div class="chart-box">
+            <div class="tab-content" style="margin-bottom: 40px;">
+              <div class="tab-item" :class="{'tab-active': regionTabAct == 'all'}" @click="changeRegionTab('all')">
+                总榜
+              </div>
+              <div class="tab-item" :class="{'tab-active': regionTabAct == 'month'}" @click="changeRegionTab('month')">
+                月榜
+              </div>
+              <div class="tab-item" :class="{'tab-active': regionTabAct == 'week'}" @click="changeRegionTab('week')">
+                周榜
+              </div>
+            </div>
+            <div class="ranking-1">
+              <div class="ranking-1-item NO2">
+                <div class="ranking-1-item-name">{{ regionServiceData.second.regionName }}</div>
+                <div class="ranking-1-item-number">{{ regionServiceData.second.count }}</div>
+              </div>
+              <div class="ranking-1-item NO1">
+                <div class="ranking-1-item-name">{{ regionServiceData.first.regionName }}</div>
+                <div class="ranking-1-item-number">{{ regionServiceData.first.count }}</div>
+              </div>
+              <div class="ranking-1-item NO3">
+                <div class="ranking-1-item-name">{{ regionServiceData.third.regionName }}</div>
+                <div class="ranking-1-item-number">{{ regionServiceData.third.count }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-box">
+          <div class="box-title">驿站服务榜</div>
+          <div class="chart-box">
+            <div class="tab-content">
+              <div class="tab-item" :class="{'tab-active': siteTabAct == 'all'}" @click="changeSiteTab('all')">总榜
+              </div>
+              <div class="tab-item" :class="{'tab-active': siteTabAct == 'month'}" @click="changeSiteTab('month')">月榜
+              </div>
+              <div class="tab-item" :class="{'tab-active': siteTabAct == 'week'}" @click="changeSiteTab('week')">周榜
+              </div>
+            </div>
+            <div class="ranking-2">
+              <div class="ranking-2-item">
+                <div class="ranking-number">1</div>
+                <div class="ranking-column" style="width:60%;">
+                  {{ siteServiceData[0] ? siteServiceData[0].count : '' }}
+                </div>
+                <div class="ranking-name">{{ siteServiceData[0] ? siteServiceData[0].siteName : '' }}</div>
+              </div>
+              <div class="ranking-2-item">
+                <div class="ranking-number">2</div>
+                <div class="ranking-column" style="width:50%;">
+                  {{ siteServiceData[1] ? siteServiceData[1].count : '' }}
+                </div>
+                <div class="ranking-name">{{ siteServiceData[1] ? siteServiceData[1].siteName : '' }}</div>
+              </div>
+              <div class="ranking-2-item">
+                <div class="ranking-number">3</div>
+                <div class="ranking-column" style="width:40%;">
+                  {{ siteServiceData[2] ? siteServiceData[2].count : '' }}
+                </div>
+                <div class="ranking-name">{{ siteServiceData[2] ? siteServiceData[2].siteName : '' }}</div>
+              </div>
+              <div class="ranking-2-item">
+                <div class="ranking-number">4</div>
+                <div class="ranking-column" style="width:30%;">
+                  {{ siteServiceData[3] ? siteServiceData[3].count : '' }}
+                </div>
+                <div class="ranking-name">{{ siteServiceData[3] ? siteServiceData[3].siteName : '' }}</div>
+              </div>
+              <div class="ranking-2-item">
+                <div class="ranking-number">5</div>
+                <div class="ranking-column" style="width:20%;">
+                  {{ siteServiceData[4] ? siteServiceData[4].count : '' }}
+                </div>
+                <div class="ranking-name">{{ siteServiceData[4] ? siteServiceData[4].siteName : '' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-box">
+          <div class="box-title">驿站实时服务</div>
+          <div class="chart-box">
+            <div class="text-list">
+              <div class="text-list-item" v-for="(item, key) in systemServiceList" :key="key">
+                <div class="list-left">{{ item.serviceContent }}</div>
+                <div class="list-right">{{ dayjs(item.serviceTime).format("MM-DD HH:mm:ss") }}</div>
+              </div>
+            </div>
+            <div class="text-list">
+              <div class="text-list-item" v-for="(item, key) in systemServiceList" :key="key">
+                <div class="list-left">{{ item.serviceContent }}</div>
+                <div class="list-right">{{ dayjs(item.serviceTime).format("MM-DD HH:mm:ss") }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getEmployedJobUserCount,
+  getJobUserByRegionAndDifficulty,
+  getSystemApplyCountBySite,
+  getYearSystemDataCount
+} from "@/api/statistics";
+import {onMounted, reactive, ref} from "vue";
+import {initDataSetBarImageTable, initLineImageTable, initPieImageTable} from "@/views/dataScreen/echarts";
+import dayjs from "dayjs";
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import weekday from 'dayjs/plugin/weekday';
+import {getSystemServiceList} from "@/api/jobUserManager/jobuser/jobUserService";
+
+dayjs.extend(weekOfYear);
+dayjs.extend(weekday);
+
+// 查询参数
+const searchParams = reactive({
+  monthStartDate: "",
+  monthEndDate: "",
+  weekStartDate: "",
+  weekEndDate: "",
+})
+// 系统年度使用情况
+const yearSystemDataCountList = ref([]);
+// 全市数据情况
+const allSystemDataCountList = ref({
+  count: {},
+  list: []
+});
+// 普通求职者与就业困难人员
+const ordinaryDifficultyUser = ref([]);
+// 已就业人数
+const employedData = ref({
+  count: 0,
+  list: []
+})
+// 区县榜当前显示tab
+const regionTabAct = ref("all");
+// 区县服务榜数据
+const regionServiceData = reactive({
+  first: {
+    regionName: "",
+    count: 0,
+  },
+  second: {
+    regionName: "",
+    count: 0,
+  },
+  third: {
+    regionName: "",
+    count: 0,
+  }
+});
+// 驿站榜当前显示tab
+const siteTabAct = ref("all");
+// 驿站服务榜数据
+const siteServiceData = ref<Array<any>>([]);
+// 系统服务记录信息
+const systemServiceList = ref<Array<any>>([]);
+
+// 获取年度使用数据
+function loadYearData() {
+  const currentYear = new Date().getFullYear();
+  getYearSystemDataCount({year: currentYear}).then((result: any) => {
+    yearSystemDataCountList.value = result;
+    let regionNameList = new Array<any>();
+    let yearNameList = new Array<any>();
+
+    // 获取到区县名称信息
+    if (yearSystemDataCountList.value && Object.keys(yearSystemDataCountList.value).length > 0) {
+      // 获取到查询结果Map中的第一个键值对，解析获取到县区信息，填充进初始数组中
+      yearSystemDataCountList.value[Object.keys(yearSystemDataCountList.value)[0]].forEach((item: any) => {
+        if (item.regionCode != 100) {
+          regionNameList.push(item.regionName);
+        }
+      });
+    }
+    // 初始化折线图数据
+    let yearLineData = [
+      {
+        name: '驿站人员',
+        type: 'line',
+        data: new Array<any>(),
+        symbol: 'circle',
+        itemStyle: {
+          color: '#f6b400'
+        }
+      },
+      {
+        name: '企业数量',
+        type: 'line',
+        data: new Array<any>(),
+        symbol: 'circle',
+        itemStyle: {
+          color: "#006efe"
+        }
+      },
+      {
+        name: '岗位数量',
+        type: 'line',
+        data: new Array<any>(),
+        symbol: 'circle',
+        itemStyle: {
+          color: "#6cd300"
+        }
+      },
+      {
+        name: '求职人数',
+        type: 'line',
+        data: new Array<any>(),
+        symbol: 'circle',
+        itemStyle: {
+          color: "#76f7fe"
+        }
+      },
+    ]
+
+    // 解析1到12月的统计数据
+    for (let i = 1; i <= 12; i++) {
+      if (yearSystemDataCountList.value[i + '月']) {
+        yearNameList.push(i + '月');
+
+        // 查询获取到每周的合计总数，填充进折线图数据中
+        const hjData = yearSystemDataCountList.value[i + '月'].find(item => item.regionCode == '100');
+        if (hjData) {
+          yearLineData[0].data.push(hjData.siteUserCount);
+          yearLineData[1].data.push(hjData.companyCount);
+          yearLineData[2].data.push(hjData.postCount);
+          yearLineData[3].data.push(hjData.jobUserCount);
+        }
+      }
+    }
+
+    // 初始化图表
+    initLineImageTable(yearNameList, yearLineData, ["驿站人员", "企业数量", "岗位数量", "求职人数"], "yearSystemApplyBox");
+  })
+}
+
+// 获取已就业人数
+function loadEmployedUser() {
+  getEmployedJobUserCount().then((result: any) => {
+    employedData.value.list = result;
+
+    // 各区县的颜色
+    const colorData = {
+      "惠城区": "#716c85",
+      "惠阳区": "#c8ceda",
+      "博罗县": "#006efe",
+      "惠东县": "#9192ac",
+      "龙门县": "#76f7fe",
+      "大亚湾区": "#6cd300",
+      "仲恺区": "#f6b400",
+    }
+
+    let arr = new Array<any>();
+    result.forEach((item: any) => {
+      if (item.regionName != "市本级") {
+        employedData.value.count += item.jobUserCount;
+        let data = {
+          value: item.jobUserCount,
+          name: item.regionName,
+          itemStyle: {
+            color: colorData[item.regionName]
+          }
+        };
+        arr.push(data);
+      }
+    })
+
+    // 设置中间的文本
+    const graphicChildren = [
+      {
+        type: 'text',
+        left: 'center',
+        top: '43%',
+        style: {
+          fill: 'rgba(119,248,255,0.7)',
+          text: '已就业人数',
+          font: 'bold 12px Arial',
+          textAlign: 'center'
+        }
+      },
+      {
+        type: 'text',
+        left: 'center',
+        top: '53%',
+        style: {
+          fill: '#77F8FF',
+          text: employedData.value.count,
+          font: 'bold 16px Arial',
+          textAlign: 'center'
+        }
+      }
+    ]
+
+    // 生成图表
+    initPieImageTable(arr, graphicChildren, "employedCountBox");
+  })
+}
+
+// 获取区县普通求职人员与就业困难人员
+function loadDifficultyUser() {
+  getJobUserByRegionAndDifficulty("", "").then((result: any) => {
+    // 保存原始数据
+    ordinaryDifficultyUser.value = result;
+
+    let arr: any[] = [];
+    arr.push(['类型', '失业人数', '就业困难人数'])
+    result.forEach((item: any) => {
+      if (item.regionName != "市本级") {
+        arr.push([item.regionName, item.jobUserCount, item.difficultyCount]);
+      }
+    })
+
+    initDataSetBarImageTable(arr, [{type: 'bar', barMaxWidth: '15px', color: "#0062cc"}, {
+      type: 'bar',
+      barMaxWidth: '15px',
+      color: '#73ecf3'
+    }], 'ordinaryDifficultyCountBox')
+  })
+}
+
+// 获取年度使用数据
+function loadAllData() {
+  getYearSystemDataCount({}).then((result: any) => {
+    allSystemDataCountList.value.list = result['汇总'];
+    allSystemDataCountList.value.count = result['汇总'].filter(item => item.regionCode == '100')[0];
+
+    let arr = new Array<any>();
+    arr.push(['类型', '企业数', '岗位数', "求职人员数"]);
+    result['汇总'].forEach((item: any) => {
+      if (item.regionName != '合计' && item.regionName != '市本级') {
+        arr.push([item.regionName, item.companyCount, item.postCount, item.jobUserCount]);
+      }
+    })
+
+    initDataSetBarImageTable(arr,
+      [
+        {type: 'bar', barMaxWidth: '15px', color: "#0062cc"},
+        {type: 'bar', barMaxWidth: '15px', color: '#73ecf3'},
+        {type: 'bar', barMaxWidth: '15px', color: '#67ca00'},
+      ], 'allSystemDatBox')
+  })
+}
+
+// 查询区县服务榜
+function loadRegionTop(params: any) {
+  getYearSystemDataCount(params).then((result: any) => {
+    let countMap: { [key: string]: number } = {}
+    result['汇总'].forEach((item: any) => {
+      if (item.regionName != '市本级' && item.regionName != '合计') {
+        countMap[item.regionName] = item.companyCount + item.postCount + item.jobUserCount;
+      }
+    })
+    // 按相加结果的大小进行排序，分别获取前三名
+    const topThreeRegions = Object.entries(countMap)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3);
+
+    // 保存到regionServiceData变量中
+    if (topThreeRegions.length > 0) {
+      regionServiceData.first.regionName = topThreeRegions[0][0];
+      regionServiceData.first.count = topThreeRegions[0][1];
+    }
+    if (topThreeRegions.length > 1) {
+      regionServiceData.second.regionName = topThreeRegions[1][0];
+      regionServiceData.second.count = topThreeRegions[1][1];
+    }
+    if (topThreeRegions.length > 2) {
+      regionServiceData.third.regionName = topThreeRegions[2][0];
+      regionServiceData.third.count = topThreeRegions[2][1];
+    }
+  })
+}
+
+// 改变区县服务榜展示的tab
+function changeRegionTab(value: any) {
+  regionTabAct.value = value;
+  if (value == 'all') {
+    // 查询总榜
+    loadRegionTop({});
+  }
+  if (value == 'month') {
+    // 查询月榜
+    loadRegionTop({startDate: searchParams.monthStartDate, endDate: searchParams.monthEndDate});
+  }
+  if (value == 'week') {
+    // 查询周榜
+    loadRegionTop({startDate: searchParams.weekStartDate, endDate: searchParams.weekEndDate});
+  }
+}
+
+// 查询驿站服务榜
+function loadSiteTop(params: any) {
+  getSystemApplyCountBySite(params).then((result: any) => {
+    let countMap: { [key: string]: number } = {}
+    result.forEach((item: any) => {
+      if (item.regionName != '市本级' && item.siteName != '惠州市就业驿站') {
+        countMap[item.siteName] = item.companyCount + item.postCount + item.jobUserCount;
+      }
+    })
+    siteServiceData.value = Object.entries(countMap)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(entry => ({siteName: entry[0], count: entry[1]}));
+  })
+}
+
+// 改变驿站服务榜展示的tab
+function changeSiteTab(value: any) {
+  siteTabAct.value = value;
+  if (value == 'all') {
+    loadSiteTop({});
+  }
+  if (value == 'month') {
+    // 查询月榜
+    loadSiteTop({startDate: searchParams.monthStartDate, endDate: searchParams.monthEndDate});
+  }
+  if (value == "week") {
+    // 查询周榜
+    loadSiteTop({startDate: searchParams.weekStartDate, endDate: searchParams.weekEndDate})
+  }
+}
+
+// 加载服务记录
+function loadSystemService() {
+  getSystemServiceList().then((result) => {
+    systemServiceList.value = result;
+  })
+}
+
+onMounted(() => {
+  const now = dayjs();
+  searchParams.monthStartDate = now.startOf('month').format('YYYY-MM-DD');
+  searchParams.monthEndDate = now.endOf('month').format('YYYY-MM-DD');
+  searchParams.weekStartDate = now.startOf('week').weekday(1).format('YYYY-MM-DD');
+  searchParams.weekEndDate = now.endOf('week').weekday(7).format('YYYY-MM-DD');
+
+  loadYearData();
+  loadDifficultyUser();
+  loadEmployedUser();
+  loadAllData();
+  setInterval(loadAllData, 1000 * 60 * 5)
+  changeRegionTab("all");
+  changeSiteTab("all");
+  loadSystemService();
+  setInterval(loadSystemService, 1000 * 60 * 5);
+})
+
+</script>
+
+<style scoped>
+@import url('@/views/dataScreen/html/css/reset.css');
+@import url('@/views/dataScreen/html/css/style.css');
+</style>

vue/src/views/statistics/JobUserCount.vue

@@ -79,7 +79,6 @@ import {
   getJobUserCountByPersonType
 } from "@/api/statistics";
 import {initDataSetBarImageTable, initStackBarImageTable} from "@/utils/echartsUtil";
-import dayjs from "dayjs";
 
 // 查询条件
 const searchParams = reactive({