diff --git a/src/assets/sentimeent/举报流程(底)1X.png b/src/assets/sentimeent/举报流程(底)1X.png new file mode 100644 index 0000000..4c46ff3 Binary files /dev/null and b/src/assets/sentimeent/举报流程(底)1X.png differ diff --git a/src/assets/sentimeent/举报流程(环形中间).png b/src/assets/sentimeent/举报流程(环形中间).png new file mode 100644 index 0000000..cff19f7 Binary files /dev/null and b/src/assets/sentimeent/举报流程(环形中间).png differ diff --git a/src/assets/sentimeent/举报流程底1x.png b/src/assets/sentimeent/举报流程底1x.png new file mode 100644 index 0000000..71eae3a Binary files /dev/null and b/src/assets/sentimeent/举报流程底1x.png differ diff --git a/src/assets/sentimeent/举报流程环形图.png b/src/assets/sentimeent/举报流程环形图.png new file mode 100644 index 0000000..cea2166 Binary files /dev/null and b/src/assets/sentimeent/举报流程环形图.png differ diff --git a/src/assets/sentimeent/反馈举报人.png b/src/assets/sentimeent/反馈举报人.png new file mode 100644 index 0000000..41301be Binary files /dev/null and b/src/assets/sentimeent/反馈举报人.png differ diff --git a/src/assets/sentimeent/汇总结果.png b/src/assets/sentimeent/汇总结果.png new file mode 100644 index 0000000..3a8ee93 Binary files /dev/null and b/src/assets/sentimeent/汇总结果.png differ diff --git a/src/views/privateOrder/ecosphere/components/componentRight.vue b/src/views/privateOrder/ecosphere/components/componentRight.vue index 8bc083a..0784644 100644 --- a/src/views/privateOrder/ecosphere/components/componentRight.vue +++ b/src/views/privateOrder/ecosphere/components/componentRight.vue @@ -10,42 +10,67 @@
+ 举报流程
- 举报流程
-
- +
+ 网络举报事件
-
- +
+ 举报中心
-
- +
+ 研判分析
-
- +
+ 事件办理处置
-
- +
+ 汇总结果
-
- +
+ 反馈举报人
-
+ +
举报事件年度分类统计
+
+
+ + 上级下发 + 200% +
+
+ + 部门转发 + 20% +
+
+ + 小程序 + 10% +
+
+ + 无效 + 1% +
+
清朗专项行动数据统计 @@ -137,21 +162,23 @@
标题
来源
-
-
{{ item.time }}
- {{ item.highlightTag }} + {{ + item.highlightTag + }} {{ item.title }}
{{ item.source }}
@@ -227,16 +254,67 @@ export default { { url: require("@/assets/ecosphere/清朗专项行动图/1-4.png") }, ], cleanActionData: [ - { time: '2024-12-28', title: '"清朗行动" 持续发力', source: '即时动态', highlight: false }, - { time: '2024-12-26', title: '净化人力资源市场环境，商......', source: '头条', highlight: false }, - { time: '2024-12-23', title: '高贸区开展打击人力资源市......', source: '即时动态', highlight: false }, - { time: '2024-11-20', title: '科教区开展打击人力资源市......', source: '头条', highlight: false }, - { time: '2024-10-15', title: '持续净化人力资源市场秩序......', source: '即时动态', highlight: true, highlightTag: '43.58%' }, - { time: '2024-10-08', title: '保持高压态势 确保 "清朗" ......', source: '头条', highlight: false }, - { time: '2024-09-11', title: '高贸区劳动监察大队走访园区......', source: '头条', highlight: false }, - { time: '2024-08-25', title: '净化人力资源市场环境，商......', source: '工作动态', highlight: false }, - { time: '2024-08-04', title: '高贸区开展打击人力资源市......', source: '头条', highlight: false }, - { time: '2024-07-28', title: '保持高压态势 确保 "清朗" ......', source: '即时动态', highlight: false } + { + time: "2024-12-28", + title: '"清朗行动" 持续发力', + source: "即时动态", + highlight: false, + }, + { + time: "2024-12-26", + title: "净化人力资源市场环境，商......", + source: "头条", + highlight: false, + }, + { + time: "2024-12-23", + title: "高贸区开展打击人力资源市......", + source: "即时动态", + highlight: false, + }, + { + time: "2024-11-20", + title: "科教区开展打击人力资源市......", + source: "头条", + highlight: false, + }, + { + time: "2024-10-15", + title: "持续净化人力资源市场秩序......", + source: "即时动态", + highlight: true, + highlightTag: "43.58%", + }, + { + time: "2024-10-08", + title: '保持高压态势 确保 "清朗" ......', + source: "头条", + highlight: false, + }, + { + time: "2024-09-11", + title: "高贸区劳动监察大队走访园区......", + source: "头条", + highlight: false, + }, + { + time: "2024-08-25", + title: "净化人力资源市场环境，商......", + source: "工作动态", + highlight: false, + }, + { + time: "2024-08-04", + title: "高贸区开展打击人力资源市......", + source: "头条", + highlight: false, + }, + { + time: "2024-07-28", + title: '保持高压态势 确保 "清朗" ......', + source: "即时动态", + highlight: false, + }, ], cleanActionScrollOption: { step: 0.4, // 数值越大速度滚动越快 @@ -252,10 +330,10 @@ export default { number: 0, reportingTimer: null, pieData: [ - { value: 25, name: "上级下发" }, - { value: 4, name: "部门转办" }, - { value: 8, name: "小程序" }, - { value: 4, name: "无效" }, + { value: 200, name: "上级下发" }, + { value: 20, name: "部门转发" }, + { value: 10, name: "小程序" }, + { value: 1, name: "无效" }, ], qlzfDataStatistics: [ { @@ -618,67 +696,11 @@ export default { const optionSecond = { tooltip: { trigger: "item", - formatter: "{a}
{b} : {c} ({d}%)", - }, - emphasis: { - show: true, - formatter: "{fz41|{a}\n{az24|{b}个}", - textStyle: { - rich: { - fz41: { - fontSize: 41, - padding: [0, 5, 0, 0], - }, - fz24: { - fontSize: 24, - }, - }, - }, + formatter: "{a}
{b} : {c}%", }, - color: ["#6bd3ff", "#2590fd", "#f6ff00", "#ffd616"], + color: ["#37a4ff", "#00ffde", "#ff7e2b", "#f6ff00"], legend: { - orient: "vertical", - icon: "circle", - left: "55%", - top: "10%", - itemGap: 50, - padding: 5, - formatter: (name) => { - const data = this.pieData; - let target; - data.forEach((v) => { - if (v.name === name) { - target = v.value + "件"; - } - }); - const arr = [ - `{a|${name}}{b|${String(target).replace( - /(\d)(?=(\d{3})+$)/g, - "$1," - )}}`, - ]; - return arr.join("\n"); - }, - textStyle: { - rich: { - a: { - width: 180, - fontSize: 28, - // fontWeight: 'bold', - color: "#ffffff", - }, - b: { - fontSize: 28, - color: "rgba(251,232,79)", - backgroundColor: { - image: image, - }, - align: "center", - }, - }, - fontSize: 18, - color: "rgba(255, 255, 255, .5)", - }, + show: false }, series: [ { @@ -688,40 +710,89 @@ export default { avoidLabelOverlap: false, center: ["24%", "48%"], label: { - show: false, - position: "center", - formatter: (params) => { - return `{a| ${params.name}} \n {b|${params.value}}`; - }, - rich: { - a: { - fontFamily: "SourceHanSansCN-Regular", - color: "#ffffff", - fontSize: 28, - }, - b: { - fontFamily: "DIN-Medium", - color: "#6ddefb", - fontSize: 32, - lineHeight: 50, - }, - }, + show: false }, emphasis: { label: { - show: true, - fontSize: "25", - fontWeight: "bold", - }, + show: false + } }, labelLine: { - show: false, + show: false }, - data: this.pieData, + data: this.pieData.map((item) => { + if (item.name === "无效") { + return { + ...item, + label: { + show: true, + position: 'outside', + formatter: '4件\n无效', + fontSize: 16, + color: '#f6ff00', + distance: 5 + }, + labelLine: { + show: true, + length: 30, + length2: 40, + lineStyle: { + color: '#f6ff00', + width: 1 + } + } + } + } + return item; + }), }, + { + type: 'pie', + radius: ['0', '35%'], + center: ["24%", "48%"], + silent: true, + label: { + show: false + }, + labelLine: { + show: false + }, + z: 1, + data: [{ + value: 100, + itemStyle: { + color: 'rgba(0, 15, 58, 0.8)', + borderWidth: 2, + borderColor: '#072761' + } + }] + } ], }; + // Add warning icon in the center + const warningIcon = { + type: 'group', + left: '24%', + top: '48%', + z: 100, + children: [{ + type: 'image', + z: 100, + style: { + image: require('@/assets/sentimeent/warning.png'), + width: 24, + height: 24, + x: -12, + y: -12 + } + }] + }; + + optionSecond.graphic = [warningIcon]; myChart.setOption(optionSecond, true); + + // Remove click event handler - we don't need it + echartsJump(myChart, optionSecond); }, // 定时器旋转+字体颜色变 @@ -782,62 +853,63 @@ export default { .section { width: 720px; height: 487px; + height: 487px; .clean-action-table { margin-top: 20px; height: 400px; - + .table-header { display: flex; - background-color: #1A3B6E; - + background-color: #1a3b6e; + .header-cell { padding: 12px 15px; color: #ffffff; font-size: 18px; font-weight: normal; text-align: center; - + &:first-child { width: 120px; } - + &:nth-child(2) { flex: 1; } - + &:last-child { width: 100px; } } } - + .scroll-container { height: 360px; overflow: hidden; } - + .table-body { width: 100%; - + .table-row { display: flex; background-color: rgba(18, 40, 69, 0.5); border-bottom: 1px solid #193859; - + &:hover { background-color: rgba(33, 150, 243, 0.1) !important; } - + &:nth-child(odd) { background-color: rgba(18, 40, 69, 0.7); } - + &.highlight-row { position: relative; - + .title-cell { position: relative; - + .highlight-tag { position: absolute; top: 50%; @@ -852,29 +924,29 @@ export default { } } } - + .cell { padding: 12px 15px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - + &.time-cell { width: 120px; - color: #9BB8D5; + color: #9bb8d5; text-align: center; } - + &.title-cell { flex: 1; color: #ffffff; padding-right: 40px; } - + &.source-cell { width: 100px; - color: #9BB8D5; + color: #9bb8d5; text-align: center; } } @@ -883,15 +955,14 @@ export default { } } .section-reportingProcess { - width: 720px; - height: 500px; + width: 50%; + height: 50%; .processflow { + // padding-top: 20px; position: relative; - top: 26px; - left: 70px; - width: auto; - height: 500px; - background: url("~@/assets/ecosphere/环形图-bg.png") no-repeat 26px -8px; + height: 100%; + background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat center ,url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center; + background-size: 430px 410px,215px 210px; .processTitle { width: 90px; position: absolute; @@ -917,6 +988,8 @@ export default { position: absolute; img { display: block; + width: 79px; + height: 77px; } span { font-family: SourceHanSansCN-Regular; @@ -992,6 +1065,15 @@ export default { transform-origin: center; } } + .processCenter { + position: absolute; + top: 30%; + left: 39%; + width: 180px; + height: 180px; + background: url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center; + background-size: 100% 100%; + } } } #pie { @@ -999,7 +1081,8 @@ export default { top: 43px; left: 5px; width: 100%; - height: 344px; + height: 310px; + margin-top: 30px; background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat; } .qlzfsjtj { @@ -1263,4 +1346,34 @@ export default { transform: translateX(0px); } } +.chart-labels { + display: flex; + justify-content: space-around; + margin-top: 70px; + padding: 0 30px; + + .label-item { + display: flex; + align-items: center; + + .dot { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + margin-right: 8px; + } + + .label-text { + font-size: 16px; + color: #ffffff; + margin-right: 8px; + } + + .label-value { + font-size: 16px; + color: #f6ff00; + } + } +} diff --git a/src/views/privateOrder/ecosphere/index.vue b/src/views/privateOrder/ecosphere/index.vue index b74a2ea..39006aa 100644 --- a/src/views/privateOrder/ecosphere/index.vue +++ b/src/views/privateOrder/ecosphere/index.vue @@ -110,6 +110,7 @@ export default { top: 0; width: 1603px; height: $ScreenHeight; + margin-right: 65px // background: url("~@/assets/privateOrder/common/bg-right.png") right center // no-repeat; }