zizhujianzhan_web/components/template/component/article/900x1384/1.vue

<template>
    <div class="articleMainBox">
        <div class="articleTitle">{{templateData.data.title}}</div>
        <div class="articleInfo">
            <div>来源：{{templateData.data.copyfrom}}</div>
            <div>作者：{{templateData.data.author}}</div>
            <div>时间：{{templateData.data.updated_at}}</div>
        </div>
        <div class="articleContent" v-html="templateData.data.content" @click="openPreview"></div>
        <div class="statementBox" v-if="templateData.data.copyfrom != '本网'">
            <div class="statementBoxLeft">
                <div>原文链接：http://nmyj.xlgl.gov.cn/xzxk/zsyz/202112/t20211201_2771045.html</div>
                <div>[免责声明] 本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其它问题，请在30日内与本网联系，我们将在第一时间处理。</div>
            </div>
        </div>
        <div v-if="articleChoice">
            <div :class="['index_3_box_vote', 'voteStyle' + skinId]" v-if="articleChoice">
                <div class="voteTitle">投票区</div>
                <div class="inquire">
                    <p v-if="voteList.length > 0">{{ voteList[0].survey_name }}</p>
                    <div class="radioBox">
                        <div v-if="!isDisabled">
                            <div class="radio" v-if="isRadio">
                                <el-radio-group v-model="radio1" @change="handleRadioChange">
                                    <el-radio 
                                        v-for="item in voteList" 
                                        :key="item.id" 
                                        :value="item.id"
                                        size="large"
                                    >
                                        <span v-if="item.is_other == 0">
                                            {{ item.choice_name }}
                                        </span>
                                        <span v-else>其他</span>
                                    </el-radio>
                                </el-radio-group>
                                <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea" resize="none" placeholder="请输入.." />
                            </div>
                            <div class="checkInputBox" v-else>
                                <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
                                    <span v-for="item in voteList" :key="item.id">
                                        <span v-if="item.is_other == 0">
                                            <el-checkbox size="large" :label="item.choice_name"
                                                :value="item.id" />
                                        </span>
                                        <span v-else>
                                            <el-checkbox size="large" label="其他" :value="item.id" />
                                        </span>
                                    </span>
                                </el-checkbox-group>
                                <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
                                    resize="none" placeholder="请输入.." />
                            </div>
                        </div>
                        <div class="inquireData" v-else>
                            <div v-for="item in websiteSurveyData.data" :key="item.id">
                                <div class="inquireDataItem active" v-if="item.status == 1">
                                    <div class="inquireDataItemTitle">
                                        <span v-if="item.choice_name == ''">其他</span>
                                        <span v-else>{{ item.choice_name }}</span>
                                    </div>
                                    <div class="inquireDataItemNum">{{ item.results }}票</div>
                                </div>
                                <div class="inquireDataItem" v-else>
                                    <div class="inquireDataItemTitle">
                                        <span v-if="item.choice_name == ''">其他</span>
                                        <span v-else>{{ item.choice_name }}</span>
                                    </div>
                                    <div class="inquireDataItemNum">{{ item.results }}票</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <button :class="['voting', 'votingStyle' + skinId]" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus'

const props = defineProps({
    templateData:Object,//新闻正文
    skinId:Number
});

const templateData = {
    "code": 200,
    "message": "success",
    "data": {
        "id": 2863,
        "catid": 492,
        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
        "introduce": "\t\t新华社北京\t2月25日电 题：勇担先行示范的重任——京津冀十年协同发展",
        "tag": "",
        "keyword": "以,生态,为,内核,推动,文旅,发展,海南",
        "author": "佚名",
        "copyfrom": "本网",
        "fromurl": "http://sp.lyedc.org.cn/show-56324.html",
        "hits": 0,
        "ip": "",
        "status": 1,
        "islink": 0,
        "linkurl": "",
        "imgurl": "",
        "admin_user_id": 87,
        "cat_arr_id": "[491,492]",
        "created_at": "2025-02-10 15:21:58",
        "updated_at": "2025-07-21 14:23:16",
        "is_original": 0,
        "survey_id": "2025072114231698077885",
        "survey_name": "请问“一骑绝尘妃子笑，无人知是荔枝来？”这句诗描写的是哪个朝代？",
        "is_survey": 1,
        "survey_type": 0,
        "web_site_id": "31",
        "ignore_ids": null,
        "reason": null,
        "department_arr_id": "[]",
        "department_id": 0,
        "city_arr_id": "[]",
        "city_id": 0,
        "level": "[6,0]",
        "commend_id": "[]",
        "level_text": "[6, 0]",
        "article_id": null,
        "content": "<p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">新华社北京</span>\t<span style=\"color: rgb(0, 0, 0);\">2月25日电 </span><strong>题：勇担先行示范的重任——京津冀十年协同发展谱新篇</strong></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">新华社记者</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">2024年是京津冀协同发展上升为国家战略十周年。十年来，习近平总书记亲自谋划、亲自部署、亲自推动京津冀协同发展，指明前进方向、提供根本遵循，推动这一国家战略不断向纵深推进。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">“京津冀如同一朵花上的花瓣，瓣瓣不同，却瓣瓣同心。”落实习近平总书记重大决策部署，京津冀探索人口经济密集地区优化开发的新模式，谋求区域发展的新路子，打造经济社会发展新的增长极。从谋篇布局的“大写意”到精耕细作的“工笔画”，京畿大地发生着深刻变化。</span></p><p class=\"ql-align-justify\">\t<strong>以资源优化配置重构区域发展新格局</strong></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">春节假期后，位于北京地铁动物园站南侧的新动力金融科技中心极具现代感的大厅内，服务团队正在为新一批入驻企业对接最新落地的相关政策。经过疏解腾退，曾经的动物园批发市场，当前已成为金融科技企业的集聚地。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">十年前，动物园批发市场面积最大的世纪天乐大厦，曾聚集近</span>\t<span style=\"color: rgb(0, 0, 0);\">3000家商铺。如今大厦通过改造，最大限度保留建筑结构，内部则是另一番景象：5A甲级写字楼，设有城市会客厅、文化艺术空间等商务服务及社交空间。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">与此同时，一批批市场商户向河北廊坊、保定白沟、沧州黄骅等地疏解，助力河北打造全国现代商贸物流基地。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">“动批”蝶变是首都转变发展模式、推进区域协调发展的生动样本。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">2014年2月26日，习近平总书记主持召开座谈会听取京津冀协同发展专题汇报，明确提出实现京津冀协同发展是一个重大国家战略。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">宏图既定，规划先行。</span>\t<span style=\"color: rgb(0, 0, 0);\">2015年6月9日，中共中央、国务院印发《京津冀协同发展规划纲要》。一张图规划、一盘棋建设、一体化发展，京津冀协同发展不断取得新成效。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">今年春节，来自湖北襄阳的电焊工董天会是在北大人民医院雄安院区项目工地上度过的。这是他从业十几年来，第一次没有回家过年。他说，在建设未来之城中度过一个有意义的春节非常难忘。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">吊臂升降，机器轰鸣，钢筋敲击声不绝于耳</span>\t<span style=\"color: rgb(0, 0, 0);\">……在雄安新区，还有国贸片区、大河片区安置房等多个项目现场，春节不停工，寒风中的建设“热度”不减。记者获悉，雄安新区已有4家央企总部落户，央企已设立子公司及各类分支机构200多家；在京部委所属的4所高校雄安校区和1家医院雄安院区项目已开工……</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">在北京另一翼，城市副中心一批交通、水利、能源等重大基础设施和生态环境综合治理项目逐步建成，锚定数字经济、现代金融、先进制造、商务服务等六大产业，连续保持每年千亿级投资强度。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">在通州，焕新的不只是城市面貌，更在于发展理念和管理机制的提升。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">根据相关政策，符合北京城市副中心发展定位的北京市属国有企事业单位，在疏解至北京城市副中心时，允许其新建或购买办公场所；符合划拨条件的，可以以划拨方式供应土地。这一政策赋予北京城市副中心更大发展自主权。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">2024年1月底，北京市级机关两批集中搬迁工作顺利收官，城市副中心与主城区“以副辅主、主副共兴”的发展格局正有序形成。第七次全国人口普查结果显示，通州区常住人口约184万人，比第六次全国人口普查时增长65万余人。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">十年间，北京市</span>\t<span style=\"color: rgb(0, 0, 0);\">“瘦身提质”效果超出预期，退出一般制造业企业超3000家，疏解提升区域性专业市场和物流中心近1000家，城乡建设用地减量130平方公里。北京中心城区功能布局不断优化，实现城六区常住人口比2014年下降15%的目标，高精尖产业新设经营主体占比由40.7%上升至66.1%，精准补建便民商业网点7700余个。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">随着区域合作日益加强，资源合理流动和配置，天津和河北发展更有活力。河北省十年累计承接京津转入基本单位</span>\t<span style=\"color: rgb(0, 0, 0);\">4.3万余家；天津市滨海—中关村科技园、京津中关村科技城等重点平台，注册科技创新企业约6500家。</span></p><p class=\"ql-align-justify\">\t<strong>以协同创新促进区域产业协作</strong></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">对京津冀协同发展而言，京津两个直辖市是重要的支点。结合北京科技创新优势和天津先进制造研发优势，贯彻落实习近平总书记重要指示，</span>\t<span style=\"color: rgb(0, 0, 0);\">“谱写新时期社会主义现代化的京津‘双城记’”成为这两座城市发展的新方向。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">不久前，一款用于清洁太阳能光伏板的新材料产品在天津滨海</span>\t<span style=\"color: rgb(0, 0, 0);\">—中关村科技园发布。“以全国太阳能装机量约400GW为例，每年可减少约420亿元的经济损失，为清洁能源行业带来广阔的盈利空间。”研发企业京中（天津）纳米科技有限公司负责人那明扬说。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">这是京津冀协同创新在天津市诞生的新成果。京津携手在天津市滨海新区、宝坻区分别建立滨海</span>\t<span style=\"color: rgb(0, 0, 0);\">—中关村科技园、京津中关村科技城，推动创新成果落地开花。截至2023年底，两处新平台累计注册企业突破6500家，大多数是科技型创新企业。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">跟随公司落户天津宝坻京津中关村科技城，张建辉和李丽花这对</span>\t<span style=\"color: rgb(0, 0, 0);\">“80后”夫妻结束了长达9年的“北漂”生活。李丽花说，之前一直在北京的博宇半导体工艺器皿技术有限公司工作，孩子长期在老家。2020年，张建辉夫妇顺利落户天津，把孩子从山东老家接来身边上学，心里踏实多了。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">在雄安新区中关村科技园一期</span>\t<span style=\"color: rgb(0, 0, 0);\">B2栋的二楼，有一间咖啡厅颇为热闹。有时咖啡厅被改成一间会议室，长长的桌子尽头，是一个可移动的大屏。随着不同的会议主题，大屏上播放着不同内容的PPT文件。主讲人有时坐在沙发上向长桌四周的人讲解，有时候起身快步走到大屏前，进行问答和互动。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">河北雄安罗数科技有限公司总经理李亚洲表示，从办公室移步二楼咖啡厅，创业者们可不仅仅是为了一杯饮品。在一间间充满咖啡香的共享空间里，有创新创造的热情、有思想碰撞的火花，也隐藏着数不清的机遇。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">雄安新区中关村科技园自去年</span>\t<span style=\"color: rgb(0, 0, 0);\">8月30日揭牌，一期工程入驻率达到了90%。这些企业以高新技术、专精特新“小巨人”为主，主营业务多为人工智能、智能硬件、生物医药等。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">一个中关村，花开京津冀。十年来，中关村企业在津冀两地累计设立分支机构已超过</span>\t<span style=\"color: rgb(0, 0, 0);\">1万家。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">以协同创新推动产业协作，是京津冀协同发展不断突破的根本动力。北京市发改委主任杨秀玲表示，京津冀正联合编制氢能、生物医药等六大跨区域产业链图谱，实施产业链</span>\t<span style=\"color: rgb(0, 0, 0);\">“织网工程”，为延链、补链、强链、优链提供“导航图”。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">据统计，北京流向津冀技术合同成交额由</span>\t<span style=\"color: rgb(0, 0, 0);\">2013年的71.2亿元增长至2023年的748.7亿元，累计超2800亿元。近日由北京大学首都发展研究院发布的《京津冀协同创新指数2023》显示，2013年至2022年，京津冀协同创新指数从100增长到297.6，年均增速为12.9%。</span></p><p class=\"ql-align-justify\">\t<strong>以共建共享推动公共服务“跨省过河”</strong></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">习近平总书记指出，推进京津冀协同发展，最终要体现到增进人民福祉、促进共同富裕上。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">总面积</span>\t<span style=\"color: rgb(0, 0, 0);\">21.6万平方公里、拥有1亿多人口的京津冀地区，地缘相接、人缘相亲、文化一脉，具备公共服务资源共建共享的天然基础。坚持鲜明的人民立场，让京津冀这片古老又现代的土地幸福底色更浓、成色更足。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">记者在北京儿童医院保定医院见到钟女士时，她正在为身患白血病的</span>\t<span style=\"color: rgb(0, 0, 0);\">9岁孩子办理出院手续。新的治疗阶段已经完成，她计划带孩子回老家看爷爷奶奶。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">去年</span>\t<span style=\"color: rgb(0, 0, 0);\">5月，为给孩子看病，钟女士本打算挂北京儿童医院血液一科的专家号，带着孩子去北京看病。后来才知道，这位专家每周来保定儿童医院坐诊。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">2015年，保定市儿童医院接受北京儿童医院托管，开创了公立医疗机构跨省托管的先河。如今，北京儿童医院将造血干细胞移植专业科室及人员“整体下沉”到保定，合作步步加深。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">作为落地城市副中心的三甲综合医院，北京友谊医院通州院区开诊</span>\t<span style=\"color: rgb(0, 0, 0);\">5年来，医疗服务总量逐年递增，门急诊总量超458.9万人次，其中外埠患者比例超40%，主要来自廊坊北三县和通州周边地区。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">肝硬化患者刘磊是这间医院受益者之一。经过肝移植手术，刘磊的肝功能逐步恢复正常，这意味着一台创造了</span>\t<span style=\"color: rgb(0, 0, 0);\">“活体辅助肝移植最小移植物”纪录的顶尖手术最终成功。通州蜕变为城市副中心过程中快速提升的医疗能力给予了更多像刘磊一样的患者坚强保障。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">户籍改革、医疗改革、公共服务改革</span>\t<span style=\"color: rgb(0, 0, 0);\">……一项项利民之策在京畿大地落地开花。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">寒假期间，雄安新区以财政补贴方式，组织</span>\t<span style=\"color: rgb(0, 0, 0);\">28所中小学开展免费托管服务。记者采访时，在雄安史家胡同小学的塑胶跑道上，体育教师带着孩子们正在进行多形式跑跳训练。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">2017年8月，京冀两省市政府签署协议，北京市以“交钥匙”方式支持雄安新区建设幼儿园、小学、完全中学、综合医院各一所，雄安史家胡同小学是其中之一。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">“我们学校的学生都是雄安建设者子女，寒假托管为他们解除了后顾之忧，让他们能安心工作。”雄安史家胡同小学副校长王映说。</span></p><p class=\"ql-align-justify\">\t\t<span style=\"color: rgb(0, 0, 0);\">十年来，京津冀协同发展彰显鲜明的人民立场，通过创新体制机制和政策，促进公共服务</span>\t<span style=\"color: rgb(0, 0, 0);\">“跨省过河”、全面融合，让群众增强获得感、幸福感。京津冀已有4900余家定点医疗机构实现跨省异地就医住院费用直接结算，200余所京津中小学幼儿园在河北开展跨区域合作办学。</span></p><p class=\"ql-align-justify\">\t京畿大地激荡人心的发展故事还在继续书写。面向未来，习近平总书记的指引清晰而坚定：“努力使京津冀成为中国式现代化建设的先行区、示范区。”（记者 李凤双、张涛、陈炜伟、任丽颖、郭宇靖、毛振华、张骁、白佳丽）</p>",
        "website_url": null,
        "email": null,
        "contacts": null,
        "contacts_mobile": null,
        "contacts_address": null,
        "zip_code": null,
        "enterprise_name": null,
        "category_id": 492,
        "cat_name": "农村新房舍",
        "website_name": "农民网-测试专用",
        "suffix": "全国政务信息一体化应用平台",
        "commendArticle": []
    }
}

//投票功能 start ---------------------------------------->
//1.是否展示投票
const articleChoice = ref(false);
const articleId = templateData.data.id;
if (templateData.data.is_survey == 1) {
    console.log("本篇文章含有投票！")
    articleChoice.value = true;
    getVoteList();
}

const radio1 = ref(''); //单选
const check1 = ref([]); //多选
const isDisabled = ref(false);//是否禁用提交按钮
const isRadio = ref(true);//是否渲染单选

const userSurId = ref('');//投票属于哪一篇文章
const userChoice = ref('');//用于判断用户选择了其他选项以后，输入的值
const userIsChoice = ref('');//用于判断其他选项目前是什么值
const showUserChoice = ref(false);//是否显示其他输入框
const websiteSurveyData = ref([]);//投票结果

//2.获得投票列表
let voteList = ref([]);
async function getVoteList() {
    const voteData = await requestDataPromise('/web/getWebsiteSurvey', { method: 'GET', query: { 'art_id': articleId } });
    console.log(voteData)
    if (voteData.code == 200) {
        voteList.value = voteData.data;
        console.log(voteList.value)
        //判断显示单选还是多选
        //survey_type 0是单选 1是多选
        if (voteData.data[0].survey_type == 0) {
            isRadio.value = true;
        } else {
            isRadio.value = false;
        }
        //把最后一个的值拿出来 用于判断用户是否选择了其他
        for (let item of voteData.data) {
            //如果含有其他
            if (item.is_other == 1) {
                userIsChoice.value = item.id;
            }
        }
        //用户投票属于哪一篇文章
        userSurId.value = voteData.data[0].sur_id;

    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：首页投票")
        console.log("后端错误反馈：", voteData.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}

//3.当用户选择了选项，判断是否展示其他输入框
const handleRadioChange = (value) => {
    if (value == userIsChoice.value) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}

const handleCheckboxChange = (value) => {
    if (value.includes(userIsChoice.value)) {
        showUserChoice.value = true;
    } else {
        showUserChoice.value = false;
    }
}

//4.发起投票
async function addWebsiteSurvey() {
    //判断当前是单选还是多选
    console.log(isRadio.value)
    if (isRadio.value) {
        console.log("用户单选！")
        if (radio1.value != '') {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //文章id
                    // console.log(userSurId.value)
                    // 用户输入的值
                    // console.log(userChoice.value)
                    //如果使用了其他，其他的选项需要增加进去
                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption', {
                        method: 'GET',
                        query: {
                            'sur_id': userSurId.value,//投票的新闻id
                            'choice_name': userChoice.value,//投票的选项id
                        }
                    });
                    if (ChoiceData.code == 200) {
                        //提交完其他选项以后，再正式发起投票
                        const mkData = await requestHome('/web/addWebsiteSurveyVote', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,
                                'choice_id': ChoiceData.data
                            }
                        });
                        if (mkData.code == 200) {
                            ElMessage.success('投票成功！')
                            //把投票结果显示到页面上 禁用投票按钮
                            isDisabled.value = true;
                            websiteSurveyData.value = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            let data = mkData.data;
                            //遍历一下，把用户选中的那个设置status为1
                            for (let item of data.data) {
                                for (let i of data.choice) {
                                    if (item.id == i) {
                                        console.log(item.id)
                                        item.status = 1;
                                    }
                                }
                            }
                            websiteSurveyData.value = data;
                        } else {
                            ElMessage.error(mkData.message)
                        }
                    } else {
                        ElMessage.error('其他投票失败！')
                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                //如果没选择其他，直接提交选择的内容
                const mkData = await requestHome('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': radio1.value
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    let data = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    } else {
        console.log("多选！")
        //多选
        if (check1.value != []) {
            //先判断一下是否使用了其他选项
            if (showUserChoice.value) {
                if (userChoice.value != '') {
                    //判断用户是否只选择了一个其他
                    if (check1.value.length == 1) {
                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            //提交完其他选项以后，再正式发起投票
                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': ChoiceData.data
                                }
                            });
                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }

                    } else {
                        //用户选择了除了其他以外，还包括别的选项
                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
                            method: 'GET',
                            query: {
                                'sur_id': userSurId.value,//投票的新闻id
                                'choice_name': userChoice.value,//用户输入的其他选项文字
                            }
                        });
                        if (ChoiceData.code == 200) {
                            let data = check1.value;
                            //找到多选的数组，把其他默认值给替换掉
                            for (let i = 0; i < data.length; i++) {
                                if (data[i] == userIsChoice.value) {
                                    data[i] = ChoiceData.data;
                                }
                            }
                            let jsonArray = JSON.stringify(data);
                            //提交完其他选项以后，再正式发起投票
                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                                method: 'GET',
                                query: {
                                    'sur_id': userSurId.value,
                                    'choice_id': jsonArray
                                }
                            });

                            if (mkData.code == 200) {
                                ElMessage.success('投票成功！')
                                //把投票结果显示到页面上 禁用投票按钮
                                isDisabled.value = true;
                                websiteSurveyData.value = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                let data = mkData.data;
                                //遍历一下，把用户选中的那个设置status为1
                                for (let item of data.data) {
                                    for (let i of data.choice) {
                                        if (item.id == i) {
                                            //console.log(item.id)
                                            item.status = 1;
                                        }
                                    }
                                }
                                websiteSurveyData.value = data;
                            } else {
                                ElMessage.error(mkData.message)
                            }
                        } else {
                            ElMessage.error('其他投票失败！')
                        }

                    }
                } else {
                    ElMessage.error('请输入选项内容！')
                }
            } else {
                let jsonArray = JSON.stringify(check1.value);
                //如果没选择其他，直接提交选择的内容
                const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
                    method: 'GET',
                    query: {
                        'sur_id': userSurId.value,
                        'choice_id': jsonArray
                    }
                });
                if (mkData.code == 200) {
                    ElMessage.success('投票成功！')
                    //把投票结果显示到页面上 禁用投票按钮
                    isDisabled.value = true;
                    websiteSurveyData.value = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    let data = mkData.data;
                    //遍历一下，把用户选中的那个设置status为1
                    for (let item of data.data) {
                        for (let i of data.choice) {
                            if (item.id == i) {
                                console.log(item.id)
                                item.status = 1;
                            }
                        }
                    }
                    websiteSurveyData.value = data;
                } else {
                    ElMessage.error('投票失败！')
                }
            }
        } else {
            ElMessage.error('请选择一个选项')
        }
    }
}
//是否展示投票 end ---------------------------------------->
</script>

<style lang="less" scoped>
.articleMainBox {
    width: 900px;
    margin: 0 auto;
    display: block;
    .articleTitle {
        width: 900px;
        font-size:30px;
        color:#333333;
        font-weight:bold;
    }
    .articleInfo {
        width: 900px;
        color:#999999;
        font-size:14px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 30px;
        div{
            margin-right: 40px;
        }
    }
    .articleContent {
        width: 900px;
        padding-top:60px;
        font-size:20px;
        margin-bottom: 60px;
        img{
            display: block;
            margin: 0 auto;
            margin-bottom: 60px;
        }
        .fontBold {
            font-weight:bold;
        }
        div {
            text-indent: 2em;
            margin-bottom: 28px;
        }
    }
    .statementBox {
        width: 900px;
        height: 143px;
        border-top: 1px solid #D9D9D9;
        .statementBoxLeft {
            width: 900px;
            height: 143px;
            padding-top: 40px;
            text-align: left;
            box-sizing: border-box;
            font-size:20px;
            color:#999999;
        }
    }
}

//投票 start ---------------------------------------->
.index_3_box_vote {
    .voteTitle {
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        color: #333333;
        padding-left: 20px;
        width: 100%;
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #333;
        box-sizing: border-box;
    }
    width:100%;
    box-sizing:border-box;
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        height: 394px;
        margin-top: 20px;
        border-radius: 6px 6px 6px 6px;
        padding: 4px 40px 4px 6px;
        box-sizing: border-box;
        p {
            font-weight: bold;
            height: 69px;
            font-family: PingFang SC, PingFang SC;
            font-size: 20px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 12px 20px 0 32px;
        }
        .radioBox {
            height: 250px;
            padding-left: 30px;
            overflow-y: auto;
            box-sizing: border-box;
            padding-bottom: 20px;
        }
        .radio {
            /deep/.el-radio {
                --el-radio-input-border-color-hover: #dd7d18;
            }
            /deep/.el-radio-group {
                align-items: center;
                display: inline-flex;
                flex-wrap: wrap;
                font-size: 0;
                //padding-left: 35px;
            }
            /deep/.el-radio.el-radio--large {
                width: 100%;
                height: 29px;
                margin-bottom: 15px;
            }
            /deep/.el-radio.el-radio--large .el-radio__label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 300px;
            }
            /deep/.el-radio.el-radio--large .el-radio__inner {
                height: 16px;
                width: 16px;
            }
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #333;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #333;
                border-color: #333;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #333;
            }
            /deep/.el-checkbox-group {
                align-items: center;
                display: inline-flex;
                flex-wrap: wrap;
                font-size: 0;
            }
            /deep/.el-checkbox.el-checkbox--large {
                width: 330px;
                height: 29px;
                margin-bottom: 15px;
            }
            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 300px;
            }
            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
                height: 16px;
                width: 16px;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #333;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #333;
                border-color: #333;
            }
        }
        .btn {
            padding-left: 30px;
            button {
                width: 78px;
                height: 37px;
                line-height: 37px;
                border-radius: 6px;
                border: none;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #999999;
            }
            .voting {
                //background-color: #dd7d18;
                color: #fff;
                margin-right: 44px;
                cursor: pointer;
            }
            .look {
                cursor: pointer;
            }
        }
    }
    .inquireData {
        .inquireDataItem {
            width: 100%;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #F3F3F3;
            border: 1px solid #D2D2D2;
            margin-bottom: 10px;
            border-radius: 6px;
            padding: 0 15px;
            box-sizing: border-box;
            color: #999999;
            .inquireDataItemTitle {
                width: 290px;
                height: 38px;
                font-size: 16px;
                line-height: 38px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .inquireDataItemNum {
                font-size: 16px;
            }
        }
        .active {
            color: #dd7d18;
            background: #f3e9de;
            border: 1px solid #dd7d18;
        }
    }
}

//样式1
.voteStyle1 {
    .voteTitle {
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #1C5468;
    }
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        .radio {
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #1C5468;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #1C5468;
                border-color: #1C5468;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #1C5468;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #1C5468;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #1C5468;
                border-color: #1C5468;
            }
        }
    }
    .inquireData {
        .active {
            color: #1C5468;
            background: #f3e9de;
            border: 1px solid #1C5468;
        }
    }
}
.votingStyle1 {
    background-color: #1C5468;
}

//样式2
.voteStyle2 {
    .voteTitle {
        border-bottom: 1px solid #E7E7E7;
        border-top: 1px solid #A91B33;
    }
    border:solid 1px #FBFBFB;
    background: #FBFBFB;
    .inquire {
        .radio {
            /deep/.el-radio__input.is-checked+.el-radio__label {
                color: #A91B33;
            }
            /deep/.el-radio__input.is-checked .el-radio__inner {
                background: #A91B33;
                border-color: #A91B33;
            }
        }
        .checkInputBox {
            /deep/.el-checkbox {
                --el-radio-input-border-color-hover: #A91B33;
            }
            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
                color: #A91B33;
            }
            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                background: #A91B33;
                border-color: #A91B33;
            }
        }
    }
    .inquireData {
        .active {
            color: #A91B33;
            background: #f3e9de;
            border: 1px solid #A91B33;
        }
    }
}
.votingStyle2 {
    background-color: #A91B33;
}

//投票 end ---------------------------------------->
</style>