From d35366980dab5b4f1990de495796a8669aea89fe Mon Sep 17 00:00:00 2001
From: changtong <2540919286@qq.com>
Date: Tue, 18 Feb 2025 10:16:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=85=AC=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                            |    8 +-
 src/router/router.js                       |   11 +-
 src/views/screen/public-service-scggfw.vue | 1765 ++++++++++++++++++++
 src/views/screen/public-service.vue        |   20 +-
 src/views/screen/test.vue                  |   45 +
 5 files changed, 1840 insertions(+), 9 deletions(-)
 create mode 100644 src/views/screen/public-service-scggfw.vue
 create mode 100644 src/views/screen/test.vue

diff --git a/config/index.js b/config/index.js
index 065082d..b1bf80d 100644
--- a/config/index.js
+++ b/config/index.js
@@ -12,16 +12,16 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
-                // target: 'http://192.168.111.200:9990',
-                target: 'http://60.255.186.185:9024/api',
+                target: 'http://localhost:9990',
+                // target: 'http://60.255.186.185:9024/api',
                 changeOrigin: true,
                 pathRewrite: {
                     '^/api': ''
                 }
             },
             '/localImage': {
-                target: 'http://60.255.186.185:9024/',
-                // target: 'http://localhost:9990/',
+                // target: 'http://60.255.186.185:9024/',
+                target: 'http://localhost:9990/',
                 changeOrigin: true,
             },
             '/socket.io': {
diff --git a/src/router/router.js b/src/router/router.js
index 4cd3655..5905445 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -83,7 +83,7 @@ export const screenRouter = [
         path: "/publicService",
         name: "publicService",
         title: "广电公服",
-        component: () => import("@/views/screen/public-service.vue")
+        component: () => import("@/views/screen/public-service-scggfw.vue")
     },
     {
         path: "/duty-system",
@@ -270,6 +270,15 @@ export const screenRouter = [
             open: true
         },
         component: () => import("@/views/screen/smart-travel.vue")
+    },
+    {
+        path: "/test",
+        name: "test",
+        title: "test",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/test.vue")
     }
 ];
 
diff --git a/src/views/screen/public-service-scggfw.vue b/src/views/screen/public-service-scggfw.vue
new file mode 100644
index 0000000..9286d3f
--- /dev/null
+++ b/src/views/screen/public-service-scggfw.vue
@@ -0,0 +1,1765 @@
+<template>
+    <div class="eb-container" ref="appRef">
+        <!-- 背景框 -->
+        <div class="bg">
+            <MainTitle class="title" :title="title"></MainTitle>
+        </div>
+        <gis-map
+            class="gismap"
+            pointType="广电公服"
+            listItemKey="serverName"
+            :point-list="pointList"
+            @currentPoint="currentPointFn"
+            @getPointList="getPointList"
+        >
+            <template v-slot:content>
+                <div class="left">
+                    <div class="left-content">
+                        <div class="content-three">
+                            <div class="title-box-samll">
+                                <span>终端设备分布</span>
+                            </div>
+                            <div class="content-info">
+                                <div class="barChart" id="barChart"></div>
+                            </div>
+                        </div>
+
+                        <div class="content-two">
+                            <div class="title-box-samll">
+                                <span>工单概览</span>
+                            </div>
+                            <div class="content-info">
+                                <div class="chart-content">
+                                    <div class="chart-one" id="pieChart"></div>
+                                    <div class="content">
+                                        <div
+                                            class="contentItem"
+                                            v-for="(item, index) in wkAnalysis"
+                                            :key="index"
+                                        >
+                                            <div class="line">
+                                                <div
+                                                    class="dataline"
+                                                    :style="{
+                                                        backgroundColor:
+                                                            item.color,
+                                                    }"
+                                                ></div>
+                                                <div class="defaultline"></div>
+                                            </div>
+                                            <span class="name">{{
+                                                item.name
+                                            }}</span>
+                                            <span class="num">{{
+                                                item.num
+                                            }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="content-one">
+                            <div class="title-box-samll">
+                                <span>终端种类及数量</span>
+                            </div>
+                            <div class="content-info">
+                                <div
+                                    class="item"
+                                    v-for="(item, index) in userCount"
+                                    :key="index"
+                                >
+                                    <img
+                                        :src="
+                                            require(`@/assets/pbImage/icon${
+                                                index + 1
+                                            }.png`)
+                                        "
+                                    />
+                                    <span class="name">{{ item.tvName }}</span>
+                                    <div class="numBox">
+                                        <span class="num"
+                                            ><CountTo
+                                                :startVal="0"
+                                                :endVal="Number(item.tvNum)"
+                                                :duration="2000"
+                                        /></span>
+                                        <span class="unit">户</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="right">
+                    <div class="right-content">
+                        <div class="content-five">
+                            <div class="title-box-samll">
+                                <span>故障处理情况</span>
+                            </div>
+                            <div class="content-info" id="contentBar"></div>
+                        </div>
+                        <div class="content-four">
+                            <div class="title-box-samll">
+                                <span>工单概览</span>
+                            </div>
+                            <div class="content-info">
+                                <div
+                                    class="info-box"
+                                    @click="openTicket($event)"
+                                >
+                                    <div class="header">
+                                        <span class="name">处理人</span>
+                                        <span class="time">派单时间</span>
+                                        <span class="status">状态</span>
+                                    </div>
+                                    <vueSeamlessScroll
+                                        v-if="ticketList.length > 0"
+                                        :data="ticketList"
+                                        :class-option="ticketOption"
+                                        class="scrollBox"
+                                    >
+                                        <div class="list">
+                                            <div
+                                                class="item"
+                                                v-for="(
+                                                    item, index
+                                                ) in ticketList"
+                                                :key="index"
+                                                :data-index="index"
+                                            >
+                                                <span class="name">{{
+                                                    item.name
+                                                }}</span>
+                                                <span class="time">{{
+                                                    item.createGmt
+                                                }}</span>
+                                                <span
+                                                    class="status"
+                                                    :style="{ color: 'green' }"
+                                                    >{{ item.statusDesc }}</span
+                                                >
+                                            </div>
+                                        </div>
+                                    </vueSeamlessScroll>
+                                    <div
+                                        v-else
+                                        style="
+                                            width: 352px;
+                                            height: 100%;
+                                            display: flex;
+                                            justify-content: center;
+                                            align-items: center;
+                                        "
+                                    >
+                                        <span
+                                            style="
+                                                font-size: 20px;
+                                                color: #ffffff;
+                                            "
+                                            >暂无数据</span
+                                        >
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="btns">
+                    <div
+                        class="btn"
+                        v-for="(item, index) in btnList"
+                        :key="index"
+                        :class="{ btnActive: index == btnState }"
+                        @click="btnClick(index)"
+                    >
+                        <img :src="item.img" />
+                        <span>{{ item.text }}</span>
+                    </div>
+                </div>
+                <div class="page-bottom-bg"></div>
+                <div class="page-left-bg"></div>
+                <div class="page-right-bg"></div>
+            </template>
+        </gis-map>
+        <commonModal
+            v-model="pointState"
+            width="800"
+            :title="currentPoint.serverName"
+        >
+            <div class="point-container">
+                <img style="width: 500px" :src="currentPoint.serverImage" />
+                <span class="label" v-if="personList.length > 0">负责人：</span>
+                <table v-if="personList.length > 0">
+                    <tr>
+                        <td>序号</td>
+                        <td>姓名</td>
+                        <td>照片</td>
+                        <td>职务</td>
+                        <td>联系电话</td>
+                    </tr>
+                    <tr v-for="(item, index) in personList" :key="index">
+                        <td>{{ index + 1 }}</td>
+                        <td>{{ item.name }}</td>
+                        <td>
+                            <viewer>
+                                <img
+                                    :src="item.image || defaultImage"
+                                    @error="imgerr"
+                                />
+                            </viewer>
+                        </td>
+                        <td>{{ item.post }}</td>
+                        <td>{{ item.phone }}</td>
+                    </tr>
+                </table>
+
+                <span class="label">地址：{{ currentPoint.address }}</span>
+                <div class="item">
+                    <span class="item-label">服务范围：</span>
+                    <span class="info">{{ currentPoint.remark }}</span>
+                </div>
+                <div class="item" v-if="currentPoint.serverVideo">
+                    <span class="item-label">监控视频：</span>
+                    <div class="info">
+                        <CommonLivePlayer
+                            :video-url="currentPoint.serverVideo"
+                            :live="true"
+                            :muted="true"
+                        ></CommonLivePlayer>
+                    </div>
+                </div>
+            </div>
+        </commonModal>
+        <commonModal
+            v-model="videoState"
+            width="800"
+            @close="pointState = true"
+        >
+            <div class="video-container">
+                <LivePlayer
+                    v-if="videoState"
+                    videoUrl=""
+                    :live="true"
+                    fluent
+                    autoplay
+                    stretch
+                    :hide-big-play-button="true"
+                    :muted="false"
+                    alt="正在加载中..."
+                ></LivePlayer>
+            </div>
+        </commonModal>
+        <commonModal v-model="ticketModal" width="700" title="工单详情">
+            <div class="ticket-container">
+                <div class="baseInfo">
+                    <div class="label-text">
+                        <span class="label">用户：</span>
+                        <span class="text">{{ ticket.name }}</span>
+                    </div>
+                    <div class="label-text">
+                        <span class="label">手机号：</span>
+                        <span class="text">{{ ticket.phone }}</span>
+                    </div>
+                    <div class="label-text">
+                        <span class="label">身份证号：</span>
+                        <span class="text">{{
+                            wkLogList.idCard ? ticket.idCard : "暂无"
+                        }}</span>
+                    </div>
+                    <div class="label-text">
+                        <span class="label">详细地址：</span>
+                        <span class="text">{{ ticket.address }}</span>
+                    </div>
+                </div>
+                <Timeline style="padding: 10px">
+                    <TimelineItem
+                        v-for="(item, index) in handlerList"
+                        :key="index"
+                    >
+                        <p class="part">{{ item.handleTypeValue }}</p>
+                        <div class="content">
+                            <span>{{ item.operDesc }}</span>
+                            <span>备注：{{ item.content }}</span>
+                        </div>
+                    </TimelineItem>
+                </Timeline>
+            </div>
+        </commonModal>
+        <commonModal
+            v-model="deviceState"
+            width="600"
+            :title="currentPoint.name"
+        >
+            <div v-if="deviceState" class="device-container" id="devBar">
+                <!-- <div
+                    class="item"
+                    v-for="(item, index) in currentPoint.userCount"
+                    :key="index"
+                >
+                    <span class="name">{{ item.tvName + ':' }}</span>
+                    <div class="numBox">
+                        <span class="num">{{ item.tvNum }}</span>
+                    </div>
+                </div> -->
+            </div>
+        </commonModal>
+    </div>
+</template>
+
+<script>
+import { useIndex } from "../../utils/utilsDramAdmin.js";
+import MainTitle from "./components/MainTitle.vue";
+import gisMap from "./components/gisMapOfCounty.vue";
+import * as echarts from "echarts";
+import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import commonModal from "@/views/common-components/common-modal.vue";
+import LivePlayer from "@liveqing/liveplayer";
+import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
+import "echarts-liquidfill/src/liquidFill.js";
+import { logger } from "xgplayer-hls";
+export default {
+    name: "publicService",
+    components: {
+        MainTitle,
+        gisMap,
+        vueSeamlessScroll,
+        commonModal,
+        LivePlayer,
+        CommonLivePlayer,
+    },
+    data() {
+        return {
+            title: "公共服务数据中心",
+            key: "o08YQii9QF5MuzYj",
+            pointState: false,
+            videoState: false,
+            liveVideoUrl: "",
+            ticketModal: false,
+            currentPoint: {},
+            areaCode: window.$localStorage.getItem("areaCode"),
+            adminId: window.$localStorage.getItem("adminId"),
+            ticket: {},
+            pointList: [],
+            ticketList: [],
+            messageList: [],
+            btnList: [
+                {
+                    img: require("@/assets/pbImage/all-icon.png"),
+                    text: "全部点位",
+                    level: "",
+                },
+                {
+                    img: require("@/assets/pbImage/twon-icon.png"),
+                    text: "乡镇公服网点",
+                    level: "4",
+                },
+                {
+                    img: require("@/assets/pbImage/vill-icon.png"),
+                    text: "村(居)公服代办点",
+                    level: "5",
+                },
+            ],
+            ticketOption: {
+                step: 0.1, // 数值越大速度滚动越快
+                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
+                hoverStop: true, // 是否开启鼠标悬停stop
+                direction: 1, // 0向下 1向上 2向左 3向右
+                openWatch: true, // 开启数据实时监控刷新dom
+                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+            },
+            userCount: [],
+            personList: [],
+            pointStatistics: [],
+
+            handlerList: [],
+            wkLogList: [],
+            suggestionList: [],
+            wkAnalysis: [],
+            btnState: 0,
+            deviceState: false,
+            pointsState: false,
+            defaultImage: require("@/assets/largeScreen/df.jpg"),
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted() {
+        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
+        calcRate();
+        windowDraw();
+        this.btnClick(0);
+        this.getWkAnalysis()
+        this.getPointStatistics();
+        this.getTicket();
+        // 终端种类及数量
+        this.getUserCount()
+        // 终端设备分布
+        this.initDataInfo("radioRelevisionCableTV", (data) => {
+            let xData = data.map((item) => item.label);
+            let yData = data.map((item) => Number(item.value));
+            this.initDataInfo("broadbandDevices", (data1) => {
+                let yData1 = data1.map((item1) => Number(item1.value));
+                this.initDataInfo("mobileDevice", (data2) => {
+                    let yData2 = data2.map((item2) => Number(item2.value));
+                    this.initDataInfo("relatedTerminals", (data3) => {
+                        let yData3 = data3.map((item3) => Number(item3.value));
+                        this.initChartBar(xData, yData, yData1, yData2, yData3);
+                    });
+                });
+            });
+        });
+    },
+    beforeDestroy() {
+        echartsClear();
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        imgerr(e) {
+            console.log(e);
+            e.target.src = this.defaultImage;
+        },
+        getWkAnalysis() {
+            let params = {
+                areaId: "77baf7c7-004d-41a1-8392-3e643625355e",
+            };
+            this.$http.post("/publicservice/wkAnalysisByWkType", this.common.request(params)).then((res) => {
+                if (res.data.code == 200) {
+                    let data = JSON.parse(res.data.data);
+                    let total = 0;
+                    let xData = data.wkAnalysis.map((item) => item.name);
+                    let yData = data.wkAnalysis.map((item) => {
+                        total += Number(item.num);
+                        return Number(item.num);
+                    });
+
+                    let color = ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF"];
+                    this.wkAnalysis = data.wkAnalysis.map((item, index) => {
+                        return {
+                            name: item.name,
+                            num: item.num,
+                            color: color[index],
+                        };
+                    });
+                    this.initChartPie(xData, yData, total);
+                }
+            });
+        },
+        getUserCount() {
+            let params = {
+                areaId: "77baf7c7-004d-41a1-8392-3e643625355e",
+            };
+            this.$http.post("/publicservice/digitalTelevisionByAreaId", this.common.request(params)).then((res) => {
+                if (res.data.code == 200) {
+                    this.userCount = JSON.parse(res.data.data);
+                }
+            });
+        },
+        // 获取数据
+        initDataInfo(type, callback) {
+            let params = {
+                page: 1,
+                pageSize: 100,
+                areaCode: this.areaCode,
+                type,
+            };
+            this.$http
+                .post("screen/getScreenSurveyPage", this.common.request(params))
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        let data = res.data.data.records;
+                        callback(data);
+                    }
+                });
+        },
+        initChartPie(xdata, ydata, total) {
+            let myChart = echarts.init(document.getElementById("pieChart"));
+            let option = {
+                tooltip: {
+                    trigger: "item",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                },
+                title: {
+                    text: total,
+                    subtext: "工单概览",
+                    textAlign: "center",
+                    textVerticalAlign: "center",
+                    x: "43%",
+                    y: "42%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 16,
+                        fontWeight: "normal",
+                    },
+                    subtextStyle: {
+                        color: "#99A8BD",
+                        fontSize: 10,
+                        fontWeight: "normal",
+                        align: "center",
+                    },
+                },
+                legend: {
+                    show: false,
+                    width: "60%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    icon: "circle",
+                    right: "-60",
+                    bottom: "center",
+                    padding: [30, 60],
+                    itemGap: 30,
+                    data: xdata,
+                },
+                series: [
+                    {
+                        type: "pie",
+                        center: ["45%", "50%"],
+                        radius: ["80%", "95%"],
+                        hoverAnimation: false,
+                        color: [
+                            "#FEE449",
+                            "#00FFFF",
+                            "#00FFA8",
+                            "#9F17FF",
+                            "#FFE400",
+                            "#F76F01",
+                            "#01A4F7",
+                            "#FE2C8A",
+                        ],
+                        label: {
+                            show: false,
+                        },
+                        data: ydata,
+                    },
+                    {
+                        type: "pie",
+                        center: ["45%", "50%"],
+                        radius: ["65%", "66%"],
+                        hoverAnimation: false,
+                        label: {
+                            show: false,
+                        },
+                        data: [
+                            {
+                                value: 78,
+                                name: "人数",
+                                itemStyle: {
+                                    normal: {
+                                        color: {
+                                            x: 0,
+                                            y: 0,
+                                            x2: 1,
+                                            y2: 0,
+                                            type: "linear",
+                                            global: false,
+                                            colorStops: [
+                                                {
+                                                    offset: 0,
+                                                    color: "#9F17FF",
+                                                },
+                                                {
+                                                    offset: 0.2,
+                                                    color: "#01A4F7",
+                                                },
+                                                {
+                                                    offset: 0.5,
+                                                    color: "#FE2C8A",
+                                                },
+                                                {
+                                                    offset: 0.8,
+                                                    color: "#FEE449",
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: "#00FFA8",
+                                                },
+                                            ],
+                                        },
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            };
+            myChart.setOption(option);
+            echartsFocus(myChart, xdata.length);
+        },
+        initChartBar(xdata, ydata1, ydata2, ydata3, ydata4) {
+            let myChart = echarts.init(document.getElementById("barChart"));
+            var option = {
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        lineStyle: {
+                            color: "#57617B",
+                        },
+                    },
+                },
+                legend: {
+                    icon: "rect",
+                    itemWidth: 14,
+                    itemHeight: 2,
+                    itemGap: 13,
+                    data: [
+                        "广电有线电视",
+                        "宽带用户",
+                        "移动用户",
+                        "广播电视相关终端",
+                    ],
+                    top: "2%",
+                    textStyle: {
+                        fontSize: 10,
+                        color: "#F1F1F3",
+                    },
+                },
+                grid: {
+                    top: "13%",
+                    left: "4%",
+                    right: "4%",
+                    bottom: "4%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: "#ffffff",
+                            },
+                            formatter: function (value) {
+                                return value.split("").join("\n");
+                            },
+                        },
+                        data: xdata,
+                    },
+                    {
+                        axisPointer: {
+                            show: false,
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: "#57617B",
+                            },
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        // axisLine: {
+                        //     lineStyle: {
+                        //         color: "#57617B"
+                        //     }
+                        // },
+                        axisLabel: {
+                            margin: 10,
+                            textStyle: {
+                                fontSize: 10,
+                                color: "#ffffff",
+                            },
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                type: "dashed",
+                                color: "#57617B",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "广电有线电视",
+                        type: "line",
+                        smooth: true,
+                        symbol: "circle",
+                        symbolSize: 5,
+                        showSymbol: false,
+                        lineStyle: {
+                            normal: {
+                                width: 1,
+                            },
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(137, 189, 27, 0.3)",
+                                        },
+                                        {
+                                            offset: 0.8,
+                                            color: "rgba(137, 189, 27, 0)",
+                                        },
+                                    ],
+                                    false
+                                ),
+                                shadowColor: "rgba(0, 0, 0, 0.1)",
+                                shadowBlur: 10,
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "rgb(137,189,27)",
+                                borderColor: "rgba(137,189,2,0.27)",
+                                borderWidth: 12,
+                            },
+                        },
+                        data: ydata1,
+                    },
+                    {
+                        name: "宽带用户",
+                        type: "line",
+                        smooth: true,
+                        symbol: "circle",
+                        symbolSize: 5,
+                        showSymbol: false,
+                        lineStyle: {
+                            normal: {
+                                width: 1,
+                            },
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(0, 136, 212, 0.3)",
+                                        },
+                                        {
+                                            offset: 0.8,
+                                            color: "rgba(0, 136, 212, 0)",
+                                        },
+                                    ],
+                                    false
+                                ),
+                                shadowColor: "rgba(0, 0, 0, 0.1)",
+                                shadowBlur: 10,
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "rgb(0,136,212)",
+                                borderColor: "rgba(0,136,212,0.2)",
+                                borderWidth: 12,
+                            },
+                        },
+                        data: ydata2,
+                    },
+                    {
+                        name: "移动用户",
+                        type: "line",
+                        smooth: true,
+                        symbol: "circle",
+                        symbolSize: 5,
+                        showSymbol: false,
+                        lineStyle: {
+                            normal: {
+                                width: 1,
+                            },
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(219, 50, 51, 0.3)",
+                                        },
+                                        {
+                                            offset: 0.8,
+                                            color: "rgba(219, 50, 51, 0)",
+                                        },
+                                    ],
+                                    false
+                                ),
+                                shadowColor: "rgba(0, 0, 0, 0.1)",
+                                shadowBlur: 10,
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "rgb(219,50,51)",
+                                borderColor: "rgba(219,50,51,0.2)",
+                                borderWidth: 12,
+                            },
+                        },
+                        data: ydata3,
+                    },
+                    {
+                        name: "广播电视相关终端",
+                        type: "line",
+                        smooth: true,
+                        symbol: "circle",
+                        symbolSize: 5,
+                        showSymbol: false,
+                        lineStyle: {
+                            normal: {
+                                width: 1,
+                            },
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "rgba(255, 207, 37, 0.3)",
+                                        },
+                                        {
+                                            offset: 0.8,
+                                            color: "rgba(255, 207, 37, 0)",
+                                        },
+                                    ],
+                                    false
+                                ),
+                                shadowColor: "rgba(0, 0, 0, 0.1)",
+                                shadowBlur: 10,
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "rgb(255, 207, 37)",
+                                borderColor: "rgba(219,50,51,0.2)",
+                                borderWidth: 12,
+                            },
+                        },
+                        data: ydata4,
+                    },
+                ],
+            };
+            myChart.setOption(option);
+            echartsFocus(myChart, xdata.length);
+        },
+        currentPointFn(data) {
+            this.liveVideoUrl = "";
+            this.currentPoint = data;
+            this.pointState = true;
+            let params = {
+                pageNum: 1,
+                pageSize: 10000,
+                serverId: data.id,
+            };
+            this.$http
+                .post(
+                    "/server/queryServerPeopleInfoPage",
+                    this.common.request(params)
+                )
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.personList = res.data.data.records;
+                    }
+                });
+        },
+        queryPointManger(id) {
+            console.log("id", id);
+            let params = {
+                serviceId: id,
+            };
+            this.$http
+                .post("/cp/serviceuser/getByList", this.common.request(params))
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.personList = res.data.data.data.records;
+                    } else {
+                        this.$Message.error("操作失败");
+                    }
+                });
+        },
+        getDeviceStream(data) {
+            let params = {
+                deviceId: data.deviceId,
+                channelId: data.channelId,
+            };
+            this.$http.post("/devices/getDeviceStream", params).then((res) => {
+                if (res.data.code == 200) {
+                    console.log(res.data.data);
+                    this.liveVideoUrl = res.data.data.flv;
+                } else {
+                    this.$Message.error("操作失败");
+                }
+            });
+        },
+        openVideo() {
+            this.videoState = true;
+            this.pointState = false;
+        },
+        openSuggestion(e) {
+            if (e.target.className != "item") return;
+            let index = e.target.dataset.index;
+            console.log(index);
+            this.ticket = this.suggestionList[index];
+            this.getTicketId(this.ticket.id);
+            this.ticketModal = true;
+        },
+        openTicket(e) {
+            if (e.target.className != "item") return;
+            let index = e.target.dataset.index;
+            let data = this.ticketList[index];
+            // this.getTicketId(this.ticket.id);
+            this.$http
+                .post(
+                    "/publicservice/workOrderDetail",
+                    this.common.request({ id: data.id })
+                )
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        let resData = JSON.parse(res.data.data);
+                        this.ticket = resData.wkLogList[0];
+                        this.handlerList = resData.handlerList;
+                        this.ticketModal = true;
+                    }
+                });
+        },
+        // 解密
+        decryptDES(text) {
+            let decrypted = CryptoJS.DES.decrypt(
+                { ciphertext: CryptoJS.enc.Hex.parse(text) },
+                CryptoJS.enc.Utf8.parse(this.key),
+                {
+                    mode: CryptoJS.mode.ECB,
+                    padding: CryptoJS.pad.Pkcs7,
+                }
+            );
+            let str = decrypted.toString(CryptoJS.enc.Utf8);
+            return str;
+        },
+        getTicket() {
+            let params = {
+                page: 1,
+                pageSize: 10000,
+            };
+            this.$http
+                .post(
+                    "publicservice/workOrderListPage",
+                    this.common.request(params)
+                )
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        let data = JSON.parse(res.data.data)
+                        this.ticketList = data.pageList
+                        let gzTotal = 0
+                        let finshNum = 0
+                        let noFinshNum = 0
+                        let gzList = this.ticketList.filter((item) => {
+                            return item.wkType == "故障维修"
+                        })
+                        gzTotal = gzList.length
+                        gzList.forEach((item) => {
+                            if (item.status == 3 || item.status == 4) {
+                                finshNum++
+                            }
+                        })
+                        noFinshNum = gzTotal - finshNum
+                        console.log(gzTotal, finshNum, noFinshNum)
+                        let barData = [
+                            {
+                                label: "已处理",
+                                value: finshNum,
+                            },
+                            {
+                                label: "未处理",
+                                value: noFinshNum,
+                            }
+                        ];
+                        this.initChartcontentBar(barData);
+                    } else {
+                        this.$Message.error("查询出错");
+                    }
+                });
+        },
+        getPointStatistics() {
+            this.initChartBar([]);
+        },
+        getPoints(level) {
+            let params = {
+                pageNum: 1,
+                pageSize: 100000,
+                serverLevel: level,
+            };
+            this.$http
+                .post(
+                    "/server/queryServerInfoPage",
+                    this.common.request(params)
+                )
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        let data = res.data.data.records;
+                        data.forEach((item) => {
+                            item.lnglat = [item.longitude, item.latitude];
+                        });
+                        this.pointList = data;
+                    }
+                });
+        },
+        btnClick(index) {
+            this.btnState = index;
+            let level = this.btnList[index].level;
+            this.getPoints(level);
+        },
+        initChartcontentBar(trafficWay) {
+            let myChart = echarts.init(document.getElementById("contentBar"));
+            let total = 0;
+            trafficWay.forEach((item) => {
+                total += item.value;
+            });
+            var value = (trafficWay[0].value / total).toFixed(2);
+            var value1 = 1 - value;
+            var option = {
+                title: [
+                    {
+                        text: "已处理" + " " + trafficWay[0].value,
+                        x: "20%",
+                        y: "70%",
+                        textStyle: {
+                            fontSize: 18,
+                            fontWeight: "700",
+                            color: "#ffffff",
+                            lineHeight: 16,
+                            textAlign: "center",
+                        },
+                    },
+                    {
+                        text: "未处理" + " " + trafficWay[1].value,
+                        x: "65%",
+                        y: "70%",
+                        textStyle: {
+                            fontSize: 18,
+                            fontWeight: "700",
+                            color: "#ffffff",
+                            lineHeight: 16,
+                            textAlign: "center",
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        type: "liquidFill",
+                        radius: "45%",
+                        center: ["30%", "45%"],
+                        color: [
+                            {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: "#446bf5",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#2ca3e2",
+                                    },
+                                ],
+                                globalCoord: false,
+                            },
+                        ],
+                        data: [value, value], // data个数代表波浪数
+                        backgroundStyle: {
+                            borderWidth: 1,
+                            color: "RGBA(51, 66, 127, 0.7)",
+                        },
+                        label: {
+                            normal: {
+                                textStyle: {
+                                    fontSize: 28,
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                        outline: {
+                            // show: false
+                            borderDistance: 0,
+                            itemStyle: {
+                                borderWidth: 2,
+                                borderColor: "#112165",
+                            },
+                        },
+                    },
+
+                    {
+                        //第二个球的填充
+                        type: "liquidFill",
+                        radius: "45%",
+                        center: ["75%", "45%"],
+                        color: [
+                            {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: "#2aa1e3",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#08bbc9",
+                                    },
+                                ],
+                                globalCoord: false,
+                            },
+                        ],
+                        data: [value1, value1], // data个数代表波浪数
+                        backgroundStyle: {
+                            borderWidth: 1,
+                            color: "RGBA(51, 66, 127, 0.7)",
+                        },
+                        label: {
+                            normal: {
+                                textStyle: {
+                                    fontSize: 28,
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                        outline: {
+                            // show: false
+                            borderDistance: 0,
+                            itemStyle: {
+                                borderWidth: 2,
+                                borderColor: "#112165",
+                            },
+                        },
+                    },
+                ],
+            };
+            myChart.setOption(option);
+        },
+        getPointList(data) {
+            console.log(data);
+            this.pointsState = true;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../styles/pbStyle.less";
+
+/deep/ .ivu-tabs-tab {
+    width: 50% !important;
+    text-align: center;
+}
+
+/deep/ .ivu-tabs-nav {
+    width: 100% !important;
+}
+
+.eb-container {
+    width: 1920px;
+    height: 1080px;
+    transform: scale(var(--scale)) translate(-50%, -50%);
+    transform-origin: 0 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-image: url("../../assets/largeScreen/page-bg.png");
+    background-size: 100%;
+    .gismap {
+    }
+
+    .bg {
+        width: 1920px;
+        height: 1080px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        pointer-events: none;
+
+        .title {
+            pointer-events: all;
+        }
+    }
+}
+
+.left {
+    width: 458px;
+    height: 1004px;
+    position: fixed;
+    top: 48px;
+    left: 0;
+
+    .left-content {
+        width: 100%;
+        height: 940px;
+        position: absolute;
+        top: 50px;
+        left: 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .content-one {
+            width: 100%;
+            height: 360px;
+            display: flex;
+            flex-direction: column;
+            .content-info {
+                .content-pub-style(100%, calc(100% - 42px));
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                padding: 10px 0;
+                .item {
+                    height: 50px;
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    position: relative;
+                    padding-left: 20px;
+                    img {
+                        width: 50px;
+                        height: 50px;
+                    }
+
+                    .name {
+                        font-family: PingFang SC;
+                        font-size: 18px;
+                        font-weight: 400;
+                        color: #ffffff;
+                        margin-left: 10px;
+                        display: inline-block;
+                        width: 145px;
+                    }
+
+                    .numBox {
+                        position: absolute;
+                        top: 50%;
+                        right: 20px;
+                        transform: translateY(-50%);
+                        .num {
+                            font-family: D-DIN-PRO;
+                            font-size: 28px;
+                            font-weight: 500;
+                            background: linear-gradient(
+                                180deg,
+                                #ffffff 0%,
+                                #ffcf25 100%
+                            );
+                            -webkit-background-clip: text;
+                            color: transparent;
+                        }
+
+                        .unit {
+                            font-family: PingFang SC;
+                            font-size: 10px;
+                            font-weight: 400;
+                            color: #ffffff;
+                        }
+                    }
+                }
+            }
+        }
+
+        .content-two {
+            width: 100%;
+            height: 240px;
+            display: flex;
+            flex-direction: column;
+
+            .content-info {
+                .content-pub-style(100%, calc(100% - 42px));
+                display: flex;
+                align-items: center;
+
+                .chart-content {
+                    width: 100%;
+                    height: 140px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .chart-one {
+                        width: 160px;
+                        height: 100%;
+                        margin-right: 50px;
+                    }
+
+                    .content {
+                        width: 150px;
+                        height: 120px;
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: space-between;
+
+                        .contentItem {
+                            width: 62px;
+                            height: 44px;
+                            display: flex;
+                            margin-bottom: 20px;
+                            flex-direction: column;
+
+                            .line {
+                                display: flex;
+
+                                .dataline {
+                                    height: 4px;
+                                    width: 21px;
+                                    margin-right: 5px;
+                                    background-color: #19cd17;
+                                    border-radius: 2px;
+                                }
+
+                                .defaultline {
+                                    height: 4px;
+                                    width: 36px;
+                                    background-color: #1b424f;
+                                    border-radius: 2px;
+                                }
+                            }
+
+                            .name {
+                                font-family: "PingFang SC";
+                                font-size: 10px;
+                                font-weight: 400;
+                                color: #ffffff;
+                                margin: 4px 0;
+                            }
+
+                            .num {
+                                font-family: "Furore";
+                                font-size: 18px;
+                                font-weight: 400;
+                                color: #ffffff;
+                                text-align: left;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .content-three {
+            width: 100%;
+            height: 335px;
+            display: flex;
+            flex-direction: column;
+
+            .content-info {
+                .content-pub-style(100%, calc(100% - 42px));
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .barChart {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 458px;
+    height: 1004px;
+    position: fixed;
+    top: 48px;
+    right: 0;
+
+    .right-content {
+        width: 100%;
+        height: 940px;
+        position: absolute;
+        top: 50px;
+        right: 30px;
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+
+        .content-four {
+            width: 458px;
+            height: calc(100% - 300px);
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+
+            .content-info {
+                .content-pub-style(100%, calc(100% - 42px));
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .info-box {
+                    width: 420px;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+
+                    .header {
+                        width: 100%;
+                        height: 40px;
+                        display: flex;
+                        align-items: center;
+
+                        span {
+                            display: inline-block;
+                            font-family: PingFang SC;
+                            font-size: 14px;
+                            font-weight: 400;
+                            background: linear-gradient(
+                                180deg,
+                                #ffffff 0%,
+                                #a7ddff 100%
+                            );
+                            -webkit-background-clip: text;
+                            color: transparent;
+                            text-align: center;
+                        }
+
+                        .name {
+                            width: 120px;
+                        }
+
+                        .time {
+                            width: 140px;
+                        }
+                        .status {
+                            width: 120px;
+                        }
+                    }
+
+                    .scrollBox {
+                        width: 100%;
+                        height: calc(100% - 40px);
+                        overflow: hidden;
+
+                        .list {
+                            width: 100%;
+                            display: flex;
+                            flex-direction: column;
+
+                            .item {
+                                width: 100%;
+                                height: 40px;
+                                background: url("../../assets/pbImage/item-bg.png")
+                                    no-repeat;
+                                background-size: 100% 100%;
+                                display: flex;
+                                align-items: center;
+                                margin-bottom: 5px;
+                                cursor: pointer;
+
+                                span {
+                                    font-family: PingFang SC;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #ffffff;
+                                    text-align: center;
+                                    pointer-events: none;
+                                }
+
+                                .name {
+                                    width: 120px;
+                                    pointer-events: none;
+                                }
+
+                                .time {
+                                    width: 140px;
+                                    text-align: left;
+                                    pointer-events: none;
+                                }
+                                .status {
+                                    width: 120px;
+                                    pointer-events: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .content-five {
+            width: 458px;
+            height: 300px;
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+            .content-info {
+                .content-pub-style(100%, calc(100% - 42px));
+                display: flex;
+                padding-right: 15px;
+                justify-content: end;
+
+                .scrollBox {
+                    width: 352px;
+                    height: 100%;
+                    overflow: hidden;
+
+                    .list {
+                        width: 352px;
+                        display: flex;
+                        flex-direction: column;
+
+                        .item {
+                            width: 100%;
+                            background: url("../../assets/pbImage/item-bg2.png")
+                                no-repeat;
+                            background-size: 100% 100%;
+                            font-family: PingFang SC;
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #ffffff;
+                            padding: 10px;
+                            margin-bottom: 10px;
+
+                            .name-date {
+                                width: 100%;
+                                display: flex;
+                                justify-content: space-between;
+                                pointer-events: none;
+                            }
+                            .info {
+                                pointer-events: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.btns {
+    position: fixed;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+
+    .btn {
+        display: flex;
+        align-items: center;
+        margin: 0 10px;
+        cursor: pointer;
+        padding: 10px 20px;
+
+        img {
+            width: 56px;
+            height: 56px;
+            pointer-events: none;
+        }
+
+        span {
+            font-family: PingFang SC;
+            font-size: 16px;
+            font-weight: 400;
+            color: #ffffff;
+            margin-left: 10px;
+            pointer-events: none;
+        }
+    }
+
+    .btnActive {
+        background-color: rgba(16, 72, 157, 0.6);
+        border-radius: 20px;
+        span {
+            color: #ffcf25 !important;
+        }
+    }
+}
+
+.bottom {
+    width: 1920px;
+    height: 30px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: url("../../assets/pbImage/bottom.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.point-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .label {
+        width: 100%;
+        display: block;
+        color: #ffffff;
+        font-size: 18px;
+        padding: 10px;
+    }
+
+    table {
+        width: 600px;
+        border: 1px solid #ffffff;
+        border-collapse: collapse;
+
+        tr {
+            width: 600px;
+            height: 50px;
+
+            td {
+                width: 120px;
+                height: 100%;
+                border: 1px solid #ffffff;
+                line-height: 100%;
+                text-align: center;
+                font-size: 16px;
+
+                img {
+                    width: 30px;
+                    height: 40px;
+                }
+            }
+        }
+    }
+    .item {
+        width: 100%;
+        display: flex;
+        padding: 10px;
+        color: #ffffff;
+        font-size: 18px;
+        .item-label {
+            width: 100px;
+        }
+        .info {
+            flex: 1;
+        }
+    }
+}
+
+.video-container {
+    width: 100%;
+}
+
+.ticket-container {
+    width: 100%;
+
+    .baseInfo {
+        width: 100%;
+        height: 120px;
+        padding: 10px 5px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .label-text {
+            width: 50%;
+            margin: 10px 0;
+            display: flex;
+            span {
+                display: inline-block;
+                font-size: 18px;
+                color: #ffffff;
+            }
+            // .label {
+            //     width: 90px;
+            // }
+            .text {
+                flex: 1;
+            }
+        }
+    }
+
+    .part {
+        font-weight: bold;
+        font-size: 18px;
+    }
+    .content {
+        width: 100%;
+        padding: 10px;
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.device-container {
+    width: 100%;
+    height: 330px;
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .item {
+        height: 64px;
+        width: 100%;
+        display: flex;
+        // padding: 0 10%;
+        // justify-content: space-between;
+        align-items: center;
+
+        img {
+            width: 64px;
+            height: 64px;
+        }
+
+        .name {
+            font-family: PingFang SC;
+            font-size: 18px;
+            font-weight: 400;
+            color: #ffffff;
+            margin-left: 10px;
+            display: inline-block;
+            width: 145px;
+        }
+
+        .numBox {
+            margin-left: 20px;
+
+            .num {
+                font-family: D-DIN-PRO;
+                font-size: 32px;
+                font-weight: 500;
+                background: linear-gradient(180deg, #ffffff 0%, #ffcf25 100%);
+                -webkit-background-clip: text;
+                color: transparent;
+            }
+
+            .unit {
+                font-family: PingFang SC;
+                font-size: 10px;
+                font-weight: 400;
+                color: #ffffff;
+            }
+        }
+    }
+}
+
+/deep/ .amap-container {
+    background-image: unset !important;
+}
+</style>
diff --git a/src/views/screen/public-service.vue b/src/views/screen/public-service.vue
index 84c9679..c5cc9b6 100644
--- a/src/views/screen/public-service.vue
+++ b/src/views/screen/public-service.vue
@@ -6,7 +6,6 @@
         </div>
         <gis-map
             class="gismap"
-
             pointType="广电公服"
             listItemKey="serverName"
             :point-list="pointList"
@@ -81,7 +80,7 @@
                                         <span class="num"
                                             ><CountTo
                                                 :startVal="0"
-                                                :endVal="item.tvNum"
+                                                :endVal="Number(item.tvNum)"
                                                 :duration="2000"
                                         /></span>
                                         <span class="unit">户</span>
@@ -213,7 +212,10 @@
                         <td>{{ item.name }}</td>
                         <td>
                             <viewer>
-                                <img :src="item.image" />
+                                <img
+                                    :src="item.image || defaultImage"
+                                    @error="imgerr"
+                                />
                             </viewer>
                         </td>
                         <td>{{ item.post }}</td>
@@ -229,7 +231,11 @@
                 <div class="item" v-if="currentPoint.serverVideo">
                     <span class="item-label">监控视频：</span>
                     <div class="info">
-                        <CommonLivePlayer :video-url="currentPoint.serverVideo" :live="true" :muted="true"></CommonLivePlayer>
+                        <CommonLivePlayer
+                            :video-url="currentPoint.serverVideo"
+                            :live="true"
+                            :muted="true"
+                        ></CommonLivePlayer>
                     </div>
                 </div>
             </div>
@@ -360,6 +366,7 @@ import commonModal from "@/views/common-components/common-modal.vue";
 import LivePlayer from "@liveqing/liveplayer";
 import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
 import "echarts-liquidfill/src/liquidFill.js";
+import { logger } from "xgplayer-hls";
 export default {
     name: "publicService",
     components: {
@@ -423,6 +430,7 @@ export default {
             btnState: 0,
             deviceState: false,
             pointsState: false,
+            defaultImage: require("@/assets/largeScreen/df.jpg")
         };
     },
     watch: {},
@@ -495,6 +503,10 @@ export default {
     computed: {},
     watch: {},
     methods: {
+        imgerr(e) {
+            console.log(e);
+            e.target.src = this.defaultImage;
+        },
         // 获取数据
         initDataInfo(type, callback) {
             let params = {
diff --git a/src/views/screen/test.vue b/src/views/screen/test.vue
new file mode 100644
index 0000000..db5f96d
--- /dev/null
+++ b/src/views/screen/test.vue
@@ -0,0 +1,45 @@
+<template>
+    <div style="margin-left: 500px;">
+        <Input v-model="ciphertext" placeholder="Enter something..." style="width: 500px"></Input>
+        <Button @click="decryptDES" type="primary">加密</Button>
+        <Button @click="decryptDES" type="primary">解密</Button><br>
+        <Input  v-model="str" placeholder="" type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" style="width: 500px"></Input>
+    </div>
+</template>
+<script>
+import CryptoJS from 'crypto-js';
+export default {
+    data () {
+        return {
+            key: 'o08YQii9QF5MuzYj',
+            message: "ZZZZZZ",
+            ciphertext: "",
+            str: ""
+        }
+    },
+    methods: {
+        // 加密
+        encryptDES () {
+
+            var encrypt = CryptoJS.DES.encrypt(this.message, CryptoJS.enc.Utf8.parse(this.key), {
+                mode: CryptoJS.mode.ECB,
+                padding: CryptoJS.pad.Pkcs7
+            });
+            let str = encrypt.toString();
+            console.log(str)
+
+        },
+
+        // 解密
+        decryptDES () {
+            let decrypted = CryptoJS.DES.decrypt({ ciphertext: CryptoJS.enc.Hex.parse(this.ciphertext) }, CryptoJS.enc.Utf8.parse(this.key), {
+                mode: CryptoJS.mode.ECB,
+                padding: CryptoJS.pad.Pkcs7
+            });
+            this.str = decrypted.toString(CryptoJS.enc.Utf8);
+
+
+        }
+    }
+}
+</script>